JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<circle cx="18.89" cy="432.28" r="6"/>
          <circle cx="20.02" cy="383.87" r="6"/>
          <circle cx="20.85" cy="371.28" r="6"/>
          <circle cx="18.89" cy="298.46" r="6"/>
          <circle cx="19.2" cy="285.98" r="6"/>
          <circle cx="19.2" cy="249.28" r="6"/>
          <circle cx="23.94" cy="390.53" r="6"/>
          <circle cx="26.02" cy="395.87" r="6"/>
          <circle cx="23.94" cy="401.21" r="6"/>
          <circle cx="25.6" cy="407.87" r="6"/>
          <circle cx="30.59" cy="414.08" r="6"/>
          <circle cx="32.85" cy="395.87" r="6"/>
          <circle cx="43.96" cy="371.28" r="6"/>
          <circle cx="40.51" cy="359.58" r="6"/>
          <circle cx="43.19" cy="347.22" r="6"/>
          <circle cx="42.18" cy="334.51" r="6"/>
          <circle cx="61.78" cy="395.87" r="6"/>
          <circle cx="59.05" cy="359.58" r="6"/>
          <circle cx="58.16" cy="310.28" r="6"/>
          <circle cx="64.16" cy="420.08" r="6"/>
          <circle cx="76.63" cy="401.87" r="6"/>
          <circle cx="66.77" cy="371.66" r="6"/>
          <circle cx="69.74" cy="328.51" r="6"/>
          <circle cx="66.89" cy="261.86" r="6"/>
          <circle cx="85.34" cy="371.66" r="6"/>
          <circle cx="86.5" cy="358.74" r="6"/>
          <circle cx="78.33" cy="323.72" r="6"/>
          <circle cx="84.33" cy="286.56" r="6"/>
          <circle cx="79.96" cy="261.86" r="6"/>
          <circle cx="90.92" cy="249.28" r="6"/>
          <circle cx="104.29" cy="395.21" r="6"/>
          <circle cx="104.29" cy="311.72" r="6"/>
          <circle cx="111.92" cy="157.78" r="6"/>
          <circle cx="122.67" cy="322.51" r="6"/>
          <circle cx="150.95" cy="371.66" r="6"/>
          <circle cx="152.99" cy="358.74" r="6"/>
          <circle cx="146.94" cy="322.51" r="6"/>
          <circle cx="160.31" cy="368.28" r="6"/>
          <circle cx="168.86" cy="371.66" r="6"/>
          <circle cx="187.75" cy="395.78" r="6"/>
          <circle cx="191.94" cy="384.73"...

SCSS

@function decimal-round ($number, $digits: 0, $mode: round) {
    $n: 1;
    // $number must be a number
    @if type-of($number) != number {
        @warn '#{ $number } is not a number.';
        @return $number;
    }
    // $digits must be a unitless number
    @if type-of($digits) != number {
        @warn '#{ $digits } is not a number.';
        @return $number;
    } @else if not unitless($digits) {
        @warn '#{ $digits } has a unit.';
        @return $number;
    }
    @for $i from 1 through $digits {
        $n: $n * 10;
    }
    @if $mode == round {
        @return round($number * $n) / $n;
    } @else if $mode == ceil {
        @return ceil($number * $n) / $n;
    } @else if $mode == floor {
        @return floor($number * $n) / $n;
    } @else {
        @warn '#{ $mode } is undefined keyword.';
        @return $number;
    }
}

$min: 1;
$max: 86;


@for $i from $min through $max {
    
    $delay: 0.3 + ($i / 2) * (3 / $max);
    $d: decimal-round($delay, 2);
    #sct .dts circle:nth-child(#{$i}) { animation-delay: $d s;}
  
  
}