Having issue on Adding Smooth Continuous Animation to Set of SVG Circles

Question

Having issue on Adding Smooth Continuous Animation to Set of SVG Circles

41 Views Asked by Suffii At 05 July 2022 at 18:46

Using Animate.css I am trying to add some fadeIn and fadeOut effect to the svg circles continuously in a way that every time 10 circle should be in the page but as you can see there always white gap between the fadeIn and fadeOut!

Can you please help me to figure out how to fix this and add smooth animation for all circles (10 at each time) to randomly display and fade out in the svg? in Pure JS or CSS way or even using this Animate.css library

  var numbers = [];
setInterval(() => {
for (let i = 0; i < 8; i++) {
  let a = true,
      n;
  while(a) {
    n = Math.floor(Math.random() * 100) + 1;
    a = numbers.includes(n);
  }
  numbers.push(n);
}
  
    for (let i = 0; i < numbers.length; i++) {
$('circle').eq( numbers[i]).removeClass('animate__fadeOut').addClass('animate__fadeIn');
       index = i;
}
  var clear = function(){
        $('circle').removeClass('animate__fadeIn').addClass('animate__fadeOut');
  }
  setTimeout(clear, 2500);
  numbers = [];
  
  }, 4000);

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="576px" height="200px" viewBox="0 0 576 200" enable-background="new 0 0 576 200" xml:space="preserve">
    <circle class="animate__animated animate__fadeOut" cx="541.5" cy="161.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="511.5" cy="161.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="481.5" cy="161.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="451.5" cy="161.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="421.5" cy="161.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="391.5" cy="161.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="361.5" cy="161.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="331.5" cy="161.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="301.5" cy="164.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="271.5" cy="164.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="241.5" cy="159.907" r="2.088"/>
    <circle class="animate__animated animate__fadeOut" cx="211.5" cy="159.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="181.5" cy="159.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="151.5" cy="159.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="121.5" cy="159.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="91.5" cy="159.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="61.5" cy="159.907" r="5"/>
    <circle class="animate__animated animate__fadeOut" cx="31.5" cy="159.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="541.5" cy="141.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="511.5" cy="141.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="451.5" cy="141.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="421.5" cy="141.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="391.5" cy="141.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="331.5" cy="141.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="301.5" cy="144.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="271.5" cy="144.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="241.5" cy="139.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="211.5" cy="139.907" r="7.5"/>
    <circle class="animate__animated animate__fadeOut" cx="181.5" cy="139.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="151.5" cy="139.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="91.5" cy="139.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="61.5" cy="139.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="31.5" cy="139.907" r="6.5"/>
    <circle class="animate__animated animate__fadeOut" cx="541.5" cy="121.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="511.5" cy="121.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="481.5" cy="121.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="451.5" cy="121.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="421.5" cy="121.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="391.5" cy="121.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="361.5" cy="121.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="331.5" cy="121.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="271.5" cy="124.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="241.5" cy="119.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="211.5" cy="119.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="181.5" cy="119.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="151.5" cy="119.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="121.5" cy="119.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="91.5" cy="119.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="61.5" cy="119.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="31.5" cy="119.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="541.5" cy="84.907" r="2.198"/>
    <circle class="animate__animated animate__fadeOut" cx="511.5" cy="84.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="481.5" cy="84.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="451.5" cy="84.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="421.5" cy="84.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="391.5" cy="84.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="361.5" cy="84.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="331.5" cy="84.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="241.5" cy="82.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="211.5" cy="82.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="181.5" cy="82.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="151.5" cy="82.907" r="7"/>
    <circle class="animate__animated animate__fadeOut" cx="121.5" cy="82.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="91.5" cy="82.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="61.5" cy="82.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="31.5" cy="82.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="541.5" cy="64.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="511.5" cy="64.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="479.5" cy="64.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="451.5" cy="64.907" r="9.5"/>
    <circle class="animate__animated animate__fadeOut" cx="423.5" cy="64.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="391.5" cy="64.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="361.5" cy="64.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="301.5" cy="62.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="239.5" cy="62.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="181.5" cy="62.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="151.5" cy="62.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="121.5" cy="62.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="61.5" cy="62.907" r="2.305"/>
    <circle class="animate__animated animate__fadeOut" cx="31.5" cy="62.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="541.5" cy="44.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="511.5" cy="44.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="481.5" cy="44.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="451.5" cy="44.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="421.5" cy="44.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="391.5" cy="44.907" r="3.076"/>
    <circle class="animate__animated animate__fadeOut" cx="361.5" cy="44.907" r="7"/>
    <circle class="animate__animated animate__fadeOut" cx="331.5" cy="44.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="301.5" cy="44.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="241.5" cy="42.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="211.5" cy="42.907" r="7"/>
    <circle class="animate__animated animate__fadeOut" cx="181.5" cy="42.907" r="2.36"/>
    <circle class="animate__animated animate__fadeOut" cx="151.5" cy="42.907" r="5"/>
    <circle class="animate__animated animate__fadeOut" cx="121.5" cy="42.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="91.5" cy="42.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="61.5" cy="42.907" r="7"/>
    <circle class="animate__animated animate__fadeOut" cx="31.5" cy="42.907" r="5.25"/>
    <circle class="animate__animated animate__fadeOut" cx="526.834" cy="161.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="496.834" cy="161.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="466.834" cy="161.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="436.834" cy="161.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="406.834" cy="161.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="376.834" cy="161.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="346.834" cy="161.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="316.834" cy="161.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="286.834" cy="164.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="256.833" cy="164.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="226.833" cy="159.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="196.833" cy="159.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="166.833" cy="159.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="136.833" cy="159.907" r="3.5"/>
    <circle class="animate__animated animate__fadeOut" cx="106.833" cy="159.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="76.833" cy="159.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="46.833" cy="159.907" r="3.5"/>
    <circle class="animate__animated animate__fadeOut" cx="526.834" cy="141.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="466.834" cy="141.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="436.834" cy="141.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="406.834" cy="141.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="346.834" cy="141.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="316.834" cy="141.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="256.833" cy="144.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="226.833" cy="139.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="196.833" cy="139.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="166.833" cy="139.907" r="5.529"/>
    <circle class="animate__animated animate__fadeOut" cx="136.833" cy="139.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="76.833" cy="139.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="46.833" cy="139.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="526.834" cy="121.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="496.834" cy="121.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="466.834" cy="121.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="436.834" cy="121.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="406.834" cy="121.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="376.834" cy="121.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="346.834" cy="121.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="316.834" cy="121.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="226.833" cy="119.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="196.833" cy="119.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="166.833" cy="119.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="136.833" cy="119.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="106.833" cy="119.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="76.833" cy="119.907" r="3.5"/>
    <circle class="animate__animated animate__fadeOut" cx="46.833" cy="119.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="271.5" cy="40.407" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="526.834" cy="84.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="496.834" cy="84.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="466.834" cy="84.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="436.834" cy="84.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="406.834" cy="84.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="376.834" cy="84.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="346.834" cy="84.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="291.334" cy="84.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="226.833" cy="82.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="196.833" cy="82.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="166.833" cy="82.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="136.833" cy="82.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="106.833" cy="82.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="76.833" cy="82.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="46.833" cy="82.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="526.834" cy="64.907" r="3.5"/>
    <circle class="animate__animated animate__fadeOut" cx="496.834" cy="64.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="406.834" cy="64.907" r="3.5"/>
    <circle class="animate__animated animate__fadeOut" cx="376.834" cy="64.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="346.834" cy="64.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="316.834" cy="64.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="286.834" cy="64.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="256.833" cy="64.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="196.833" cy="62.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="166.833" cy="62.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="136.833" cy="62.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="76.833" cy="62.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="46.833" cy="62.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="526.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="496.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="466.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="436.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="406.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="376.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="346.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="316.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="286.834" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="256.833" cy="44.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="226.833" cy="42.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="196.833" cy="42.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="166.833" cy="42.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="136.833" cy="42.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="106.833" cy="42.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="76.833" cy="42.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="46.833" cy="42.907" r="4.5"/>
    <circle class="animate__animated animate__fadeOut" cx="111.333" cy="140.408" r="9.5"/>
    <circle class="animate__animated animate__fadeOut" cx="96.75" cy="62.907" r="11.068"/>
    <circle class="animate__animated animate__fadeOut" cx="366.75" cy="141.907" r="11.068"/>
    <circle class="animate__animated animate__fadeOut" cx="216.75" cy="62.907" r="6.575"/>
    <circle class="animate__animated animate__fadeOut" cx="489.408" cy="141.907" r="9.908"/>
    <circle class="animate__animated animate__fadeOut" cx="331.5" cy="64.907" r="7"/>
    </svg>

Original Q&A

Having issue on Adding Smooth Continuous Animation to Set of SVG Circles

There are 0 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in ANIMATE.CSS

Trending Questions

Popular # Hahtags

Popular Questions