Flying in particles to form a shape

[cssanimator 0 Likes (Newbie)]

After searching for two hours, I dare to ask this in the forum (I am not even at the point to provide a codepen):

 

Goal

I have an SVG that has a shape and the shape is built by hundereds dots (like this image). The goal is to create an animation when the page loads, that all those particles fly in and form the shape (as it is shown on the image).

 

Question

What path do I need to take to achieve that? Are there already examples that demonstrate such an animation? I could not find anything like it nor a respective tutorial.

 

Thanks for your help.

[OSUblake 9,990 Likes (Superhero)]

It might be really slow in SVG, but you could just animate the position of each shape from whatever distance you want.

 

Much better in canvas. Tupac is still alive!

See the Pen MKwebd by vinsongrant (@vinsongrant) on CodePen