SVG Morphing

I have created a simple utility that enables the user to tailor various parameters needed to morph SVGs in a simple way. It creates the HTML/CSS text needed to produce the effect which the user can then copy-paste into a file and run in a browser. Simply capturing the screen (e.g. with the Sharex utility, or as a browser source in OBS Studio) while the browser displays the animation enables you to save it as a video clip that you can then use in a video editor such as Shotcut. Or you could simply incorporate the HTML/CSS into your own webpage, to add some interactivity to it.

You cannot use a previous version of Shotcut e.g. version 20.07.11 that supports the “Text:HTML” filter. This is because the interpolation library used to morph the SVG paths is not compatible with the webkit-browser used by the old versions of Shotcut.

A description of the utility and a link to it can be found here:

3 examples can be seen in the video clip below:


That resource page on your site is a real gold mine. :+1: :+1:

Thank you. I am working on another project to add to the ones already there.

1 Like