Cool svg animation insight.

Hello dear front-end engineers, Can you give me some insight on how this cool effect is implemented in nextjs.org.

7 Replies

erik.gh•11mo ago

probably a gif/video have you tried to inspect it? it's an svg with animated linear gradients

yes it is an svg with animated gradients. The gradient part is pretty straightforward. I am curious about how do I animate the gradient.

erik.gh•11mo ago

i think they alter the coordinates using requestAnimationFrame

erik.gh•11mo ago

i dragged it into figma

sumatoken•11mo ago

I've managed to do a simple animation that kinda resembles to this with an svg element and Vanilla js

  <svg>
.....
          <defs>
            <linearGradient
              id="linear-control"
              x1="0"
              y1="-5.21693"
              x2="8.29046"
              y2="90.9949"
              gradientUnits="userSpaceOnUse"
            >
              <stop offset="0.03125" stop-color="#525252" />
              <stop offset="0.479167" stop-color="#DA2F0A" />
              <stop offset="0.887721" stop-color="#1C4ECE" />
            </linearGradient>
          </defs>
        </svg>

  <svg>
.....
          <defs>
            <linearGradient
              id="linear-control"
              x1="0"
              y1="-5.21693"
              x2="8.29046"
              y2="90.9949"
              gradientUnits="userSpaceOnUse"
            >
              <stop offset="0.03125" stop-color="#525252" />
              <stop offset="0.479167" stop-color="#DA2F0A" />
              <stop offset="0.887721" stop-color="#1C4ECE" />
            </linearGradient>
          </defs>
        </svg>

I control the x1 attribute in linearGradient using setTimeout:

const linearControl = document.getElementById("linear-control");
let index = 0;
const increment = 10;
const delay = 100;
let direction = 1;

function animate() {
  if (index > 200) {
    direction = -1;
  } else if (index < 0) {
    direction = 1;
  }

  index += direction * increment;
  linearControl.setAttribute("x1", index);

  setTimeout(animate, delay);
}

animate();

const linearControl = document.getElementById("linear-control");
let index = 0;
const increment = 10;
const delay = 100;
let direction = 1;

function animate() {
  if (index > 200) {
    direction = -1;
  } else if (index < 0) {
    direction = 1;
  }

  index += direction * increment;
  linearControl.setAttribute("x1", index);

  setTimeout(animate, delay);
}

animate();

erik.gh•11mo ago

nice but i highly recommend using requestAnimationFrame for animations

sumatoken•11mo ago

Thanks!! I'll check it out

Gaming

Programming

Cool svg animation insight.