JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g class="na">
    <circle cx="35%" cy="2.85%" r="2.8" />
    <circle cx="36.75%" cy="2.85%" r="2.8" />
    <circle cx="38.5%" cy="2.85%" r="2.8" />
    <circle cx="33.25%" cy="5.7%" r="2.8" />
    <circle cx="35%" cy="5.7%" r="2.8" />
    <circle cx="36.75%" cy="5.7%" r="2.8" />
    <circle cx="38.5%" cy="5.7%" r="2.8" />
    <circle cx="40.25%" cy="5.7%" r="2.8" />
    <circle cx="31.5%" cy="8.55%" r="2.8" />
    <circle cx="33.25%" cy="8.55%" r="2.8" />
    <circle cx="35%" cy="8.55%" r="2.8" />
    <circle cx="36.75%" cy="8.55%" r="2.8" />
    <circle cx="38.5%" cy="8.55%" r="2.8" />
    <circle cx="40.25%" cy="8.55%" r="2.8" />
  </g>
    
  <g class="as">
    <circle cx="70%" cy="17.1%" r="2.8" />
    <circle cx="71.75%" cy="17.1%" r="2.8" />
    <circle cx="73.5%" cy="17.1%" r="2.8" />
    <circle cx="75.25%" cy="17.1%" r="2.8" />
    <circle cx="77%" cy="17.1%" r="2.8" />
    <circle cx="78.75%" cy="17.1%" r="2.8" />
    <circle cx="80.5%" cy="17.1%" r="2.8" />
    <circle cx="82.25%" cy="17.1%" r="2.8" />
    <circle cx="84%" cy="17.1%" r="2.8" />
    <circle cx="85.75%" cy="17.1%" r="2.8" />
    <circle cx="75.25%" cy="14.25%" r="2.8" />
    <circle cx="77%" cy="14.25%" r="2.8" />
    <circle cx="78.75%" cy="14.25%" r="2.8" />
    <circle cx="80.5%" cy="14.25%" r="2.8" />
    <circle cx="70%" cy="19.95%" r="2.8" />
    <circle cx="71.75%" cy="19.95%" r="2.8" />
    <circle cx="73.5%" cy="19.95%" r="2.8" />
    <circle cx="75.25%" cy="19.95%" r="2.8" />
    <circle cx="77%" cy="19.95%" r="2.8" />
    <circle cx="78.75%" cy="19.95%" r="2.8" />
    <circle cx="80.5%" cy="19.95%" r="2.8" />
    <circle cx="82.25%" cy="19.95%" r="2.8" />
    <circle cx="84%" cy="19.95%" r="2.8" />
    <circle cx="85.75%" cy="19.95%" r="2.8" />
    <circle cx="87.5%" cy="19.95%" r="2.8" />
    <circle cx="89.25%" cy="19.95%" r="2.8" />
    <circle cx="91%" cy="19.95%" r="2.8" />
    <circle cx="92.75%" cy="19.95%"...

CSS

svg {
	height: 220px;
	width: 400px;
	background: grey;
}

.na circle,
.as circle {
    fill: white;
    stroke-width: 4px;
    stroke: transparent;
}

.na:hover circle {
    fill: blue;
}

.as:hover circle {
    fill: red;
}