JSFiddle - React, Tailwind, and code Playground
HTML
<svg height="1000" width="1000" viewBox="0 0 1000 1000">
<defs>
<g id="a0"><circle cx="500" cy="500" r="5"/></g>
<g id="a1">
<use href="#a0" x="40" y="81"/>
<use href="#a0" x="84" y="18"/>
<use href="#a0" x="-69" y="72"/>
<use href="#a0" x="62" y="-80"/>
<use href="#a0" x="-6" y="92"/>
<use href="#a0" x="-87" y="-54"/>
<use href="#a0" x="50" y="-78"/>
<use href="#a0" x="93" y="-71"/>
<use href="#a0" x="-92" y="40"/>
<use href="#a0" x="39" y="-12"/>
</g>
<g id="a2">
<use href="#a1" x="-79" y="26"/>
<use href="#a1" x="22" y="94"/>
<use href="#a1" x="33" y="60"/>
<use href="#a1" x="-29" y="-92"/>
<use href="#a1" x="67" y="-60"/>
<use href="#a1" x="16" y="-47"/>
<use href="#a1" x="2" y="22"/>
<use href="#a1" x="-1" y="-3"/>
<use href="#a1" x="9" y="-83"/>
<use href="#a1" x="57" y="-37"/>
</g>
<g id="a3">
<use href="#a2" x="45" y="83"/>
<use href="#a2" x="91" y="95"/>
<use href="#a2" x="-62" y="-12"/>
<use href="#a2" x="-92" y="-61"/>
<use href="#a2" x="50" y="94"/>
<use href="#a2" x="-79" y="76"/>
<use href="#a2" x="-79" y="-69"/>
<use href="#a2" x="-2" y="-30"/>
<use href="#a2" x="-6" y="19"/>
<use href="#a2" x="-22" y="-91"/>
</g>
<g id="a4">
<use href="#a3" x="16" y="-93"/>
<use href="#a3" x="-97" y="-6"/>
<use href="#a3" x="77" y="-14"/>
<use href="#a3" x="87" y="-43"/>
<use href="#a3" x="-91" y="-24"/>
<use href="#a3" x="78" y="32"/>
<use href="#a3" x="82" y="-44"/>
<use href="#a3" x="-55" y="-52"/>
<use href="#a3" x="-69" y="2"/>
...