"Breaking it down, we need five shapes in total: Four-pointed star Flower-ish thing (yes, that's the technical term) Cylinder-ish thing (also the correct technical term) Rounded hexagon Circle I drew these shapes in a graphics editing program (I like Affinity Designer, but any app that lets you draw vector shapes should work), outputted them in SVG, and then used a tool, like Temani Afif's generator, to translate the SVG paths the program generated to the CSS shape() syntax."
"Now, before I exported the shapes from Affinity Designer, I made sure the flower, hexagon, circle, and cylinder all had the same number of anchor points. If they don't have the same number, then the shapes will jump from one to the next and won't do any morphing. So, let's use a consistent number of anchor points in each shape - even the circle - and we can watch these shapes morph into each other."
"Something related (and possibly hard to solve, depending on your graphics program) is that some of my shapes were wildly contorted when animating between shapes. For example, many shapes became smaller and began spinning before morphing into the next shape, while others were much more seamless. I eventually figured out that the interpolation was matching each shape's starting point and continued matching points as it followed the shape."
The Google Gemini button animation can be recreated by composing five vector shapes and animating morphs between them with CSS. Create a four-pointed star, flower-like, cylinder-like, rounded hexagon, and circle as SVG paths. Convert SVG paths to CSS shape() syntax using a generator tool. Ensure every shape uses the same number of anchor points so interpolation matches corresponding points and produces smooth morphs. Set twelve anchor points per shape to match the most complex shape. Align starting points consistently to prevent contortions, shrinking, or premature spinning during transitions. Use CSS animations to rotate and morph shapes simultaneously.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]