Zooming Radial Stripes

programming web dev
1

I was kicking the tires with creating one of those effects where radial stripes keep zooming in at you. You can see the video of this working at the following link: https://twitter.com/kirupa/status/1013302895385575426

It turns out to be a lot more complicated than I thought, for there isn’t a way to do this in CSS. You have to use JavaScript. The full code is below:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>Zooming Radial Stripes</title>
  <style>
    body {
      padding: 25px;
    }

    #outerContainer {
      display: grid;
      grid-template-columns: 200px 200px;
      grid-gap: 40px;
    }

    .container {
      width: 300px;
      height: 300px;
      background-color: #3891A6;
      transform: translateZ(0);
      border-radius: 50%;
      border: #A93F55 solid 10px;
    }

    .radialStripes {
      background-image: radial-gradient(circle,
      var(--color1) 0px,
      var(--color1) calc(var(--offset) + 0px),
      var(--color2) calc(var(--offset) + 0px),
      var(--color2) calc(var(--offset) + 20px),
      var(--color1) calc(var(--offset) + 20px),
      var(--color1) calc(var(--offset) + 40px),
      var(--color2) calc(var(--offset) + 40px),
      var(--color2) calc(var(--offset) + 60px),
      var(--color1) calc(var(--offset) + 60px),
      var(--color1) calc(var(--offset) + 80px),
      var(--color2) calc(var(--offset) + 80px),
      var(--color2) calc(var(--offset) + 100px),
      var(--color1) calc(var(--offset) + 100px),
      var(--color1) calc(var(--offset) + 120px),
      var(--color2) calc(var(--offset) + 120px),
      var(--color2) calc(var(--offset) + 140px),
      var(--color1) calc(var(--offset) + 140px),
      var(--color1) calc(var(--offset) + 160px),
      var(--color2) calc(var(--offset) + 160px),
      var(--color2) calc(var(--offset) + 180px),
      var(--color1) calc(var(--offset) + 180px),
      var(--color1) calc(var(--offset) + 200px),
      var(--color2) calc(var(--offset) + 200px),
      var(--color2) calc(var(--offset) + 220px));
    }
  </style>
</head>

<body>

  <div id="outerContainer">
    <div class="container radialStripes"></div>
  </div>

  <script>
    var container = document.querySelector(".container");

    var color1 = "#F2545B";
    var color2 = "#F3F7F0";
    var tempColor;

    var offset = 0;

    container.style.setProperty("--color1", color1);
    container.style.setProperty("--color2", color2);

    function swapColors() {
      tempColor = color2;

      color2 = color1;
      color1 = tempColor;

      container.style.setProperty("--color1", color1);
      container.style.setProperty("--color2", color2);
    }

    function setOffset(value) {
      container.style.setProperty("--offset", value + "px");
    }

    var framesPerSecond = 5;

    function animate() {
      setOffset(offset);
      offset++;

      if (offset > 20) {
        offset = 0;
        setOffset(offset);

        swapColors();
      }

      requestAnimationFrame(animate);
    }
    animate();


  </script>

</body>

</html>

I probably will write a tutorial on this in the future. Hope you all like it :slight_smile:

Cheers,
Kirupa