<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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.