CodePen Embed - SVG

<svg width="60" height="145" viewBox="0 0 60 145" class="ferry-wand">
  <line x1="30" y1="35" x2="30" y2="145" stroke="#818ccf" stroke-width="4"/>
  <polygon class="star" points="0,20 20,20 30,0 40,20 60,20 40,35 60,60 30,45 0,60 20,35 " fill="#b6e2ff"/>
  <g class="magic">
    <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>
</svg>

.magic{
  transition: transform 4s ease;
  transform-origin: 30px 30px;
}
.ferry-wand:hover .magic{
  transform: rotate(2turn);
}

This Pen is owned by IMD on CodePen.

See more by @IMD on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.