Interactive SVG with Isomorphic Perspective 

After seeing cool animations on the No-code conference website, I created a quick experiment of how something like that could be done with Pinegrow Interactions.

How to use the example

Click on the lever to move it up and down. Moving the lever will also change the color of the element. If you are in the editor, make sure to enable Test clicks first.

How it is done

The No-code website uses many separate SVG images to layer the scenes. In Pinegrow we can use the SVG editing feature to keep the scene in one inline SVG image and add interactions on its sub-parts.

1. Select the SVG node.
2. Expand the SVG node in the Tree panel by clicking on the ICON_right icon in front of the svg node. Expand the top <g> element as well.
3. Select the Peg element. The Interaction action is added there. Use the Interactions panel to inspect the interaction.
4. Click on the Edit animation to open the animation in the timeline editor.
5. The SVG image is constructed of three parts: the peg, and front and back plates of the element.