Animated React Logo with CSS

Ready to work

Originally, I thought about whether to write "Use a div to draw the React Logo". Finally, I thought about it, even if it is implemented with a div, it will have great limitations on the effects that may be added later, so I gave up such a title. . As for the HTML structure, the use of div is not a lot, just the following structure.

 <div class="react">
    <div class="logo"></div>
</div>

Let’s take a look at the simple one first, and refer to the Logo display effect on the react official website.

The entire implementation process is also very simple. After all, this is not a complex graphic, and it is not exactly 100% cloned during the drawing process, but it looks similar in shape. For example, the following points are more casual to deal with:

• The rotation angle of the ellipse part;
• The size of the center dot;
• the size of each ellipse;

start drawing

The size of the three ellipses in the React Logo is assumed to be the same, so as long as the horizontal ellipse is drawn, it will be rotated through ::before and ::after to change the angle. .

Once you've figured out the key parts, let's start writing CSS code.

 .react {
    position: relative;
    width: 250px;
    height: 250px;
    color: rgb(1, 216, 255);
}

Get the color value on the React Logo image through the color picker, and then define a width and height to the periphery. ✏️One thing to note here, the main purpose of writing the color value to color .

🔖There is a currentColor property value in CSS, which can directly get the currently inherited color value, while color is inheritable, and if the individual attribute does not write a color value , is the value that directly inherits color . Therefore, when we write the color value on the parent element, the color values in many places can be omitted.

Then draw the ellipse.

 .logo,
.logo::after,
.logo::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 250px;
    height: 100px;
    border: 10px solid;
    border-radius: 50%;
    box-sizing: border-box;
    transform: translateY(-50%);
    z-index: 1;
}

Note: The height here is the height value of visual guess, and the width is to fill the container, do not use 100% as the width value, because there are ::after and ::before These two pseudo-elements. If 100% is used, the width of these two pseudo-elements will be smaller than the horizontal ones, because the pseudo-elements are children of .logo .

Because absolute is used for positioning, you can see "a" ellipse on the page at this time. Now it's time to rotate the pseudo-element.

 .logo::after,
.logo::before {
    content: '';
    left: -12px;
    transform: rotate(58deg) translate3d(-50px, -25px, 0);
}
.logo::after {
    transform: rotate(-58deg) translate3d(50px, -25px, 0);
}

You can get such a graph.

It should be noted here that when we rotate, although the center point is center center , there will be a positional offset after rotation, so we need to make offset adjustment on the X axis and the Y translate3d(50px, -25px, 0) . The offset and the angle of rotation here are just visual observations.

finish drawing

With the basic outline, there is still the center dot. This is simple, just use the pseudo element of .react to draw a circle, and then locate it in the middle.

 .react::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    background-color: currentcolor;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 2;
}

Then you can get the final Logo graphic.

In this circle, you can see that background-color: currentcolor; is used, and when drawing an ellipse, it is border: 10px solid; . Because background-color will not inherit the color value of ---b276323dfb10ede5b1faee0c74930269 color , and border-color when it is undefined, use the color value of color .

change it up

The basic React Logo is drawn with CSS, then change it, replace border afefb7bf926c4a970eec5d5a5844670d--- with box-shadow , and realize a logo with uneven lines through shadows.

Ugly or not, it seems pretty ugly, but it feels different🤣…

The way to achieve it is also simple, just remove the border border , and use it directly box-shadow .

 .logo,
.logo::after,
.logo::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 250px;
    height: 100px;
    /* border: 10px solid; */
    border-radius: 50%;
    /* box-sizing: border-box; */
    transform: translateY(-50%);
    box-shadow: 10px -2px 2px 7px;
    z-index: 1;
}
.logo::after,
.logo::before {
    content: '';
    /* left: -12px; */
    transform: rotate(58deg) translate3d(-50px, -25px, 0);
    box-shadow: 7px -4px 2px 6px;
}
.logo::after {
    transform: rotate(-58deg) translate3d(50px, -25px, 0);
    box-shadow: -4px -8px 2px 8px;
}

Remove left: -12px; because the border is gone, the width of the box model changes.

It should be noted here that the color value is not added to box-shadow . The reason is described above, and the same is true.

get moving

If you want to move, that is to add a animation animation, the effect is probably like this.

It looks like the arc-shaped effect is moving, but in fact it just changes the position of the shadow. During the animation, the value of the shadow was also modified by the way.

 @keyframes runLogoPseudo {
    0%, 100% {
        box-shadow: 10px -4px 2px 1px;
    }
    25% {
        box-shadow: 10px 4px 2px 1px;
    }
    50% {
        box-shadow: -10px 4px 2px 1px;
    }
    75% {
        box-shadow: -10px -4px 2px 1px;
    }
}
@keyframes runLogo {
    0%, 100% {
        box-shadow: 7px -2px 5px;
    }
    25% {
        box-shadow: 7px 2px 5px;
    }
    50% {
        box-shadow: -7px 2px 5px;
    }
    75% {
        box-shadow: -7px -2px 5px;
    }
}

The effect that can be seen now, the circle in the middle will not change, so add a little more animation frame.

 @keyframes blink {
    0%, 100% {
        transform: scale(1) translate3d(-50%, -50%, 0);
        box-shadow: 0 0 15px;
        opacity: 1;
    }
    60% {
        transform: scale(1.05) translate3d(-50%, -50%, 0);
        box-shadow: none;
        opacity: .8;
    }
}

In this way, the small circle will have a feeling similar to "breathing", it should be. It doesn't matter, it's animated anyway.

The last key part is to make the animation move.

 .react::after {
    animation: blink 1.5s 0s infinite ease-in-out;
}

Add the flickering effect to the small dots by feeling.

 .logo,
.logo::after,
.logo::before {
    /* box-shadow: 10px -2px 2px 7px; */
    animation: runLogo 1s 0s infinite linear;
}
.logo::after,
.logo::before {
    /* box-shadow: 10px -4px 2px 1px; */
    animation-name: runLogoPseudo;
}
.logo::after {
    /* box-shadow: -4px -8px 2px 8px; */
    animation-direction: alternate;
}

• First pass animation: runLogo 1s 0s infinite linear; to make the three ellipses have the same animation effect;
• Then change the animation frame name in the pseudo element animation-name: runLogoPseudo; to select the corresponding animation effect;
• Finally, change the animation direction of one of the pseudo-elements so that the two inclined ellipses move in opposite directions animation-direction: alternate; , forming a different parallax feeling;
• Finally, the last, since the animation is infinite infinite movement, then remove box-shadow the value of it, in the @keyframes have corresponding box-shadow attributes out;

Any more?

I don't have it here now. If you are interested, you can consider combining the gradient color to realize the border, and then scroll it up. You can also combine the mix-blend-mode blend mode to play some fun. These are the specific creative ideas...

Effect preview

https://codepen.io/linxz/pen/rNpEJvj

First published on the personal public account "Zhi Yu Zi Le", https://mp.weixin.qq.com/s/83TgDvc9oP7U82zkYuVeqg