CSS can still play like this? The art of whimsical gradual change

In the previous article- one line of CSS code , we introduced a wonderful (perhaps weird and more appropriate) background that can be generated with one line of CSS code.

In this article, we will continue to introduce some interesting knowledge of the background. Using some very small units, only a few lines of code can produce wonderful and interesting background effects~

The effect of magnitude on background graphics

The main protagonists of this article are:

• Repeating-radial-gradient
• Repeating-conic-gradient

What is magnitude of the background graphics it? Let’s look at such an interesting phenomenon:

We use repeating-conic-gradient multiple angular gradients to implement a graphic, the code is very simple, as shown below:

<div></div>

div {
    width: 100vw;
    height: 100vh;
    background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

Replace 30deg with 0.1deg

30deg in the above code with a very small value, similar to this:

{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}

What is this stuff? Brainstorm, what will the graph drawn by this line of code look like?

See the effect:

Wow, incredible. Here 0.1deg is very important, the smaller the angle here (less than 1deg is better), the cooler the graphics, which is the magnitude of the impact on the background graphics.

CodePen -- One Line CSS Pattern

Observe the change process with CSS @property

Before, if we directly wrote the following transition code, we could not get the tween transition animation, there would only be frame-by-frame animation:

div{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
    transition: background 1s;
}

div:hover {
    background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

This effect can only be obtained because CSS does not support direct transition animation for this complex gradient:

OK, next, using introduced by CSS @property, CSS @property , we can use CSS @property observe the process of their two state changes.

Simply modify the code, the core code is as follows:

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0.1deg;
}
div{
    background: repeating-conic-gradient(#fff, #000, #fff var(--angle));
    transition: --angle 2s;
}
html:hover {
    --angle: 30deg;
}

Wow, in order to find the influence of different units of magnitude on this graphic, he got a very magical transition animation effect. It is strongly recommended that you click into DEMO to feel the effect of the down conversion:

CodePen -- repeating-conic-gradient CSS Pattern Transition（Only Chrome 85+）

Through the tweening transition animation realized CSS @property 30deg to 0.1deg , we can roughly see how the small unit 0.1deg affects the graphics.

At the same time, the smaller the unit, the more details of the picture, and you can try it yourself.

Multiple radial gradients & multiple angular gradients with small units to achieve interesting backgrounds

Using some of the above tips, we can generate some very interesting background images by using repeating-radial-gradient and repeating-conic-gradient.

Briefly list some:

div {
    background-image: repeating-radial-gradient(
        circle at center center,
        rgb(241, 43, 239),
        rgb(239, 246, 244) 3px
    );
}

div {
    background-image: repeating-radial-gradient(
        circle at 15% 30%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) 2px
    );
}

div {
    background-image: repeating-radial-gradient(
        circle at center center,
        rgb(81, 9, 72),
        rgb(72, 90, 223),
        rgb(80, 0, 34),
        rgb(34, 134, 255),
        rgb(65, 217, 176),
        rgb(241, 15, 15),
        rgb(148, 213, 118) 0.1px
    );
}

div {
    background-image: repeating-radial-gradient(
        ellipse at center center,
        rgb(75, 154, 242),
        rgb(64, 135, 228),
        rgb(54, 117, 214),
        rgb(43, 98, 200),
        rgb(33, 79, 185),
        rgb(22, 60, 171),
        rgb(12, 42, 157),
        rgb(1, 23, 143) 0.01px
    );
}

Hey, don’t you have something interesting? You can try more interesting graphics yourself. For the complete DEMO code, you can poke in here to see:

CodePen Demo -- Magic Gradient Art

How small can the smallest be?

repeating-radial-gradient It is similar to radial-gradient() and uses the same parameters, but it repeats the color in all directions to cover the entire container.

Take the following code as an example. The end point of a single drawing is 1px , which is the focus of this article. How small can it be?

:root {
    --length: 1px
}
{
    background-image: repeating-radial-gradient(
        circle at 17% 32%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) var(--length)
    );
}

I drew 8 graphs 100px to 0.00001px

In 0.001px to 0.0001px , the graphics have basically degenerated into particle graphics, and no radial gradient contour can be seen. However, when it 0.00001px the level of 060877732a040b, it actually degenerates into a pure color picture!

CodePen Demo - The effect of different levels of length units on repeating-radial-gradient graphics

Use repeating-radial-gradient to realize TV snowflake noise animation

In the above DEMO, we found that when in the interval 0.001px to 0.0001px repeating-radial-gradient basically degenerates into a particle shape:

{
    background-image: repeating-radial-gradient(
        circle at 17% 32%,
        rgb(4, 4, 0),
        rgb(52, 72, 197),
        rgb(115, 252, 224),
        rgb(116, 71, 5),
        rgb(223, 46, 169),
        rgb(0, 160, 56),
        rgb(234, 255, 0) 0.0008px
    );
}

Isn't this very similar to the effect of a TV snowflake screen? Fine-tuning 0.0008px , using a few frames of different animations, we can get the animation of TV snowflake noise.

Aha, very interesting, you can click here for the complete source code:

Copepen Demo -- PURE CSS TV NOISE EFFECT (Only Chrome 85+)

At last

What can a few lines of background code do? It's definitely more than that, of course, isn't this just the fun of CSS. Want to get the most interesting CSS information, don’t miss my iCSS official account😄

Okay, this concludes this article, I hope it helps you :)

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.