JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="1522.057" height="772.608" viewBox="0 0 1522.057 772.608">
  <g id="Group_1158" data-name="Group 1158" transform="translate(-198.989 -5405.986)">
    <g id="georgia" transform="translate(200.748 5407.748)">
      <path id="GE-AB"...

CSS

svg {
    width: 100%;
    height: auto;
}
circle.map-circle {
    animation: mapCircle linear 1s both infinite;
}
circle.map-circle:nth-child(1){
    animation-delay: 0.1s;
}
circle.map-circle:nth-child(2){
    animation-delay: 0.2s;
}
circle.map-circle:nth-child(3){
    animation-delay: 0.3s;
}
circle.map-circle:nth-child(4){
    animation-delay: 0.4s;
}
circle.map-circle:nth-child(5){
    animation-delay: 0.5s;
}
circle.map-circle:nth-child(6){
    animation-delay: 0.6s;
}
circle.map-circle:nth-child(7){
    animation-delay: 0.7s;
}
circle.map-circle:nth-child(8){
    animation-delay: 0.8s;
}
@keyframes mapCircle {
    from {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}