2c:null 2d:["$","title",null,{"children":"SVG displacement filters | Brett Cooper | Observable"}] 32:T418, 33:Tb20,# Filter id="displacement-filter" **[filterUnits](https://www.w3.org/TR/filter-effects-1/#element-attrdef-filter-filterunits)** = "*userSpaceOnUse* | *objectBoundingBox*" **[color-interpolation-filters](https://www.w3.org/TR/filter-effects-1/#propdef-color-interpolation-filters)** = [auto](https://www.w3.org/TR/filter-effects-1/#valdef-color-interpolation-filters-auto) | [sRGB](https://www.w3.org/TR/filter-effects-1/#valdef-color-interpolation-filters-srgb) | [linearRGB](https://www.w3.org/TR/filter-effects-1/#valdef-color-interpolation-filters-linearrgb) **[feImage](https://www.w3.org/TR/filter-effects-1/#elementdef-feimage)** The filter image(s) to use. **[feDisplacementMap](https://www.w3.org/TR/filter-effects-1/#elementdef-fedisplacementmap)** How the filter is applied. >***scale***: is the strength of the distortion. ***xChannelSelector*** & ***yChannelSelector***: determines which color channels (red, green, blue, alpha) should be applied to which axis for distortion. ***[in](https://www.w3.org/TR/filter-effects-1/#element-attrdef-filter-primitive-in)*** = [SourceGraphic](https://www.w3.org/TR/filter-effects-1/#attr-valuedef-in-sourcegraphic) | [SourceAlpha](https://www.w3.org/TR/filter-effects-1/#attr-valuedef-in-sourcealpha) | [BackgroundImage](https://www.w3.org/TR/filter-effects-1/#attr-valuedef-in-backgroundimage) | [BackgroundAlpha](https://www.w3.org/TR/filter-effects-1/#attr-valuedef-in-backgroundalpha) | [FillPaint](https://www.w3.org/TR/filter-effects-1/#attr-valuedef-in-fillpaint) | [StrokePaint](https://www.w3.org/TR/filter-effects-1/#attr-valuedef-in-strokepaint) | [<filter-primitive-reference>](https://www.w3.org/TR/filter-effects-1/#typedef-result-filter-primitive-reference) ```svg ``` https://drafts.fxtf.org/filter-effects/#elementdef-fedisplacementmap This filter primitive uses the pixels values from the image from **in2** to spatially displace the image from **in**. This is the transformation to be performed: > P'(x,y) ← P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5)) The displacement map, **in2**, defines the inverse of the mapping performed. To sum up the inner mechanics of the displacement filter are these three simple sentences: Any color value above 127 will shift the corresponding pixel into the direction of the scale value; Any color value below 127 will shift the corresponding pixel into the opposite direction; A color value of 127 will have no effect. 34:[{"id":"3961c6bb716b13eb1b8b523c6f5704a158987a3dfe41023b1ad88fc0923dc11464b72b802f0dee1a9c0d2829107681dee4d71512cbd45580ce274e99606bc365","href":"https://static.observableusercontent.com/files/3961c6bb716b13eb1b8b523c6f5704a158987a3dfe41023b1ad88fc0923dc11464b72b802f0dee1a9c0d2829107681dee4d71512cbd45580ce274e99606bc365","name":"Flowers-04.jpg","type":"image/jpeg","lastModified":1630908849250.483,"size":346917},{"id":"64ed8dd1066fe80e043f480640c9b9206624858002681305e8a209f1298848c6da963269a0b847a87e62eff243746e78adcf86636dc962dcfd2ad318becb83a1","href":"https://static.observableusercontent.com/files/64ed8dd1066fe80e043f480640c9b9206624858002681305e8a209f1298848c6da963269a0b847a87e62eff243746e78adcf86636dc962dcfd2ad318becb83a1","name":"piqsels@1.com-id-stiek.jpg","type":"image/jpeg","lastModified":1630913356659.929,"size":87120},{"id":"cf4e14f34564cf05c97e62e7697803a96760ceb9a28452e563f687e20a2a132bc8616c792b326b7ea9b3ba33df19647321400e7256abeede26a411ffdac5fe75","href":"https://static.observableusercontent.com/files/cf4e14f34564cf05c97e62e7697803a96760ceb9a28452e563f687e20a2a132bc8616c792b326b7ea9b3ba33df19647321400e7256abeede26a411ffdac5fe75","name":"piqsels.com-id-zkuqa2.jpg","type":"image/jpeg","lastModified":1630915912922.542,"size":167280}] 30:{"id":"16ddeba368402fb8","slug":"svg-displacement-filters","title":"SVG displacement filters","thumbnail":"56d02bef855b72657c69908d345a80142838cf64c8423a4a7ba785e113a4cc08","access_level":"public","create_time":"$D2021-09-05T06:58:08.746Z","update_time":"$D2022-06-16T16:44:56.931Z","view_time":null,"first_public_time":"$D2022-06-16T16:45:13.941Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":227,"publish_version":227,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG displacement filters","cells":[{"id":0,"value":"# SVG displacement filters\n\nThis notebooks is Based on the article [A Deep Dive Into The Wonderful World Of SVG Displacement Filtering](https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/) in smashing magazine September 1, 2021. And was made to help me understand this filter.\n\nhttps://www.w3.org/TR/filter-effects-1/#feDisplacementMapElement\n\nhttps://tympanus.net/codrops/2019/01/15/svg-filters-101/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"### Example one:\nImage of Barcelona’s *La Sagrada Familia* to “distort” the *Mona Lisa* by [Dirk Weber](https://codepen.io/DirkWeber).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"{\n const feImage = document.querySelector('feImage');\n\n fetch('https://assets.codepen.io/100347/fed_sagrada-384.jpg')\n .then((response) => {\n return response.blob();\n })\n .then((blob) => {\n const objURL = URL.createObjectURL(blob);\n feImage.setAttribute('href', objURL);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$33","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"To remove the jaggies: https://codepen.io/smashingmag/pen/PojNWwW","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"https://commons.wikimedia.org/wiki/File:Flowers-04.jpg\n\nhttps://www.piqsels.com/en/public-domain-photo-stiek/\n\nhttps://www.piqsels.com/en/public-domain-photo-zkuqa/\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"img = FileAttachment(\"Flowers-04.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"fil = FileAttachment(\"piqsels.com-id-zkuqa2.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"fil2 = FileAttachment(\"piqsels@1.com-id-stiek.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"viewof scale = Inputs.range([-360, 360], {value: 80, step: 1, label: \"Scale\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"\n\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"imageWidth = 365","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"imageHeight = 228","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"Observable might be able to get this blob","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"{\n const feImage = document.querySelector('#fefi');\n\n fetch(fil)\n .then((response) => {\n return response.blob();\n })\n .then((blob) => {\n const objURL = URL.createObjectURL(blob);\n feImage.setAttribute('href', objURL);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"// FileAttachment(\"piqsels@1.com-id-stiek.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"//FileAttachment(\"Flowers-04.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"