Letusan Bintang Mekanikal

'mechanical starburst'

Demo

<div class="labu">
   <svg id="labi" viewBox="0 0 100 100">
<g stroke-width="20">
<g transform="rotate(0 50 50)">
<circle cx="50" cy="50" r="0" stroke="#012" stroke-dasharray="0 9 6 4 5" fill="none">
<animate attributeName="r" values="0; 100" dur="30s" begin="0s" repeatCount="indefinite" />
</circle>
</g>
<g transform="rotate(60 50 50)">
<circle cx="50" cy="50" r="0" stroke="#345" stroke-dasharray="4 8 4 6 2" fill="none">
<animate attributeName="r" values="0; 100" dur="30s" begin="-2s" repeatCount="indefinite" />
</circle>
</g>
<g transform="rotate(120 50 50)">
<circle cx="50" cy="50" r="0" stroke="#678" stroke-dasharray="2 7 9 9 6" fill="none">
<animate attributeName="r" values="0; 100" dur="30s" begin="-4s" repeatCount="indefinite" />
</circle>
</g>
<g transform="rotate(180 50 50)">
<circle cx="50" cy="50" r="0" stroke="#9ab" stroke-dasharray="8 8 3 7 7" fill="none">
<animate attributeName="r" values="0; 100" dur="30s" begin="-6s" repeatCount="indefinite" />
</circle>
</g>
<g transform="rotate(240 50 50)">
<circle cx="50" cy="50" r="0" stroke="#cde" stroke-dasharray="1 5 6 7 5" fill="none">
<animate attributeName="r" values="0; 100" dur="30s" begin="-8s" repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
</div>
  <style>
    .labu {
      position: relative;
  background: #def;
      height: 60vh;
}
#labi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 100%;
width: 100%;
}
    </style>

Rujukan CSS di codepen.io/leimapapa/pen/mdvYJJB