<svg width="60" height="60" viewBox="0 0 60 60">
<g id="bubbles">
<circle class="bubble" cx="4" cy="30" r="4" fill="#ED6E46" />
<circle class="bubble" cx="30" cy="4" r="4" fill="#ED6E46" />
<circle class="bubble" cx="56" cy="30" r="4" fill="#ED6E46" />
<circle class="bubble" cx="30" cy="56" r="4" fill="#ED6E46" />
</g>
<use xlink:href="#bubbles" class="dup-bubbles"></use>
</svg>
.dup-bubbles{
transform-origin: 30px 30px;
transform: rotate(45deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.