2e:null 2f:["$","title",null,{"children":"SVG Filter Crash Course | Luke Murray | Observable"}] 34:T41e,createSVG([(id) => { const color1Array = hexToRgb(duoToneColor1) const color2Array = hexToRgb(duoToneColor2) return htl.svg` `}], renderBostock)35:T6c3,// render an array of filter funcs. each filter func takes in an id and returns a filter // renderElement can be supplied to render the html element async function createSVG(filterFuncs, renderElement) { // map the filter funcs to an [id, filter][] array const idsAndFilters = filterFuncs.map(createFilter); const elementStyleString = createElementStyleString(idsAndFilters); const renderElementFunc = renderElement == null ? renderFiltersAsImg : renderElement; return htl.html` ${renderFiltersInSVG(idsAndFilters)} ${await renderElementFunc(elementStyleString)} ${renderFiltersAsText(idsAndFilters)} `; function renderFiltersInSVG(idsAndFilters) { return htl.svg``; } function createElementStyleString(idsAndFilters) { return `filter: ${idsAndFilters.map(([id, filter]) => `url(#${id}) `)};`; } async function renderFiltersAsImg(elementStyleString) { return htl.html`

`; } function renderFiltersAsText(idsAndFilters) { // use a serializer to convert svg elements to strings const s = new XMLSerializer(); return htl.html`

Filters

${idsAndFilters.map( ([id, filter]) => htl.html`

${s.serializeToString(filter)}

` )}

