Subtle gradient strokes

Issue

I'm here today because I have a question on how I can achieve something similar to the subtle gradient effect in the image below. I've looked through their HTML & CSS and I personally can't see how they've done it. I've then tried to search Google but no luck.

Subtle gradient effect

If anyone is able to help me out, that would be amazing!

I've tried to give an SVG of a similar shape a gradient but struggled.

Solution

Pretty same effect by Tim Wilson on this Codepen. It's just a simple looped animation with some nice gradients:

@keyframes jumbo {
from {
    background-position: 50% 50%, 50% 50%;
}
to {
    background-position: 350% 50%, 350% 50%;
}

He cuts off bottom of the gradients with a gradient mask:

 mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);

Don't forget to toggle dark mode ;)

Answered By - mrdarkside