svg viewBox ;understanding relative, abolute units and using group tag <g>

<style>
svg {margin:100px;border:1px solid red;}
</style>

<svg width="200" height="200" viewBox="0 0 400 400">
<style>

#layer-1 {transform-origin:50% 50%;}
#circle1 {animation: anim1 2s infinite;}
@keyframes anim1 {
0% {r:50;fill-opacity:.1}
100% {r:100;fill-opacity:.7}
}
</style>
<rect x="0" y="0" width="100%" height="100%" fill="gray"/>
<g id="layer-1" transform="rotate(90) ">
<circle id="circle1" cx="25%" cy="50%" r="50" fill-opacity=".1" fill="red"/>
<circle id="circle1" cx="50%" cy="50%" r="50" fill-opacity=".1" fill="green"/>
<circle id="circle1" cx="75%" cy="50%" r="50" fill-opacity=".1" fill="blue"/>
</g>
</svg>