Animated SVG
What is this?
An example of SVG animation with React Spring
I designed the logo for my business myself. Some time later, when I started redoing my business website, I thought of extruding the design, splitting the components and animating them. It could be an intersting interaction to have each part of the logo become a link for a section of the website. While I haven't been able to achieve a design with which I am perfectly happy, This sandbox shows that I am able to use ReactSpring to animate an SVG.
How did I do this?
The logo was designed on Affinity Designer using an iPad and the Apple Pencil. Later I also used Affinity Designer and the isometric grid to manually draw the 3D version of it and grouped the various layers in a way that I could see them separated as an SVG. I then imported the SVG into a react component and added React Spring to animate the various groups.