Old school D3 from simpler times

All examples By author By category About

lilactoast

Full window Github gist

SVG Flowers

<div class="svgcontainer">
<svg width="1200" height="600">
<circle cx="200" cy="70" r="40" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="230" cy="90" r="40" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="220" cy="120" r="40" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="170" cy="90" r="40" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="180" cy="120" r="40" fill="rgba(255, 0, 0, 0.1)"/>

<circle cx="400" cy="70" r="40" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="430" cy="90" r="40" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="420" cy="120" r="40" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="370" cy="90" r="40" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="380" cy="120" r="40" fill="rgba(100, 0, 155, 0.1)"/>

<circle cx="600" cy="70" r="40" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="630" cy="90" r="40" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="620" cy="120" r="40" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="570" cy="90" r="40" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="580" cy="120" r="40" fill="rgba(0, 0, 255, 0.1)"/>

<circle cx="800" cy="70" r="40" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="830" cy="90" r="40" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="820" cy="120" r="40" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="770" cy="90" r="40" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="780" cy="120" r="40" fill="rgba(100, 0, 155, 0.1)"/>

<circle cx="1000" cy="70" r="40" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="1030" cy="90" r="40" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="1020" cy="120" r="40" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="970" cy="90" r="40" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="980" cy="120" r="40" fill="rgba(255, 0, 0, 0.1)"/>

<circle cx="50" cy="200" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="65" cy="215" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="58" cy="230" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="42" cy="230" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="35" cy="215" r="20" fill="rgba(255, 0, 0, 0.1)"/>

<circle cx="150" cy="200" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="165" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="158" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="142" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="135" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>

<circle cx="250" cy="200" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="265" cy="215" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="258" cy="230" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="242" cy="230" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="235" cy="215" r="20" fill="rgba(0, 0, 255, 0.1)"/>

<circle cx="350" cy="200" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="365" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="358" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="342" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="335" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>

<circle cx="450" cy="200" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="465" cy="215" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="458" cy="230" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="442" cy="230" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="435" cy="215" r="20" fill="rgba(255, 0, 0, 0.1)"/>
  
<circle cx="550" cy="200" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="565" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="558" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="542" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="535" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>

<circle cx="650" cy="200" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="665" cy="215" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="658" cy="230" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="642" cy="230" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="635" cy="215" r="20" fill="rgba(0, 0, 255, 0.1)"/>

<circle cx="750" cy="200" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="765" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="758" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="742" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="735" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>

<circle cx="850" cy="200" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="865" cy="215" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="858" cy="230" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="842" cy="230" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="835" cy="215" r="20" fill="rgba(255, 0, 0, 0.1)"/>
  
  
  
  <circle cx="950" cy="200" r="20" fill="rgba(100, 0, 155, 0.2)"/>
<circle cx="965" cy="215" r="20" fill="rgba(100, 0, 155, 0.2)"/>
<circle cx="958" cy="230" r="20" fill="rgba(100, 0, 155, 0.2)"/>
<circle cx="942" cy="230" r="20" fill="rgba(100, 0, 155, 0.2)"/>
<circle cx="935" cy="215" r="20" fill="rgba(100, 0, 155, 0.2)"/>

<circle cx="1050" cy="200" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="1065" cy="215" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="1058" cy="230" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="1042" cy="230" r="20" fill="rgba(0, 0, 255, 0.1)"/>
<circle cx="1035" cy="215" r="20" fill="rgba(0, 0, 255, 0.1)"/>

<circle cx="1150" cy="200" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="1165" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="1158" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="1142" cy="230" r="20" fill="rgba(100, 0, 155, 0.1)"/>
<circle cx="1135" cy="215" r="20" fill="rgba(100, 0, 155, 0.1)"/>

</svg>
</div>