After writing this article – using gradient to achieve advanced sense of full background light animation, the comments below the article are from students, can USE CSS to achieve aurora?
Something like this:
Emmm, this is a little tough. However, recently I also tried to try, although it is impossible to simulate so real effect, but using CSS can make similar effects, today we will try together.
After looking at some pictures of aurora, I found some important elements of aurora animation:
- Bright gradient colors based on dark background
- Similar to water wave motion animation effect
Bright gradient colors we can use gradient simulation as much as possible. As for the animation effect of water wave flow, feturbulence in SVG filter is specially used for this, and the use of this filter has been repeatedly mentioned in many of my past articles.
In addition to gradience, SVG’s < FeTurbulence > filter, we may also use mix-Blend-mode, CSS filters and other enhancements.
OK, once you have a general idea, all you have to do is keep trying.
Step 1. Paint a dark background
First, we might need a dark background to represent our night sky. The stars can be simulated using box-shadow, so we can create a night sky background in one div:
<div class="g-wrap">
</div>
Copy the code@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);
}
Copy the codeThis step is relatively easy, and with the help of SASS, we can get a background image of the night sky like this:
Step 2. Use a gradient to outline the aurora
The next step is to use a gradient to create a silhouette of the aurora.
It’s a radial gradient:
<div class="g-wrap">
<div class="g-aurora"></div>
</div>
Copy the code.g-aurora {
width: 400px;
height: 300px;
background: radial-gradient(
circle at 100% 100%,
transparent 45%.#bd63c1 55%.#53e5a6 65%,
transparent 85%
);
}
Copy the code
Step 3. Rotate and stretch
So far, it’s a little sketchy. Next, let’s transform the resulting gradient by rotating and stretching.
.g-aurora{...transform: rotate(45deg) scaleX(1.4);
}
Copy the codeWe get something like this:
Step 4. Magical mix mode transformation!
At this point, the prototype is already out. But the colors don’t look exactly like each other. In order to blend with the dark background, we used mix-blend-mode.
.g-aurora{...transform: rotate(45deg) scaleX(1.4);
mix-blend-mode: color-dodge;
}
Copy the codeSomething amazing happens and look at the effect:
The overall color looks more like that of an aurora.
Step 5. Overlay SVG Feturbulence filter
Next, to create the effect of water ripple, we need to use the < Feturbulence > filter of SVG. If you are not familiar with this filter, you can read my articles:
- Interesting! Powerful SVG filter
- Shock!!! Can you make emojis with SVG filters?
- Implement a moving Hongmeng LOGO
Back to business. We added a < FeTurbulence > filter for SVG and referenced it using CSS filter
<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>
Copy the code.g-aurora{...transform: rotate(45deg) scaleX(1.4);
mix-blend-mode: color-dodge;
filter: url(#wave);
}
Copy the codeWe get something like this:
Wow, doesn’t it feel like that already? With feturbulence, we’re almost simulating the aurora!
6. Activate the aurora
Finally, we need to get our auroras moving. Since SVG animations themselves do not support features like animation-fill-mode: alternate. We still need to write a little JavaScript code to control the overall loop of the animation.
The code looks like 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);
Copy the codeAt this point, we have a full, moving aurora animation:
Some tips and other things
- There will be a noticeable border burr around the gradient elements. Use black inner shadows
box-shadow: inset ...Remove; - The actual parameters of each attribute in the actual writing process seem to be simple, in fact, in the process of continuous debugging to get;
- Mixed mode and SVG feturbulence filter are difficult to master, requiring constant practice and debugging. The color selection of the aurora in this paper does not go through too much repeated debugging. If you are willing to spend time, you can debug the color with better effect.
The end result is not perfect, but it is a good CSS + SVG work. For the full code, you can see it here:
CodePen Demo — Aurora
The last
Well, that’s the end of this article, I hope you found it helpful 🙂
Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄
More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.
If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.