Realize a moving Hongmeng LOGO

This article will take you to easily implement a moving Hongmeng LOGO.

emmm, the motivation for writing this article is that I saw an article in the Nuggets that realized the Hongmeng LOGO-- Product Manager: The opening animation of Hongmeng is very handsome, so let's make a whole page for us.

The LOGO of Hongmeng itself looks like this:

The author of this article finally realized the animation expansion process of a letter O:

What this article wants to try is some other details of the LOGO, the core of which is the water wave effect of the reflection part.

realization subject

First of all, we need to make a simple dismantling of the structure. Because of the big difference between the upper and lower parts, although it is a circle, it obviously needs to be divided into two parts. This part is relatively simple and not the point, so I will skip sharing. code directly.

Our structure is roughly as follows:

 <div class="g-container">
    <div class="g-top">
    </div>
    <div class="g-bottom">
    </div>
</div>

 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;1,200&display=swap');
.g-container {
    width: 100%;
    height: 100%;
    background: #000;
}
.g-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50vh;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        bottom: 0;
        left: 50%;
        width: 200px;
        height: 200px;
        transform: translate(-50%, 100px);
        box-sizing: border-box;
        background: #000;
        border: 25px solid #fff;
        z-index: 1;
        box-shadow: 
            0 0 4px 1px rgba(255, 255, 255, .8),
            0 0 8px 2px rgba(255, 255, 255, .6);
    }
}
.g-bottom {
    position: fixed;
    top: 50vh;
    left: 0;
    width: 100vw;
    height: 50vh;
    background: #000;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        border-radius: 50%;
        top: 0;
        width: 200px;
        height: 200px;
        background: #000;
        left: 50%;
        transform: translate(-50%, -100px);
        box-sizing: border-box;
        border: 25px solid #fff;
        z-index: 2;
        box-shadow: 
            0 0 4px rgba(255, 255, 255, .8),
            0 0 8px rgba(255, 255, 255, .7),
            0 0 20px rgba(255, 255, 255, .6);
        filter: blur(4px);
    }
}

The core is the realization of the upper and lower semicircles, and the use of a blur filter for the following part filter: blur() , we can initially get such a structure:

Well, it does look unremarkable.

Added SVG feTurbulence filter. Realize the water wave reflection effect

OK, here is the moment to witness the miracle. Let's add an SVG feTurbulence filter to the next part g-bottom to make it a water reflection effect.

The SVG feTurbulence filter has been mentioned in many of my articles, turbulence means turbulent, unstable airflow, and the SVG <feTurbulence> filter enables translucent smokey or wavy images. Usually used to implement some special textures. The filter creates an image using the Perlin noise function. Noise is very useful in simulating cloud and fog effects, and can produce very complex textures. Using it, artificial textures such as moiré and marble can be synthesized.

If you don't know much about SVG filters, you can simply take a look at these articles of mine: Interesting! Powerful SVG filters and this practical article: Shock! Can you use SVG filters to make emoticons?

emmm, so the steps are:

1. Implement an SVG feTurbulence effect
2. Plus SVG animation animation,
3. Then refer to the filter to the DOM structure through CSS Filter

 <!-- HTML 结构下的 SVG 代码 -->
<svg>
    <filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="10">
            <animate
                 attributeName="baseFrequency"
                 dur="30s" 
                 values="0.01 0.01;0.03 0.15;0.01 0.01"
                 repeatCount="indefinite" />
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>
    </filter>
</svg>

 .g-bottom {
    // 通过 Filter 引用 SVG 滤镜到 DOM 结构之上
    filter: url(#fractal);
}

Wow, just the superposition of a filter instantly makes the animation taller. This is also the charm of the SVG feTurbulence filter, which completes some functions that CSS cannot achieve.

Aperture with Gradient and MASK

Look at the original image again, and there are circles of blue apertures, which can be achieved using repeating-radial-gradient and mask .

The simple code is as follows:

 <div></div>

 div {
    background: repeating-radial-gradient(circle at 50% 100%, transparent, transparent 5px, #2c5ec8 5.2px, #2c5ec8 6.2px, transparent 6.5px);
    mask: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .8), transparent 25%, transparent);
}

repeating-radial-gradient cooperate with mask to achieve a faded aperture effect, the results are as follows:

Add this aperture to the effect, and some other small details and text, and finally achieve a LOGO effect like this (although it is not very similar, there are still many details that have not been restored):

You can click here for the complete code: CSS inspiration -- SVG filter and filter: blur to realize Hongmeng LOGO

Think about it

Using the above SVG feTurbulence filter, can we do something more?

We can use it to try to achieve such an effect, to realize part of the dynamic fluctuation of the picture, and to use it in a specific scene, it can greatly improve the user experience and make people "wow":

Or is it:

The above two effects are from: tympanus - Distortion Effect , but they are not implemented using CSS + SVG, but using WebGL, but they can indeed be reproduced in the above way.

Suppose we have a graph like this:

Next, we use SVG feTurbulence to make the middle stone undulate :

1. Let's stack two identical images together (just use div and its pseudo-elements)
2. Use clip-path to cut out the stone in the picture stacked on the upper layer
3. Use SVG feTurbulence to apply the filter to the upper image

The complete code is as follows:

 <div></div>

<svg>
    <filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.005 0.005" numOctaves="10">
            <animate
                 attributeName="baseFrequency"
                 dur="60s" 
                 values="0.005 0.005;0.003 0.03;0.005 0.005"
                 repeatCount="indefinite" />
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>
    </filter>
</svg>

 div {
    position: relative;
    width: 600px;
    height: 400px;
    background-image: url(https://z3.ax1x.com/2021/09/05/hWPVqe.jpg);
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: inherit;
        clip-path: polygon(225px 50px, 320px 50px, 320px 90%, 225px 90%);
        filter: url(#fractal);
    }
}

In this way, we can get a moving stone, and we use a static image to achieve part of the dynamic fluctuation effect :

CodePen Demo -- SVG feTurbulence Image Effect

Using this technique, we can easily restore the above two effects achieved using WebGL. Amazing~

at last

Well, this is the end of this article, I hope it helps you :)

More wonderful CSS effects can follow my CSS inspiration .

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

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.