Multiple Circle Animation Draw

[jaagare]

I am trying to create an animation with jQuery and CSS3 but not really successful.

Here is the scenario
I want first 2 circles one inside the other so the small circle is animated drawn first then the larger outside circle is drawn.

Once that is done I want to place small circles over the smaller and bigger circle (like points)

Now without animation I am able to do all this. But the animation drawing does not work.

I took help of this to create and place multiple circles - Items on Circle

[PaulOB]

@jaagare

Now without animation I am able to do all this. But the animation drawing does not work.

Where’s your code for this?

You linked to the article but not your attempt so we have nothing to debug:)

If you can show us what you’ve tried then we can have a starting point to help.

[PaulOB]

@jaagare

Here is the scenario
I want first 2 circles one inside the other so the small circle is animated drawn first then the larger outside circle is drawn.

Once that is done I want to place small circles over the smaller and bigger circle (like points)

Here’s my attempt at a CSS only version:

it may be of some use (or may not but was fun anyway )

[jaagare]

Wow this is amazing. Much more than what I had thought of. I will use that as a starting point, Thanks once again!!!

[jaagare]

Just for the benefit of all looking at different animation options > I found this great library that can be used

Animate.css | A cross-browser library of CSS animations.

You can add this to any div and get multiple animation options