Animate Drawing SVG Shapes
Various animations are running smoothly at the same time, and in sequence. Arranged to run either in series or parallel. This example draws circles and lines into ThreeJS. Select the 'Start' button to begin the drawing. You can drag/drop the drawing by selecting any circle in the drawing and drag it. After the drawing is complete, select the 'Reset' to clear the drawing.

The SVG drawing overlays the ThreeJS canvas. You can toggle the SVG overlay visibility by selecting the 'Close SVG/Open SVG' button. When the SVG is closed the ThreeJS canvas is available for mousewheel/cursor control via the OrbitControls feature. The default view is CSS2DRenderer (SVG 2D) where the SVG animated shapes remains fixed. You can select 'SVG 3D' button to place the SVG animated shapes into the CSS3DRenderer where they will take on the perspective of the 3D environment.
Animation Sequence:
1. Draw yellow Circle
2. Draw top/bottom blue lines
3. Draw top/bottom red circles
4. Draw top/bottom green lines
5. Draw top/bottom green circles
6. Draw top/bottom red lines
7. Draw orange circle
(You can toggle Close/Open SVG during the drawing process.)

SVG Source:

ThreeJS SVG Source:

Javascript SVG:

Javascript ThreeJS: