This is the 7th day of my participation in the Novembermore Challenge.The final text challenge in 2021

introduce

This issue we are going to use SVG to do a planet around the loading animation, the general scene is in a planet in the universe, there is a red dragon is fast flying around the planet, which means very urgent, why haven’t finished loading this page duck!! Cough cough, I can not go down, first kangkang effect:

In fact, it is easy to learn. This time, we just rely on SVG to complete everything, not involving JS and CSS animation, etc. So let’s get started.

The body of the

1. Main interface style

<div class="app">
    <svg viewBox="0 0 160 160" width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    </svg>
</div>
Copy the code
.app{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: repeating-linear-gradient(300deg, rgb(39.60.100) 0px,rgb(39.60.100) 12px,transparent 13px),repeating-linear-gradient(382deg, rgb(39.60.100) 0px,rgb(39.60.100) 12px,transparent 13px),linear-gradient(255deg, rgb(242.238.179),rgb(242.241.16));
}
Copy the code

Div.app will write a cosmic background to cover the entire window, then use an elastic layout to center the SVG inside, and that’s all that’s left of SVG, the main screen.

2. Planet import

<defs>
    <image id="ball" href="./assets/ball.png" x="30" y="30" width="100" height="100" />
</defs>
<use href="#ball" />
Copy the code

Use the href of use to write the corresponding id of the planet, so that the import of the planet is complete. As for why to write the image in defS instead of directly write the image tag, we will talk about this later.

3. Red dragon flies

<defs>
    <image id="ball" href="./assets/ball.png" x="30" y="30" width="100" height="100" />
    <g id="fly" transform=Matrix (0.866, -0.5, 0.25, 0.433, 80, 80)>
        <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="Rgba (214,73,42,. 5)">
            <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1.2 s" repeatCount="indefinite" />
        </path>
    </g>
</defs>
<use href="#ball" />
<use href="#fly"></use>
Copy the code

Create a group and set its ID to fly, then reference it with use. The red dragon is actually represented by a path that looks like this:

Then we transform it using transform and set it to move around according to the animateTransform. Very simple to achieve a circle flying animation.

However, we can see a bug that when the red dragon goes around the planet, the planet needs to block him, instead of the red dragon can be on the planet, because we are 2D and there is no 3D coordinate system, so how do we solve this problem, the answer is to recreate the first half of the planet to cover the red dragon!!

4. Cover up the red dragon

<defs>
    <! -... -->
    <clipPath id="clip-ball">
        <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform=Matrix (0.866, -0.5, 0.5, 0.866, 80, 80) />
    </clipPath>
</defs>
<! -... -->
<use href="#ball" clip-path="url(#clip-ball)" />
Copy the code

We use clipPath to cut the region path to write well, use use to reuse the planet image, and then use clip-path to cut the path just written, so that a semicircle is drawn.

Then we will cover the red Dragon for the half moon, and now observe:

So not only does it spin, but we’ve solved the problem of being able to cover it, and we’re done here, online demo.

conclusion

I don’t know if you have learned anything from this case, it is animateTransform animation how to use? Or clipPath clipping area? SVG itself is not a popular technology, but it is very easy to use, I hope you also do more practice, HERE I throw out a brick, I hope you also have new ideas and ideas.