feDisplacementMap Explained

Po-Hsiang (Matthew) Lu — Fri, 15 Jul 2022 10:08:37 +0000

feDisplacementMap is one of the SVG filters that always seems daunting for me to understand. But once I looked into it, it is not so complicated and is actually fun to play with.

Let's first see what this SVG filter can do.

feDisplacementMap takes in two input source in and in2. in is the image to be displaced, and in2 is used to calculated how in will be displaced. In this case, we used a forest image for in and an image created with feTurbulence. We can therefore create a ripple-like effect on the forest image.

In essence, what feDisplacementMap is doing is looping through each pixel on an image and move the pixel around based on a transformation formula.

Transformation Formula

P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

Here's a breakdown of the formula:

P'(x, y) on the left is the coordinates after transformation
The right part is how it is transformed
XC(x,y) and YC(x,y) means the RGB value of the given coordinates on the in2 image divided by 255, so it will be between 0 and 1
The larger the scale is, the more a pixel is displaced

Example

<filter>
    <!-- ... -->
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" 
        xChannelSelector="R" yChannelSelector="G"/>
</filter>

If we compare the syntax of feDisplacementMap and the transformation formula, we realize that:

scale corresponds to scale
xChannelSelector specifies which color channel to look at for XC(x,y)
yChannelSelector specifies which color channel to look at for YC(x,y)

Note: SourceGraphic is the original input to the SVG filter, which is the forest image.

Here's the full example:

<svg>
  <defs>
    <filter id="displace">
      <feTurbulence id="turbulence" baseFrequency="0.1 0.1" result="turbulence" />
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="A" yChannelSelector="A"/>
    </filter>
  </defs>
  <image href="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" height="100%" width="100%" filter="url(#displace)"/>
</svg>

Now that we understand `feDisplacementMap`

We can go creative to experiment with interesting graphics with feDisplacementMap!

Use Nginx to serve static React site with gzip and HTTP2

Po-Hsiang (Matthew) Lu — Wed, 25 May 2022 13:38:19 +0000

Let's start with pre-compressing our React app when we run the build process. To do this, install a npm package.

npm install compress-create-react-app --save-dev

Then, change the build script in package.json to below.

build": "react-scripts build && compress-cra"

Whenever we run npm run build, our project will be built and compressed files will be created automatically.

Next, to serve our static files with gzip and HTTP2 using Nginx, we will need to check if we have the modules needed. The modules required are "ngx_http_gzip_static_module" and "ngx_http_v2_module". Run the following command and check if the output contains "--with-http_gzip_static_module" and "--with-http_v2_module".

sudo nginx -V

Here is the server block of our Nginx configuration that enables gzip and HTTP2. Note that to use HTTP2, we will first need HTTPS. If HTTPS is not yet activated, follow the guide of Let's Encrypt.

server {
  listen 443 ssl http2;
  ssl_certificate /PATH/TO/YOUR/CERTIFICATE;
  ssl_certificate_key /PATH/TO/YOUR/CERTIFICATE/KEY;
  location / {
    alias /PATH/TO/YOUR/BUILD/FOLDER;
    gzip_static on;
  }
  server_name YOURSERVERNAME;
}

The gzip_static directive allows Nginx to serve files with .gz extensions, while the http2 activates the support for HTTP2.

Forem: Po-Hsiang (Matthew) Lu

feDisplacementMap Explained

Transformation Formula

Example

Now that we understand feDisplacementMap

Use Nginx to serve static React site with gzip and HTTP2

Now that we understand `feDisplacementMap`