RSS FeedTwitterMastodonShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
Text emphasized alt text example
A series of images of an avatar doing a bunch of skateboard tricks.

Make some hacky noise with CSS gradients

4 min read
css

Here's an effect I stumbled on and thought was kinda cool. I found it by animating the size of the ring in a repeating radial gradient to 0px with @property, really slowly, and notice that when it got near 0, it started to freak out.

Then I started to wonder.

The Setup #

Here's the mask I was working with at first, a nice reasonale 5px and 5px gap radial repeating mask:

.noise {
  --lines: 4px;
  
  mask: repeating-radial-gradient(
    circle at center,
    #000,
    var(--lines),
    #000,
    0, /* transition hints make code easier to manage */
    #0000,
    calc(var(--lines) * 2),
    #0000 0 /* trailing 0 is part of the hard stop logic */
  );
}

Still a pretty sweet effect over some text I think!

The Trick #

BUT, when you change that --lines value to something super small, it starts to distort and go into subpixel rounding stuff?

.noise {
  --lines: 0.0003px;
}

And boom, noise. At certain times it looks like radial noise too. Trails of its origins.

Animating it #

I already knew that @property could animate the noise because of how I stumbled upon the effect. What I didn't know yet, was what were the fun knobs I could turn?!

Kick off the gradient animation fun with an @property:

@property --lines {
  syntax: "<length>";
  inherits: false;
  initial-value: 0.00010px;
}

And some keyframes, subtly animating from one tiny little subpixel value to another.

@keyframes liner {
  50% {
    --lines: 0.00012px;
  }
}

Link these things up for animation on our element:

@import "https://unpkg.com/open-props/durations.min.css";

.noise {
  animation: liner var(--hour) linear infinite;
}

and watch the noise!

Also, observe the absolute chaos while the power of CSS handles it like a 60fps game engine.

Outro #

The levers / what you should toy with:

  1. the delta in values
  2. values themselves
  3. duration

Even try adding reasonable values, like 10px lines with a reasonable duration like .5s or var(--atom).

Mentions #

Join the conversation on

27 likes
8 reposts
  • Brett Peary
  • GENKI
  • Tamas
  • Phil Picton ????
  • Aleš Roubíček
  • Fil Duarte
  • Jack Iakovenko
  • Tyler Sticka

@argyleink Great post! Also had to look into how you made the pretty headlines of your posts and noticed that `background-clip: text` can now be used everywhere, and even unprefixed since Chrome 120 – so one thing led to another and I filed an issue to update the browser compat data ???? https://github.com/mdn/browser-compat-data/pull/21968

`background-clip: text` supported in Chrome 120 by voxpelli · Pull Request #21968 · mdn/browser-compat-data
Pelle WessmanPelle Wessman

@argyleink Oh that reminds me of @css's article: https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/

You could do some cool risograph effect with these by replacing the mask with a noise gradient on top of a standard one — results depend on the colour of course. ????

https://codepen.io/chriskirknielsen/pen/JjzJqmp

Making Static Noise From a Weird CSS Gradient Bug | CSS-Tricks
Christopher Kirk-NielsenChristopher Kirk-Nielsen


I’m going to do an SVG factor right here, as a result of I in finding that era constantly fascinating. It’s a bit of of a superpower for front-end builders who know the way it really works and will leverage it when had to pull of fascinating results. For instance, this compelling line drawing scroll impact is powered through SVG options.

There were some truly cool SVG gear I’ve most effective simply noticed lately, and a few nice writing about SVG tactics. Warms my little center to look SVG nonetheless being actively explored even because it sits slightly dormant from a requirements viewpoint.

Let’s get started with some gear and assets, since the ones are simple to digest and for those who truly love considered one of them you’ll be all like thank you CodePen Spark, you’re a just right e-newsletter and ya know that’s what we’re in it for.

Tech Icons

SVG icons have a tendency to be single-color as a development, however exact trademarks generally tend to contain logo colours and will regularly be multi-color. I love the way it’s tremendous simple to make use of, providing each downloads and fast copy-and-paste.

Durves

I will be able to’t provide an explanation for it however now and again you want an SVG of a grid of dots which are waving. This lets you keep an eye on the entire sides of that. Has some tearable fabric vibes.

svghub

Squiggles, scribbles, shapes and… different stuff.

I really like this as a result of they’re the type of issues that are ideal for vector artwork, however that you just don’t most often in finding in such things as icon units. One click on to replicate proper to clipboard or obtain.

SVGMix

Giant one! 193 Icon collections. I do like that they’re grouped in collections, so in case you want a number of property, there’s a just right likelihood they’ll cross in combination aesthetically. I’m a large Noun Undertaking man, however in finding it isn’t fairly as smartly arranged into collections.

OK I assume we’d higher transfer on to a few tactics and explanations.

SVG Gradients: Fixing Curved Demanding situations

How do you get a colour gradient to apply the trail of SVG art work? Michael Sydney Moore solved it through breaking apart the artwork into smaller sections and making use of gradients to each and every phase.

This is an engaging distinction to any other method that Ksenia Kondrashova explains.

SVG viewBox

The viewBox on SVG is lovely easy truly: it units up the visual coordinate gadget the place the entirety else is drawn. Apparently, you’ll alternate it at any time, and it successfully acts as a digicam, particularly for those who animate it.

Brad Woods has in all probability the most productive clarification of it I’ve ever noticed, by the use of an interactive put up.

Making noisy SVGs

Seems <feTurbulence> is as much as the process of constructing a noise impact in SVG, however there is a bit more to it to make it great, as Daniel Immke writes up:

To create noise, I used the <feTurbulence> clear out which is explicitly for producing synthetic textures however required fairly a bit of of fiddling to get to my liking. Then, I had to make use of different clear out results to do away with coloration variance and mix naturally with the fill coloration decided on, and in spite of everything observe the clear out to the circle.

Noise now and again seems like the easiest strategy to calm down the mathematical sharpness of vector artwork.

Additionally — do you know there’s a bizarre trick to make noise with CSS gradients?

Responsive SVGs

There’s a method on this put up from Nils Binder the place he stretches simply part of an SVG in line with variable content material somewhere else and I like it.

Talking of responsive… do you know the representation in Ethan’s unique article used to be responsive in itself?

Making SVG Loading Spinners: An Interactive Information

This is a part of what makes SVG so horny to me: easy primitives that each one mix in combination to do sublime issues. Right here, to make a selected roughly amusing spinner, Sébastien Noël makes use of

  1. <circle> with a stroke
  2. stroke-dasharray to keep an eye on precisely how the stroke will have to be dashed
  3. stroke-linecap to keep an eye on the good glance of the dashed portions
  4. stroke-dashoffet to keep an eye on the placement of the dashes
  5. @keyframe animation to animate the stroke-dasharray making it really feel like a spinner.

Icon transcendence: customizing icons to enrich fonts

This one is from the “I am hoping your shopper has some huge cash” recordsdata. I really like the theory nevertheless it’s wild. The theory is that SVG icons may just change out to check the vibe of the font they’re subsequent to.

However through “change out”, truly, in some way, it’s the similar supply icon.

Despite the fact that those icons glance fairly in a different way visually, they had been in fact crafted through the usage of the only supply icon you noticed above as a reference. For each and every of the fonts right here, we’ve changed that supply icon, thus generating a customized icon that higher suits the way and temper of each and every font:



adminadmin

Member of a CSS Webring

Try a site in the ring!
PreviousRandomNext