SVG Morph makes complex morph animations between any two SVG images possible using SVG SMIL animations. Morph animations, require matching paths with identical number and type of transformations. This utility resamples SVGs to a standard format and creates the SVG SMIL animations. The repo includes legacy code that utilitzed CSS animations, but animating the d element of an SVG is not supported by WebKit. I plan to offer that as an option as well as provide a GUI interface to many of the other animation options which are currently hardcoded as an options constant.
Check out the demo at svgmorph.ricecodes.com
- Upload SVGs (use low res inputs to Adobe's image to SVG converter for great results)
- Choose timing options
- Animate
- Download!
- Everything is on the front-end
- React
- Typescript
- shadcn and Tailwind CSS
- I spun up this project using Vite
I used the following projects along the way:
- @figmania/svg-toolkit Handy Figma Plugin to get SVGs
- @danmarshall/google-font-to-svg-path Useful for getting Google Fonts as SVG
- @luncheon/simplify-svg-path Used this to simplify paths and make them all curves
- @cure53/DOMPurify For sanitizing pasted SVG code.