<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 600">
  <defs/>
  <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="276.789" y1="60.706" x2="276.789" y2="120.706">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".394" stop-color="#de1f26"/>
  </linearGradient>
  <circle class="red" cx="276.8" cy="90.7" r="30" fill="url(#a)" stroke="#e31e26" stroke-miterlimit="10"/>
  <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="684.053" y1="60.706" x2="684.053" y2="120.706">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".33" stop-color="#a0499c"/>
  </linearGradient>
  <circle class="purple" cx="684.1" cy="90.7" r="30" fill="url(#b)" stroke="#a0499c" stroke-miterlimit="10"/>
  <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="787.119" y1="60.706" x2="787.119" y2="120.706">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".424" stop-color="#ee265f"/>
  </linearGradient>
  <circle class="pink" cx="787.1" cy="90.7" r="30" fill="url(#c)" stroke="#d71c57" stroke-miterlimit="10"/>
  <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="582.987" y1="60.706" x2="582.987" y2="120.706">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".409" stop-color="#85c441"/>
  </linearGradient>
  <circle class="green" cx="583" cy="90.7" r="30" fill="url(#d)" stroke="#85c441" stroke-miterlimit="10"/>
  <linearGradient id="e" gradientUnits="userSpaceOnUse" x1="378.855" y1="60.706" x2="378.855" y2="120.706">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="348.355" y1="90.706" x2="409.355" y2="90.706">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <circle class="blue" cx="378.9" cy="90.7" r="30" fill="url(#e)" stroke="url(#f)" stroke-miterlimit="10"/>
  <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="480.921" y1="60.706" x2="480.921" y2="120.706">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".443" stop-color="#f7cb18"/>
  </linearGradient>
  <circle class="yellow" cx="480.9" cy="90.7" r="30" fill="url(#g)" stroke="#f7cb18" stroke-miterlimit="10"/>
  <linearGradient id="h" gradientUnits="userSpaceOnUse" x1="276.789" y1="134.214" x2="276.789" y2="194.214">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".394" stop-color="#de1f26"/>
  </linearGradient>
  <circle class="red" cx="276.8" cy="164.2" r="30" fill="url(#h)" stroke="#e31e26" stroke-miterlimit="10"/>
  <linearGradient id="i" gradientUnits="userSpaceOnUse" x1="684.053" y1="134.214" x2="684.053" y2="194.214">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".33" stop-color="#a0499c"/>
  </linearGradient>
  <circle class="purple" cx="684.1" cy="164.2" r="30" fill="url(#i)" stroke="#a0499c" stroke-miterlimit="10"/>
  <linearGradient id="j" gradientUnits="userSpaceOnUse" x1="787.119" y1="134.214" x2="787.119" y2="194.214">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".424" stop-color="#ee265f"/>
  </linearGradient>
  <circle class="pink" cx="787.1" cy="164.2" r="30" fill="url(#j)" stroke="#d71c57" stroke-miterlimit="10"/>
  <linearGradient id="k" gradientUnits="userSpaceOnUse" x1="582.987" y1="134.214" x2="582.987" y2="194.214">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".409" stop-color="#85c441"/>
  </linearGradient>
  <circle class="green" cx="583" cy="164.2" r="30" fill="url(#k)" stroke="#85c441" stroke-miterlimit="10"/>
  <linearGradient id="l" gradientUnits="userSpaceOnUse" x1="378.855" y1="134.214" x2="378.855" y2="194.214">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <linearGradient id="m" gradientUnits="userSpaceOnUse" x1="348.355" y1="164.214" x2="409.355" y2="164.214">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <circle class="blue" cx="378.9" cy="164.2" r="30" fill="url(#l)" stroke="url(#m)" stroke-miterlimit="10"/>
  <linearGradient id="n" gradientUnits="userSpaceOnUse" x1="480.921" y1="134.214" x2="480.921" y2="194.214">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".443" stop-color="#f7cb18"/>
  </linearGradient>
  <circle class="yellow" cx="480.9" cy="164.2" r="30" fill="url(#n)" stroke="#f7cb18" stroke-miterlimit="10"/>
  <linearGradient id="o" gradientUnits="userSpaceOnUse" x1="276.789" y1="207.722" x2="276.789" y2="267.722">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".394" stop-color="#de1f26"/>
  </linearGradient>
  <circle class="red" cx="276.8" cy="237.7" r="30" fill="url(#o)" stroke="#e31e26" stroke-miterlimit="10"/>
  <linearGradient id="p" gradientUnits="userSpaceOnUse" x1="684.053" y1="207.722" x2="684.053" y2="267.722">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".33" stop-color="#a0499c"/>
  </linearGradient>
  <circle class="purple" cx="684.1" cy="237.7" r="30" fill="url(#p)" stroke="#a0499c" stroke-miterlimit="10"/>
  <linearGradient id="q" gradientUnits="userSpaceOnUse" x1="787.119" y1="207.722" x2="787.119" y2="267.722">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".424" stop-color="#ee265f"/>
  </linearGradient>
  <circle class="pink" cx="787.1" cy="237.7" r="30" fill="url(#q)" stroke="#d71c57" stroke-miterlimit="10"/>
  <linearGradient id="r" gradientUnits="userSpaceOnUse" x1="582.987" y1="207.722" x2="582.987" y2="267.722">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".409" stop-color="#85c441"/>
  </linearGradient>
  <circle class="green" cx="583" cy="237.7" r="30" fill="url(#r)" stroke="#85c441" stroke-miterlimit="10"/>
  <linearGradient id="s" gradientUnits="userSpaceOnUse" x1="378.855" y1="207.722" x2="378.855" y2="267.722">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <linearGradient id="t" gradientUnits="userSpaceOnUse" x1="348.355" y1="237.722" x2="409.355" y2="237.722">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <circle class="blue" cx="378.9" cy="237.7" r="30" fill="url(#s)" stroke="url(#t)" stroke-miterlimit="10"/>
  <linearGradient id="u" gradientUnits="userSpaceOnUse" x1="480.921" y1="207.722" x2="480.921" y2="267.722">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".443" stop-color="#f7cb18"/>
  </linearGradient>
  <circle class="yellow" cx="480.9" cy="237.7" r="30" fill="url(#u)" stroke="#f7cb18" stroke-miterlimit="10"/>
  <linearGradient id="v" gradientUnits="userSpaceOnUse" x1="276.789" y1="281.23" x2="276.789" y2="341.23">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".394" stop-color="#de1f26"/>
  </linearGradient>
  <circle class="red" cx="276.8" cy="311.2" r="30" fill="url(#v)" stroke="#e31e26" stroke-miterlimit="10"/>
  <linearGradient id="w" gradientUnits="userSpaceOnUse" x1="684.053" y1="281.23" x2="684.053" y2="341.23">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".33" stop-color="#a0499c"/>
  </linearGradient>
  <circle class="purple" cx="684.1" cy="311.2" r="30" fill="url(#w)" stroke="#a0499c" stroke-miterlimit="10"/>
  <linearGradient id="x" gradientUnits="userSpaceOnUse" x1="787.119" y1="281.23" x2="787.119" y2="341.23">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".424" stop-color="#ee265f"/>
  </linearGradient>
  <circle class="pink" cx="787.1" cy="311.2" r="30" fill="url(#x)" stroke="#d71c57" stroke-miterlimit="10"/>
  <linearGradient id="y" gradientUnits="userSpaceOnUse" x1="582.987" y1="281.23" x2="582.987" y2="341.23">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".409" stop-color="#85c441"/>
  </linearGradient>
  <circle class="green" cx="583" cy="311.2" r="30" fill="url(#y)" stroke="#85c441" stroke-miterlimit="10"/>
  <linearGradient id="z" gradientUnits="userSpaceOnUse" x1="378.855" y1="281.23" x2="378.855" y2="341.23">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <linearGradient id="A" gradientUnits="userSpaceOnUse" x1="348.355" y1="311.23" x2="409.355" y2="311.23">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <circle class="blue" cx="378.9" cy="311.2" r="30" fill="url(#z)" stroke="url(#A)" stroke-miterlimit="10"/>
  <linearGradient id="B" gradientUnits="userSpaceOnUse" x1="480.921" y1="281.23" x2="480.921" y2="341.23">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".443" stop-color="#f7cb18"/>
  </linearGradient>
  <circle class="yellow" cx="480.9" cy="311.2" r="30" fill="url(#B)" stroke="#f7cb18" stroke-miterlimit="10"/>
  <linearGradient id="C" gradientUnits="userSpaceOnUse" x1="276.789" y1="354.738" x2="276.789" y2="414.738">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".394" stop-color="#de1f26"/>
  </linearGradient>
  <circle class="red" cx="276.8" cy="384.7" r="30" fill="url(#C)" stroke="#e31e26" stroke-miterlimit="10"/>
  <linearGradient id="D" gradientUnits="userSpaceOnUse" x1="684.053" y1="354.738" x2="684.053" y2="414.738">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".33" stop-color="#a0499c"/>
  </linearGradient>
  <circle class="purple" cx="684.1" cy="384.7" r="30" fill="url(#D)" stroke="#a0499c" stroke-miterlimit="10"/>
  <linearGradient id="E" gradientUnits="userSpaceOnUse" x1="787.119" y1="354.738" x2="787.119" y2="414.738">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".424" stop-color="#ee265f"/>
  </linearGradient>
  <circle class="pink" cx="787.1" cy="384.7" r="30" fill="url(#E)" stroke="#d71c57" stroke-miterlimit="10"/>
  <linearGradient id="F" gradientUnits="userSpaceOnUse" x1="582.987" y1="354.738" x2="582.987" y2="414.738">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".409" stop-color="#85c441"/>
  </linearGradient>
  <circle class="green" cx="583" cy="384.7" r="30" fill="url(#F)" stroke="#85c441" stroke-miterlimit="10"/>
  <linearGradient id="G" gradientUnits="userSpaceOnUse" x1="378.855" y1="354.738" x2="378.855" y2="414.738">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <linearGradient id="H" gradientUnits="userSpaceOnUse" x1="348.355" y1="384.738" x2="409.355" y2="384.738">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <circle class="blue" cx="378.9" cy="384.7" r="30" fill="url(#G)" stroke="url(#H)" stroke-miterlimit="10"/>
  <linearGradient id="I" gradientUnits="userSpaceOnUse" x1="480.921" y1="354.738" x2="480.921" y2="414.738">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".443" stop-color="#f7cb18"/>
  </linearGradient>
  <circle class="yellow" cx="480.9" cy="384.7" r="30" fill="url(#I)" stroke="#f7cb18" stroke-miterlimit="10"/>
  <linearGradient id="J" gradientUnits="userSpaceOnUse" x1="276.789" y1="428.246" x2="276.789" y2="488.246">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".394" stop-color="#de1f26"/>
  </linearGradient>
  <circle class="red" cx="276.8" cy="458.2" r="30" fill="url(#J)" stroke="#e31e26" stroke-miterlimit="10"/>
  <linearGradient id="K" gradientUnits="userSpaceOnUse" x1="684.053" y1="428.246" x2="684.053" y2="488.246">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".33" stop-color="#a0499c"/>
  </linearGradient>
  <circle class="purple" cx="684.1" cy="458.2" r="30" fill="url(#K)" stroke="#a0499c" stroke-miterlimit="10"/>
  <linearGradient id="L" gradientUnits="userSpaceOnUse" x1="787.119" y1="428.246" x2="787.119" y2="488.246">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".424" stop-color="#ee265f"/>
  </linearGradient>
  <circle class="pink" cx="787.1" cy="458.2" r="30" fill="url(#L)" stroke="#d71c57" stroke-miterlimit="10"/>
  <linearGradient id="M" gradientUnits="userSpaceOnUse" x1="582.987" y1="428.246" x2="582.987" y2="488.246">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".409" stop-color="#85c441"/>
  </linearGradient>
  <circle class="green" cx="583" cy="458.2" r="30" fill="url(#M)" stroke="#85c441" stroke-miterlimit="10"/>
  <linearGradient id="N" gradientUnits="userSpaceOnUse" x1="378.855" y1="428.246" x2="378.855" y2="488.246">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <linearGradient id="O" gradientUnits="userSpaceOnUse" x1="348.355" y1="458.246" x2="409.355" y2="458.246">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".429" stop-color="#4d4fa1"/>
    <stop offset=".828" stop-color="#4d4fa1"/>
  </linearGradient>
  <circle class="blue" cx="378.9" cy="458.2" r="30" fill="url(#N)" stroke="url(#O)" stroke-miterlimit="10"/>
  <linearGradient id="P" gradientUnits="userSpaceOnUse" x1="480.921" y1="428.246" x2="480.921" y2="488.246">
    <stop offset="0" stop-color="#fff"/>
    <stop offset=".443" stop-color="#f7cb18"/>
  </linearGradient>
  <circle class="yellow" cx="480.9" cy="458.2" r="30" fill="url(#P)" stroke="#f7cb18" stroke-miterlimit="10"/>
</svg>

html, body{
  width: 100%;
  height: 100vh;
  margin: 0;
  margin-left: 1%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: start;
  overflow: hidden;
}

// random number helper function
const random = (min, max) => {
    return Math.floor(Math.random() * ( max - min ) + min);
};

// classes for balls
const balls = ['.red', '.yellow', '.pink', '.purple', '.blue', '.green']

// for each color ball
balls.forEach( (color) => {
    let x = random(-200, 200);
    let y = -random(0, 200);
    gsap.fromTo(color, {
        y: y,
        x: x,
        visibility: 'visible',
    }, {
        y: 0,
        x: 0,
        ease: Bounce.easeOut,
        duration: 1.5,
        opacity: 1,
        stagger: 0.1,
    });
})