Outwardly Emanating Circles

programming web dev
1

Hi everybody! Another animation I had been fiddling with is the following:

The full code is:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outwardly Emanating Circles</title>

  <style>
    body {
      margin: 0;
      padding: 0;

      width: 100vw;
      height: 100vh;

      display: grid;
      place-items: center;
    }

    .container {
      width: 400px;
      height: 400px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background-color: #FFF;
      border: 4px solid #EEE;
      border-radius: 10px;
    }

    .main {
      display: grid;
      place-items: center;
      position: relative;
    }

    .particle {
      width: 10px;
      height: 10px;

      background-color: #76bfff;
      border-radius: 50%;
      opacity: 0;
      scale: 1;
      position: absolute;
      will-change: transform;
      transform-origin: -50% -50%;

      animation-name: emanate;
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation-iteration-count: infinite;
    }

    .particleContainer {
      position: absolute;
    }

    @keyframes emanate {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        translate: 10px 0px;
        opacity: 0;
        scale: 2;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">

    </div>
  </div>

  <template id="particlesTemplate">
    <div class="particleContainer">
      <div class="particle"></div>
    </div>
  </template>

  <script>


    let main = document.querySelector(".main");
    let container = document.querySelector(".container");
    let width = container.offsetWidth;
    let height = container.offsetHeight;

    let totalElements = 300;
    let elementCount = 0;

    let elements = [];

    function drawElements() {
      let template = document.querySelector("#particlesTemplate").content;

      for (let i = 0; i < totalElements; i++) {

        let particle = template.querySelector(".particle");
        let particleContainer = template.querySelector(".particleContainer");

        setItemProperties(particleContainer);

        elementCount++;

        let newElement = main.appendChild(document.importNode(template, true));
      }
    }

    drawElements();

    function setItemProperties(item) {

      let duration = 1 + Math.random() * 2;
      let particleSize = 2 + Math.random() * 5 + "px";

      let particleItem = item.querySelector(".particle");

      particleItem.style.opacity = 0;
      particleItem.style.width = particleSize;
      particleItem.style.height = particleSize;

      let randomX = -1 * width + Math.random() * width;
      let randomY = -1 * height + Math.random() * height;

      particleItem.style.animationDelay = -1 * (Math.random() * duration) + "s";

      let degrees = (360 / totalElements) * elementCount;
      let radians = (Math.PI / 180) * degrees;

      item.style.rotate = degrees + "deg";
      item.style.translate = `${100 * Math.cos(radians)}px ${100 * Math.sin(radians)}px`;

      let l = 30 + Math.random() * 70;
      let c = 30 + Math.random() * 70;

      particleItem.style.backgroundColor = `lch(${l}% ${c}% ${degrees}deg / .5)`;

      particleItem.style.animationDuration = duration + "s";
    }
  </script>
</body>

</html>

Hope you all enjoy it :slight_smile:

Cheers,
Kirupa

1 Like