SVG displacement filters / Brett Cooper

In New Zealand being kid of human. We might make mistakes but we will make other things too. - Michael Joseph Savage

Published

Edited

Jun 16, 2022

2 stars

<defs>

</filter>

</defs>

</svg>

<style>

.filter--mona {

filter: url(#displacement-filter);

}

.wrapper {

width: 508px;

height: 228px;

overflow: visible;

}

</style>

{

const feImage = document.querySelector('feImage');

fetch('https://assets.codepen.io/100347/fed_sagrada-384.jpg')

.then((response) => {

return response.blob();

})

.then((blob) => {

const objURL = URL.createObjectURL(blob);

feImage.setAttribute('href', objURL);

});

}

# 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

</filter>

```

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.

To remove the jaggies: https://codepen.io/smashingmag/pen/PojNWwW

https://commons.wikimedia.org/wiki/File:Flowers-04.jpg

https://www.piqsels.com/en/public-domain-photo-stiek/

https://www.piqsels.com/en/public-domain-photo-zkuqa/

img = FileAttachment("Flowers-04.jpg").url()

fil = FileAttachment("piqsels.com-id-zkuqa2.jpg").url()

fil2 = FileAttachment("piqsels@1.com-id-stiek.jpg").url()

viewof scale = Inputs.range([-360, 360], {value: 80, step: 1, label: "Scale"})

<defs>

</filter>

</defs>

</svg>

<style>

.filter--mona2 {

filter: url(#displacement-filter2);

}

.wrapper {

width: ${width}px;

height: 228px;

overflow: visible;

}

</style>

imageWidth = 365

imageHeight = 228

Observable might be able to get this blob

{

const feImage = document.querySelector('#fefi');

fetch(fil)

.then((response) => {

return response.blob();

})

.then((blob) => {

const objURL = URL.createObjectURL(blob);

feImage.setAttribute('href', objURL);

});

}

// FileAttachment("piqsels@1.com-id-stiek.jpg").image()

//FileAttachment("Flowers-04.jpg").image()

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more