Take the 2-minute tour ×

I'm trying to create animated scheme of atom. I realized animation of electrons but they always start their animation in the first point of Path element.

See example here: http://localhostr.com/3CVziiftCJmm

How to start animation from random point along the Path curve? Also acceptable another solution: rotation of Path curves. Anyway i want to make this atom scheme more realistic.

share|improve this question
add comment

1 Answer

There's no declarative randomness in svg yet, though it has been proposed. If you look at the provided examples there you'll find a javascript library that allows you to use declarative randomness in svg (but note that it still requires javascript to work).

Another option if you need randomness is to use javascript to generate the path offsets you need, e.g tweaking the keyTimes and keyPoints attributes on the <motionPath> element.

It will probably be more compatible to do fully javascript-driven animation however, webkit has problems with dynamically modified animation elements.

share|improve this answer
add comment

Your Answer


