I am participating in the Mid-Autumn Festival Creative Submission Contest. Please see: Mid-Autumn Festival Creative Submission Contest for details.

The Mid-Autumn Festival is coming, the Mid-Autumn full moon, you and I are looking at each other in the horizon, send acacia month. In this situation, we can use CSS to draw a picture of “sea rising moon”. Just a few days ago, I saw an article about feTurbulence filter, and the water ripple effect in it is very suitable for the effect picture of “sea rising moon”.

First of all, what is the feTurbulence filter and how does it work?

FeTurbulence is simply a filter for SVG. We can use this magic filter to create flowing water, floating clouds, paper textures, etc. See MDN for details. It has the following specific properties:

  • baseFrequency
  • numOctaves
  • seed
  • stitchTiles
  • type

1, baseFrequency

BaseFrequency indicates the frequency of noise. The default value is 0. The higher the frequency, the more intense the noise is. If baseFrequency=”0.025″ has one value, it applies to the frequency in both horizontal direction X and vertical direction Y. If baseFrequency=”0.025 0.1″ has two values, they correspond to the frequency in different directions.

< SVG width="400" height="110"> <filter ID =" noisE1 "> <feTurbulence baseFrequency="0.025" /> </filter> <filter Id ="noise2"> <feTurbulence baseFrequency="0.05" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="140" y="0" width="100" height="100" style="filter: url(#noise2);" /> </svg>Copy the code

The running results are as follows:

2, numOctaves

NumOctaves stands for octaves, and the higher the number of octaves, the more natural the noise looks. It defaults to 1 and is of type INTEGER, which cannot be negative.

< SVG width="400" height="110"> <filter ID =" noisE1 "> <feTurbulence baseFrequency="0.02" numOctaves="1" /> </filter> <filter ID ="noise2"> <feTurbulence baseFrequency="0.02" numOctaves="4" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="140" y="0" width="100" height="100" style="filter: url(#noise2);" /> </svg>Copy the code

The running results are as follows:

3, seed

Seed represents the starting value of pseudo-random number generation in feTurbulence filter effect. Seed does not change the frequency and density of noise, but the shape and position of noise.

< SVG width="400" height="110"> <filter ID =" noisE1 "> <feTurbulence baseFrequency="0.02" seed="1" /> </filter> <filter Id ="noise2"> <feTurbulence baseFrequency="0.02" seed="16" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="140" y="0" width="100" height="100" style="filter: url(#noise2);" /> </svg>Copy the code

Running results:

4, stitchTiles

StitchTiles represent how Perlin noise is handled at the border and have two property values: noStitch and Stitch. NoStitch is the default value, indicating that there is no smooth transition at the edge of the graph block with feTurbulence effect applied to multiple elements in SVG, and there is an obvious boundary. Stitch means that x and Y values will be automatically adjusted to make the next noise graph apply the width and height of the previous noise graph to make the boundary transition smoothly.

Copy the code

5, the type

Type indicates the display effect type of feTurbulence filter, including turbulence (default value, turbulence and chaos effect) and fractalNoise (fractalNoise effect).

< SVG width="400" height="110"> <filter ID =" noisE1 "> <feTurbulence baseFrequency="0.02" type="turbulence" /> </filter> <filter ID ="noise2"> <feTurbulence baseFrequency="0.02" type="fractalNoise"/> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="140" y="0" width="100" height="100" style="filter: url(#noise2);" /> </svg>Copy the code

Running results:

All right, that’s it let’s get started!

1. Take a few images (stars, moon, sea) and write CSS to make them look like this to create a symmetry

If your moon has no moonlight, you can set the moonBox-shadow: 0px 0px 70px 0.5px #fffdca;And the moon in the sea at the same timefilter: blur(1px)Blur it a little bit. It’s more natural.

2. Since it is the “sea rising moon”, it is necessary to let the moon move, CSS set animation effect for the moon

/* day month */. Num1 {top: 40px; right: 110px; animation:firstmoon 10s; } /* num2 {bottom: 50px; right: 110px; animation:secondmoon 10s; } @keyframes firstmoon { from { top: 200px; } to {top: 40px; } } @keyframes secondmoon { from { bottom: 190px; } to {bottom: 50px; }}Copy the code

3. Now that the moon has finished its rise, let’s have some ocean waves, using what we’ve just learned aboutfeTurbulenceRelated properties of.

< SVG width="0" height="0"> <filter id="picimg"> <feTurbulence baseFrequency="0.01 0.1" type="turbulence" seed="4"></feTurbulence> <feDisplacementMap in="SourceGraphic" scale="20"/> </filter> </svg>Copy the code

Note that you need to use the feDisplacementMap filter to map the static image of the sea onto the image. See MDN for more information on the feDisplacementMap filter.

4. Now that the sea wave is here, let’s make it work and add it to SVGanimate

<animate attributeName="baseFrequency" dur="25s" keyTimes="0; 0.3; 0.7; 1 "values =" 0.01 0.08; 0.02 0.13; 0.01 0.09; 0.01 0.11 "repeatCount =" indefinite "> < / animate >Copy the code

Now let’s look at the final product, the complete code

Reference: Skillfully use CSS filter, make your website more cool! SVG feTurbulence filter in depth

Gold digging maiden work, if there is something wrong in the article welcome criticism and advice, if you are interested in this article, can you point a like and then go (actually want the cup of this activity, ha ha ha), finally cash wish everyone happy Mid-Autumn Festival!!