svgOrigin to find the center

[celli]

Maybe I am over-thinking this and there is a much simpler solution.

 

I am trying to set a bunch of SVG circles to the center point of the parent SVG, and maybe use svgOrigin to find the center (of the main SVG's viewBox) and apply it to X, Y starting values of each of the circles. In my codePen I am using a standard way to find the center and then apply those values to the X, Y points of each of my circles, but it doesn't seem to work. Then I figured I could use the svg's bounding-box, viewBox or some other way to get the center... or possibly svgOrigin, but all of my attempts don't seem to work properly.

 

Ideally I wanted to use stagger and cycle to animate each dot from the exact center point in the SVG's viewBox--but applying the center of the main SVG's viewBox to their starting positions is what I can't seem to get.

See the Pen XdqXOJ by celli (@celli) on CodePen

[PointC]

Hi celli

 

Do you need to calculate the center on the fly? Since this is a SVG, we can just look at the viewBox of 0 0 600 361 and know that the center is 300 180.5. You could then use that as a staggerFrom() tween coordinate for your circles cx and cy attributes.

circles.staggerFrom(".circleBlast", 0.8, {attr:{cx:300,cy:180.5}},0.0005)

I'm not sure if that's exactly what you wanted, but here's a fork of your pen with that solution.

 

See the Pen ZWoBqp by PointC (@PointC) on CodePen

 

Hopefully that helps.

[celli]

PointC! You are on point, and a perfect solution as usual ! Thanks