`; } function createFilter(filterFunc) { const filterId = nanoid(); return [filterId, filterFunc(filterId)]; } }36:T526,renderImage = (imgUrl) => (id) => htl.svg` `37:[{"id":"4627db00abe156ef7cf372fd520c1b7c6834064bf2e5b26362a149923c5c3b2ecf6a9a2e73897fda447b679e30041e4591bf644e90c62e61922461eb7159667b","href":"https://static.observableusercontent.com/files/4627db00abe156ef7cf372fd520c1b7c6834064bf2e5b26362a149923c5c3b2ecf6a9a2e73897fda447b679e30041e4591bf644e90c62e61922461eb7159667b","name":"nyc.jpeg","type":"image/jpeg","lastModified":1630002110965.16,"size":289074},{"id":"49cc68638365386104beabd1ddfe0093ea99549abc813e20e1d09c6f1f4dca2b08d92a4af27b1ea41db76b4723a64af797cc86e5231c54b738c14bf470359086","href":"https://static.observableusercontent.com/files/49cc68638365386104beabd1ddfe0093ea99549abc813e20e1d09c6f1f4dca2b08d92a4af27b1ea41db76b4723a64af797cc86e5231c54b738c14bf470359086","name":"ripple-displacement.jpg","type":"image/jpeg","lastModified":1630013364323.088,"size":12091},{"id":"eea229d324f03967d780752a4f0243dc6152c23ec744ddcbb90121a76f4cfb4a4a56b9ec1ebcf4ce16967f55bb05125312293a3efaa0e6f8bdb30635f733acda","href":"https://static.observableusercontent.com/files/eea229d324f03967d780752a4f0243dc6152c23ec744ddcbb90121a76f4cfb4a4a56b9ec1ebcf4ce16967f55bb05125312293a3efaa0e6f8bdb30635f733acda","name":"bostock.jpg","type":"image/jpeg","lastModified":1630017230119.317,"size":42497},{"id":"52a841a5e6ba1f79eb0139395bf14d6f807e36eb3bed62164ad54e67fa55836087f9f07dfc672a5592de33e93fa17ea51811a20b8c2c4d7c93dad831dbb52667","href":"https://static.observableusercontent.com/files/52a841a5e6ba1f79eb0139395bf14d6f807e36eb3bed62164ad54e67fa55836087f9f07dfc672a5592de33e93fa17ea51811a20b8c2c4d7c93dad831dbb52667","name":"watercolor-5062356_1920.jpg","type":"image/jpeg","lastModified":1630010686008.987,"size":1053265},{"id":"b604c0d7164ee6129c5c119dd4ddfa59ad5d9334cd9d630e1e15da0ea59b0c518eb5d044e432cdd61502df69990bead81c23beb9001bd32a4683d089c1aa7472","href":"https://static.observableusercontent.com/files/b604c0d7164ee6129c5c119dd4ddfa59ad5d9334cd9d630e1e15da0ea59b0c518eb5d044e432cdd61502df69990bead81c23beb9001bd32a4683d089c1aa7472","name":"image.png","type":"image/png","lastModified":1630020741071.082,"size":546890}] 32:{"id":"01602a8d9cb735b3","slug":"svg-filter-crash-course","title":"SVG Filter Crash Course","thumbnail":"4b10550731398083857eaf34638fd9148b16ef240768f90baac7d899e0e5896b","access_level":"public","create_time":"$D2021-08-26T18:00:23.045Z","update_time":"$D2021-08-27T00:07:46.003Z","view_time":null,"first_public_time":"$D2021-08-26T23:03:32.236Z","has_unpublished_edits":null,"fork":{"id":"7012061a800e7057","slug":"simple-svg","title":"Simple SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":23,"starred":false,"owner":{"type":"team","id":"2fffccdb72a41da3","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":"starter_2024"},"version":1138,"publish_version":1138,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null}],"members":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":15,"collection":null,"type":"notebook","body":{"title":"SVG Filter Crash Course","cells":[{"id":0,"value":"# SVG Filter Crash Course","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"I recently learned that you can [svg filter effects to html elements](https://www.noupe.com/design/svg-filters-how-to-apply-them-to-html-elements-96298.html). As a result there are tons of amazing visual effects you can implement in any modern browser without changing your html or using javascript.\n\nIn this notebook I've translated the examples from [Sara Soueidan's SVG Filters Crash Course Talk](https://www.sarasoueidan.com/blog/svg-filters/) into observable and have applied all of the examples to either image elements, paragraph elements, or header elements.\n\nMany of the examples have parameters exposed so that you can play with them. You can also expand the \"filters\" dropdown to see the actual filter which is applied.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"## Blur Intro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"Here is an example of a blur filter. The order controls the shape of the kernel in the x and y direction respectively. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"createSVG([\n blurFilterFunc\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"viewof orderX = Inputs.select([1, 2, 4, 5, 10, 20], {\n label: \"X Direction Blur\",\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"Try changing the x direction blur from 1 to 20 and notice how the image goes from horizontal to vertical blur","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"One of the cooler things about filters is they can apply to arbitrary elements. Here we apply the same filter to a paragraph of lorem ipsum text.\n\nThis looks like an image but you can select the text, copy and paste it, and treat it like you would any other text on the page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"createSVG(\n [blurFilterFunc],\n renderLoremIpsum\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"## Background Color\n\nHere we use a flood and merge filter to add a backdrop to some text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"createSVG(\n [\n (id) => htl.svg`\n \n \n \n \n \n \n \n`\n ],\n renderLoremIpsum\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"## Creating a drop shadow","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"First offset the source alpha which gives a mask of where the element or image is opaque, then apply a blur effect to the source alpha.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"createSVG(\n [\n (id) => htl.svg`\n \n \n \n \n`\n ],\n renderLoremIpsum\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"Next add a a flood and then composite the flood with the blurred alpha channel. Because of the composite function we use we are changing the color of the shadow from blurry black to light gray.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"createSVG(\n [\n (id) => htl.svg`\n \n \n \n \n \n \n`\n ],\n renderLoremIpsum\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"Finally we merge the shadow and the source graphic together creating our drop shadow effect.\n\nIf you try selecting text you might notice that the selection shadow is rendered as well. You do not get this same effect with `text-shadow`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"createSVG(\n [\n (id) => htl.svg`\n \n \n \n \n \n \n \n \n \n \n`\n ],\n renderLoremIpsum\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof dropShadowDx = Inputs.range([0, 20], {step: 1, label: \"Drop Shadow Dx\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"viewof dropShadowDy = Inputs.range([0, 20], {\n step: 1,\n label: \"Drop Shadow Dy\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof dropShadowBlur = Inputs.range([0, 20], {\n step: 1,\n label: \"Drop Shadow Blur\",\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"## Outline Text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"createSVG(\n [\n (id) => htl.svg`\n\n \n \n \n \n \n \n \n\n`\n ],\n renderHeader\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof outlineRadius = Inputs.range([0, 3], {\n step: 0.1,\n label: \"outline radius\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"## Cutout Text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"createSVG(\n [\n (id) => htl.svg`\n\n \n \n\n`\n ],\n renderHeader\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"## Image Texture\n\nHere we are using displacement maps to render an image with a specific texture.\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"createSVG([renderImage(rippleImgUrl)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"createSVG([renderImage(waterColorImgUrl)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"We can render the same images without the overlay and play around with the scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"createSVG([renderImageNoOverlay(waterColorImgUrl)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"createSVG([renderImageNoOverlay(rippleImgUrl)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"viewof overlayScale = Inputs.range([0, 1.5], {value: 0.2, step: 0.05, label: \"Overlay Scale\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"## Noise\n\nNoise is applied with `feTurbulence`. Here is a little demo so you can play with the parameters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"createSVG([\n (id) => htl.svg`\n \n \n \n`\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"viewof noiseBaseFrequency = Inputs.range([0, 1], {value: 0.02, step: 0.001, label: \"Noise Base Frequency\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"viewof noiseNumOctaves = Inputs.range([0, 10], {value: 3, step: 1, label: \"Noise Num Octaves\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"viewof noiseType = Inputs.select(['fractalNoise', 'turbulence'], {label: \"Noise Type\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"## Lighting\n\nYou can use lighting to simulate a paper effect using noise.\n\nTry setting the frequency to `.02`, the num octaves to `3` or `4` and the noise type to `fractal noise`.\n\n
\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"createSVG([(id) => htl.svg`\n \n \n \n \n \n \n`])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"## Poster Effect\n\nHere we map all the values in `RGB` to either `0`, `0.5`, or `1`. The result is an image with very few shades creating a poster effect.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"createSVG([(id) => htl.svg`\n \n \n \n \n \n \n \n`])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"## Duo Tone Effect\n\nThis effect can be used to replicate images which look similar to spotify advertisements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"viewof duoToneColor1 = color({\n value: \"#fe208d\",\n title: \"Duo Tone Color 1\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"viewof duoToneColor2 = color({\n value: \"#faf07a\",\n title: \"Duo Tone Color 2\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"## Resources\n\n- Sara Soueidan's [svg filter's talk](https://www.sarasoueidan.com/blog/svg-filters/)\n- [How to apply filters to svg elements](https://www.noupe.com/design/svg-filters-how-to-apply-them-to-html-elements-96298.html)\n- City Image from [unsplash](https://unsplash.com/photos/5omwAMDxmkU) by [Michael Discenza](https://unsplash.com/@mdisc)\n- Blue Water Color Image from [pixabay](https://pixabay.com/illustrations/watercolor-texture-background-paint-5062356/) by NeangArt","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"nanoid = {\n return import(\"https://cdn.skypack.dev/nanoid@3.1.25?min\").then(\n (res) => res.nanoid\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"blurFilterFunc = (id) => htl.svg`\n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"hexToRgb = hex =>\n hex.replace(/^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i\n ,(m, r, g, b) => '#' + r + r + g + g + b + b)\n .substring(1).match(/.{2}/g)\n .map(x => parseInt(x, 16))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"renderImageNoOverlay = (imgUrl) => (id) => htl.svg`\n \n\n \n \n \n \n \n\n\n\n \n \n \n \n \n\n \n \n \n \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"waterColorImgUrl = FileAttachment(\"watercolor-5062356_1920.jpg\").blob().then(URL.createObjectURL)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"rippleImgUrl = FileAttachment(\"ripple-displacement.jpg\").blob().then(URL.createObjectURL)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"function renderLoremIpsum(styles) {\n return htl.html`

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"function renderHeader(styles) {\n return htl.html`

Hello Observable!
`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"bostockUrl = await FileAttachment(\n \"bostock.jpg\"\n ).url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"function renderBostock(styles) {\n return htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"