Zooming Radial Stripes


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>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>Zooming Radial Stripes</title>
    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));


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

    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() {

      if (offset > 20) {
        offset = 0;






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