SVG - circle stretched in responsive lines - html

Question

I made a responsive animation grid with SVG, but I dont know why my circles are stretched. When I resize window in some proportions, then circles looks nice.
There you can see - JSFiddle
This is my SVG Code
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path id="firstLine" d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<path id="secondLine" d="M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100" class="second-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<path id="thirdLine" d="M 50 100 L 0 0, M 0 0 L 25 100, M 25 100 L 50 0, M 50 0 L 75 100, M 75 100 L 100 0, M 100 0 L 50 100" class="third-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" />
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#firstLine"/>
</animateMotion>
</circle>
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#secondLine"/>
</animateMotion>
</circle>
<circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
<animateMotion dur="60s" repeatCount="indefinite">
<mpath xlink:href="#thirdLine"/>
</animateMotion>
</circle>
<circle cx="35" cy="20" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke">
</circle>
</svg>

Answer 1

Maybe you dont need it now but I could do it giving the viewbox the desired ratio:
i.e: 0 0 100 100 for an square ratio
0 0 25 100 for an vertical ratio
0 0 100 25 for a horizontal ratio.
Then give to the svg tag a width and height of 100% and put the svg tag inside a div, this way I can keep the ratio of the circles, lines, other draws without stretching when the user resizes the window.