Accepted answer

I think your problem is that a part of the bottom of your SVG is not visible because .svg-container has a overflow:hidden property. This makes it appear like it was not in the center.

If you remove that CSS property and configure your height correctly things start to look different:


Part of the problem is the styling of the div#container and the svg.svg-content.

No need to use the position and the display attributes.

You don't set a width and height to the svg and you don't have a resize handler, so how can you be responsive.

Why add a new center circle each time you use the sliders.

You only get 80 stars with radius 0.5.

Related Query