Amazing! ! Can CSS also achieve Aurora?

After writing this article last time- cleverly used gradients to achieve high-level background light animation , the comments below the article have a comment from students, can use CSS to achieve aurora ?

Like this:

Emmm, this is a bit difficult. However, I also tried it recently. Although it is impossible to simulate such a real effect, some similar special effects can still be made using CSS. Let's try it together today.

After observing some pictures of aurora, I discovered some of the more important elements in the aurora animation:

1. Bright gradient colors based on dark background
2. Animation effect similar to the flow of water waves

For bright gradient colors, we can try to use gradient simulation. And the animation effect of water wave flow, feturbulence in the SVG filter is specifically for this. The use of this filter has been repeatedly mentioned in my past articles.

In addition to gradients, SVG's <feturbulence> filter, we may also use blending mode ( mix-blend-mode ), CSS filters and other enhancement effects.

OK, after having a general idea, all that remains is to keep trying.

Step 1. Draw a dark background

First, we may need a dark background to represent our night sky. box-shadow some stars at the same time. The stars can be simulated by 061c3e6419352b. In this way, we can complete a night sky background in 1 div:

<div class="g-wrap">
</div>

@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}

@function shadowSet($n, $size) {
    $shadow : 0 0 0 0 #fff;
    
    @for $i from 0 through $n { 
        $x: randomNum(350);
        $y: randomNum(500);
        $scale: randomNum($size) / 10;
        
        $shadow: $shadow, #{$x}px #{$y}px 0 #{$scale}px rgba(255, 255, 255, .8);
    }
    
    @return $shadow;
}

.g-wrap {
    position: relative;
    width: 350px;
    height: 500px;
    background: #0b1a3a;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 1px;
        border-radius: 50%;
        box-shadow: shadowSet(100, 6);
}

This step is relatively simple. After using SASS, we can get such a night sky background image:

Step 2. Use gradient to draw the outline of the aurora

Next, use the gradient to draw an outline effect of the aurora.

It is actually a radial gradient:

<div class="g-wrap">
  <div class="g-aurora"></div>
</div>

.g-aurora {
    width: 400px;
    height: 300px;
    background: radial-gradient(
        circle at 100% 100%,
        transparent 45%,
        #bd63c1 55%,
        #53e5a6 65%,
        transparent 85%
    );
}

Step 3. Rotate and stretch

At present, it seems that there is a little outline. In the next step, we will transform the obtained gradient effect by rotating and stretching.

.g-aurora {
    ...
    transform: rotate(45deg) scaleX(1.4);
}

We can probably get such an effect:

Step 4. The magical blending mode change!

At this point, the prototype has actually come out. mix-blend-mode . In order to blend with the dark background, here we use the blending mode 061c3e64193741.

.g-aurora {
    ...
    transform: rotate(45deg) scaleX(1.4);
    mix-blend-mode: color-dodge;
}

A magical thing happened, look at the effect:

The overall color looks more like the color of aurora.

Step 5. Overlay the SVG feturbulence filter

Next, we want to produce the effect of water ripples, we need to use SVG's <feturbulence> filter. If you don't know much about this filter, you can read these articles of mine:

• interesting! Powerful SVG filter
• shocked! Can I make emoticons even with SVG filters?
• Realize a moving

Back to the topic. We add a <feturbulence> filter of SVG, and use CSS filter for reference

<div class="g-wrap">
  <div class="g-aurora"></div>
</div>

<svg id='blob' version='1.1' xmlns='http://www.w3.org/2000/svg'>
    <defs>
        <filter id='wave'>
            <feturbulence basefrequency='0.003 0.003 id='turbulence' numoctaves='3' result='noise' seed='10' />
            <fedisplacementmap id='displacement' in2='noise' in='SourceGraphic' scale='96' />
        </filter>
    </defs>
</svg>

.g-aurora {
    ...
    transform: rotate(45deg) scaleX(1.4);
    mix-blend-mode: color-dodge;
    filter: url(#wave);
}

We can get such an effect:

Wow, do you feel that way already. Through the characteristics of feturbulence, we have almost simulated the effect of aurora!

Step 6. Let the aurora move

In the last step, we need to make our aurora move. Because SVG animation itself does not support features animation-fill-mode: alternate We still need to write a little JavaScript code to control the overall loop of the animation.

The approximate code is this:

var filter = document.querySelector("#turbulence");
var frames = 0;
var rad = Math.PI / 180;

function freqAnimation() {
  bfx = 0.005;
  bfy = 0.005;
  frames += .5
  bfx += 0.0025 * Math.cos(frames * rad);
  bfy += 0.0025 * Math.sin(frames * rad);

  bf = bfx.toString() + ' ' + bfy.toString();
  filter.setAttributeNS(null, 'baseFrequency', bf);
  window.requestAnimationFrame(freqAnimation);
}

window.requestAnimationFrame(freqAnimation);

At this point, we have got a complete, moving aurora animation:

Some tips and other things

1. There will be obvious border burrs around the gradient elements, which can be removed box-shadow: inset ...
2. The actual parameters of each attribute in the actual writing process seem to be simple, but they are actually obtained after constant debugging in the process;
3. Blending modes and SVG feturbulence filters are more difficult to master, requiring constant practice and constant debugging; the color selection of Aurora in this article has not been repeatedly debugged, and I am willing to spend time to debug colors with better results.

The final result is not perfect, but it is also a good CSS + SVG work. The complete code, you can see here:

CodePen Demo -- Aurora

At last

Okay, this concludes this article, I hope this article is helpful to you :)

Want to get the most interesting CSS information, don’t miss my account - 161c3e64193c95 iCSS front-end facts 161c3e64193c98 😄

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 communicate more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.