svg-animation | The Illusion of Life : An SVG Animation Case Study | Animation library

Try using this:

I would suggest you put

the animation start/stop functionality in different css classes:

The sane way to do this in Inkscape is to select a group node that has a "transform: translate(x, y)" attribute, and remove the transform. Then select the group's child nodes and position where the group node needed. On the Javascript side I needed to remember the center point positions for transformations before rotating. The Hours, Minutes, and Seconds hand all share the same center point for rotation, which needs to be absolute positioned relative to the bounding box coordinates obtained with getBBox().

Knowing how to do rotations in an SVG user coordinate system with a group that is translated and has a transformation center that is off-center could still be advantageous in some situations though.

Assuming it's a copy paste from codepen, you've forget to import relevant 3rd party libraries used in original work. You can view them in settings -> JS -> External scripts

Add these code at the bottom of your code

This could probably use a little tweaking, but you can make CSS transitions work with the transform property. The key is the order in which translate, rotate and scale are applied.

Unfortunately, your file can not be animated, because the paths merge. Look, - a few nodal points are located together on the same vertices of the polygon.

I drew again, trying to keep your size and curve shape.

Using animateMotion would be a solution for a continuous motion on the path. If you need to stop the movement at intervals I would use javascript. In this book: Using SVG with CSS3 and HTML5: Vector Graphics for Web Design you have a thorough description of how to use javascript to emulate animateMotion

In order to stop the rect I'n using the timestamp for the requestAnimationFrame's callback. In the next example I'm stopping the rect every 2 seconds for 1 second.

Since the timestamp is running continuously I need a way to record the moment when it stops so that I can resume the animation from here. For this I'm setting lastTime as the last time when the rect has stopped.

Please read the comments in my code.

Not sure if there's any easier way of doing this, the closest solution I found recently was using a clip path on the SVG itself. I've just stuck this on your codepen example as a tester:

You are writing the values wrongly, you should pay attention to , and ;. The whole value of the path use , as delimiter (ex : M1045, 520L1173, 558L1184, 393Z) and those values are delimited by ; inside the values attrbiute