JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <svg>
        <circle cx="3%" cy="10%" r="2%" />
        <line x1="7%" y1="15%" x2="20%" y2="25%" />
        <circle cx="25%" cy="28%" r="2%" />
        <line x1="30%" y1="33%" x2="45%" y2="40%" />
        <circle cx="50%" cy="45%" r="2%" />
        <line x1="55%" y1="50%" x2="70%" y2="60%" />
        <circle cx="75%" cy="65%" r="2%" />
        <line x1="80%" y1="70%" x2="92%" y2="85%" />
        <circle cx="97%" cy="90%" r="2%" />
    </svg>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
html, body {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #1f1a5c 0%, #c36543 100%);
    display: block;
}
body > div {
    width: 100%;
    height: 10em;
}
body > div > svg {
    width: 100%;
    height: 100%;
}
svg line {
    stroke: white;
    stroke-width: 5;
}
@-webkit-keyframes circle {
    from {
        fill: white;
    }
    to {
        fill: red;
    }
}
svg circle {
    fill: white;
    -webkit-animation: circle 1s;
    animation: circle 1s;
}
svg circle:nth-child(3) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
svg circle:nth-child(5) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
svg circle:nth-child(7) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}
svg circle:nth-child(9) {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
svg circle:nth-child(11) {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}