Responsive offset-path

offset-path defines the path along which an element moves. The movement itself is controlled in the animation using offset-distance.

Documentation:https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path

(At the time of writing, the offset-distance property used for animating movement along an offset-path was not supported by Safari browsers.)

Using the Pathfit.JS Library

This approach handles its task well and does not block the frontend with calculations.

At the moment, it is not intended for React, so I used the solution from this issue: https://github.com/ccprog/pathfit/issues/5

The required configuration is not available in node_modules, so I:

• cloned the pathfit repository;
• installed Rollup: npm i rollup;
• changed iife to umd in the rollup.config.js file;
• ran npm run build.

After that, you can add the generated JavaScript file to your project (pathfit.js or pathfit.min.js) and import Pathfit from it as a module. I added pathfit.js so I could add a ternary operator to it.

To make my blocks match the SVG path blocks, I also used another SVG element, which I inserted into the container block with the styles fill: none, stroke: none, position: absolute. I used it to calculate block sizes depending on the screen width. If the animation is not related to the layout, this step is not required.

Library link

CodePen example (by ccprog): https://codepen.io/ccprog/pen/QWjpgYP

GitHub

Using the D3.JS Library

This method uses the d3.js library.

Installation command:

npm install d3

Import:

import * as d3 from "d3";

All installation options for the library:

https://github.com/d3/d3/blob/main/README.md#installing

Documentation:

https://github.com/d3/d3/wiki

This approach works well for both vanilla JavaScript and React. I have not tried using it with other frameworks yet.

As I understand it, creating such an animation works as follows: we create a dynamic path based on the size of the original SVG, its viewBox, and the path. Then we pass the dynamically created path as an SCSS variable to the container element. The animated element receives offset-path through this variable.

During the implementation, I found the following:

• The animated element must be located inside the container to which we pass the path.
• Large path sizes require more calculations and can slow down the frontend.
• For everything to work correctly, the container must have a defined width and height. To create the dynamic path, we use its offsetWidth and offsetHeight.

Source

GitHub

Animating the SVG Itself

Alternative approach. I used it separately for the Safari browser in my animation.

(It did not work well for me in Firefox, but if the path is short, it works fine.)

You can animate an SVG element along a path using <animateMotion>.

animateTransform — https://codepen.io/chriscoyier/pen/XJoxvj

In SVG, you can animate SVG element attributes using <animate>.

SVG documentation: https://developer.mozilla.org/en-US/docs/Web/SVG

Example 1: https://svg-art.ru/?p=2142

Example 2:

GitHub