How to convert an SVG to a Zim Squiggle or Blob?

I’m trying to animate a small ball that traces the name of my website along its stroke using ZIM.

Right now I only have the logo as an SVG with multiple filled <path> outlines (one for each letter). But when I imported the SVG into the HTML with the ZIM class SVG, the ZIM circle can no longer move along the SVG path. So my question is how to turn the SVG into a ZIM Squiggle or Blob so the animation can work?

Probably easiest to load each path into a Squiggle. Then each letter will be a Squiggle and you can animate along it using the path parameter. When the animation is complete (the call parameter), start the animation along the next squiggle, etc.

If you use SVG with the bitmap parameter set to false you may be able to get all the paths done at once... but then you would need to use svg.getChildAt(index) to access each individual squiggle inside.

1 Like

Thank you I will look into it. My fallback is using Tile, which is a lot easier than manipulating paths.

You could make your letters at ZIM Paths - Interactive Path Animations