I'm pleased to present the new Javascript library for SVG. It prepares data and doesn't manipulate the DOM. With it, you can create spinners, transition effects, or elements for illustrations.
GitHub repo: https://github.com/guandjoy/primitivo-svg
What makes it unique
- Morph paths via animate tag;
- Powerful timing and spacing controls;
- Phased animation;
- Animate with SSR and without JS (except for interactive cases).
Let's walk through examples 🌌
Sequence of Polygons
The first demo of how Primitivo generates shapes. Here we animate the numOfSegments parameter by changing the value from 2 to 44 with a 1.01 step increment.
The artistic idea taken from Matt DesLauriers' shot.
Smart Round
To create round shapes, Primitivo has the round parameter. With smartRound and adaptArms modes, you can get a circle from a non-equilateral polygon. This feature is fundamentally essential and allows us to make phased transitions.
Noise of Distance
The distance value stands for a position of a vertex between a center of a polygon and its boundaries.
The - and + buttons are responsible for the depth value, which is powering numOfSegments. Here is the formula on how it works:
numOfVertexes = numOfSegments * Math.pow(2, depth)
Phased Transition [interactive]
Inventing Phased Transition was a challenging goal. The Phases Layer generates key paths and seamlessly animates them in conjunction with the Spacing Layer. It allows us to create complex timing and spacing setups for a scene with many key paths. For example, if you want to seamlessly morph a triangle to a circle and then to a square using a single easing function, you can achieve that by using the Spacing Layer.
Blobby Spinner
Play with this component on CodeSandbox and generate your's unique effects. Also, if you'll use Server Side Rendering, the animation by itself could work while JS being off.
Thanks for watching!
Click the star button on the GitHub repo and ask your questions in the comments below 💘
New open-source project is coming soon 😊
Top comments (0)