Some people read the headline and think

I do this dynamic picture affirmation is not so troublesome, I casually find a few pictures to stick up ah!

I can only say: small, small pattern!

Like some business scenarios: such as large screen projects, if you use png.gif, such as the total distortion!

But NOT SVG, god of SVG forever!

So, this article will teach you how to quickly implement SVG dynamic ICONS!

Something like this.

1. Find the icon material (SVG tag)

I recommend going to iconfont and picking up an icon

Place your mouse over the icon and click the download button

The following page appears. Click Copy SVG code

You should get the following code

<svg t="1610274780071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35827" width="200" height="200">
    <path d="M722.944 501.76h173.568c13.312 0 24.576-10.752 24.576-24.576 0-13.312-10.752-24.576-24.576 h-173.568c-27.136 0-53.76 9.216-75.264 25.088L296.96 734.72c-3.072 2.048-6.144 3.584-9.728 4.096-8.704 1.024-17.408 1.536-26.112 1.536-39.424-1.536-75.776-18.432-102.912-48.128-27.136-30.208-40.448-69.12-37.376-109.056 5.12 69.632 55.808 123.392 121.344-132.608 1.536 29.184 7.68 57.344 18.944 84.48 4.096 9.216 12.8 15.36 22.528 15.36 3.072 0 6.144-0.512 13.312-31.744-10.24-25.088-15.36-51.712-15.36-78.848C290.816 323.584 384 230.4 9.216-2.048 12.288-5.12 18.432-19.456 13.312-31.744-10.24-25.088-15.36-51.712-15.36-78.848 498.176 230.4c92.672 0 174.592 61.952 199.68 151.04 3.584 12.8 17.408 20.48 30.208 16.896 12.8-3.584 20.48-17.408 16.896-30.208-30.72-110.08-132.096-186.88-246.784-186.88-129.024 0-236.032 95.744-253.44 219.648-93.184 8.192-165.888 82.432-173.056 178.688-3.584 52.736 14.336 105.984 50.176 145.408 35.84 39.936 84.48 62.464 137.728 64.512H266.24c9.728 0 18.944-0.512 28.672-2.048 11.776-1.536 23.04-6.656 32.256-13.312 L350.72-257.024 c12.288-9.728 28.672-15.36 45.056-15.36zM897.024 740.352 H-301.568 c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h301.568c13.312 0 24.576-10.752 24.576-24.576 0-13.824-11.266-24.576-24.576 z" fill="#1875F0" p-id="35828"></path>
    <path d="M643.072 598.016c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576h141.312c13.312 0 24.576-10.752 24.576-24.576 0-13.312-10.756-24.576-24.576 h-141.312zm928.256 598.016h-62.464c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576h62.464c13.312 0 24.576-10.752 24.576-24.576 0-13.312-11.264-24.576-24.576-24.576zM510.464 740.352h448C-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h62.464c13.312 0 24.576-10.752 24.576-24.576 0-13.824-11.266-24.576-24.576 z" fill="#1875F0" p-id="35829"></path>
</svg>
Copy the code

Some people think, what the hell is that? I don’t understand!

Guys, don’t panic. Hold on!

This code is actually quite simple!

The SVG tag has two path tags nested inside it

In the SVG tag, viewBox=”0 0 1024 1024″ indicates 1024 x 1024 views

The D attribute in the path tag defines the path

Simple and accurate: painting on a virtual canvas 1024 × 1024

Width =”200″ height=”200″ controls the actual SVG size

That is, equal scale, scale 1024 × 1024 image to 200 × 200 without distortion, great!

Fill =”#1875F0″ in the last path tag is the fill color

2. Write animation Styles (CSS)

Before we can write the style, we need to process the content of the previous SVG

In each path tag

Remove the original fill color attribute for fill=”#1875F0″

Add fill=”# FFF “with the same fill color as the background

Add class=”icon-path” class name

Add stroke=”#1875F0″ to draw path color attributes

Increase the width of the path drawn by stroke-width=”3″

As follows:

<svg t="1610274780071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35827" width="200" height="200">
    <path class="icon-path" stroke="#1875F0" stroke-width="3" d="M722.944 501.76h173.568c13.312 0 24.576-10.752 24.576-24.576 0-13.312-10.752-24.576-24.576 h-173.568c-27.136 0-53.76 9.216-75.264 25.088L296.96 734.72c-3.072 2.048-6.144 3.584-9.728 4.096-8.704 1.024-17.408 1.536-26.112 1.536-39.424-1.536-75.776-18.432-102.912-48.128-27.136-30.208-40.448-69.12-37.376-109.056 5.12 69.632 55.808 123.392 121.344-132.608 1.536 29.184 7.68 57.344 18.944 84.48 4.096 9.216 12.8 15.36 22.528 15.36 3.072 0 6.144-0.512 13.312-31.744-10.24-25.088-15.36-51.712-15.36-78.848C290.816 323.584 384 230.4 9.216-2.048 12.288-5.12 18.432-19.456 13.312-31.744-10.24-25.088-15.36-51.712-15.36-78.848 498.176 230.4c92.672 0 174.592 61.952 199.68 151.04 3.584 12.8 17.408 20.48 30.208 16.896 12.8-3.584 20.48-17.408 16.896-30.208-30.72-110.08-132.096-186.88-246.784-186.88-129.024 0-236.032 95.744-253.44 219.648-93.184 8.192-165.888 82.432-173.056 178.688-3.584 52.736 14.336 105.984 50.176 145.408 35.84 39.936 84.48 62.464 137.728 64.512H266.24c9.728 0 18.944-0.512 28.672-2.048 11.776-1.536 23.04-6.656 32.256-13.312 L350.72-257.024 c12.288-9.728 28.672-15.36 45.056-15.36zM897.024 740.352 H-301.568 c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h301.568c13.312 0 24.576-10.752 24.576-24.576 0-13.824-11.266-24.576-24.576 z" fill="#fff" p-id="35828"></path>
    <path class="icon-path" stroke="#1875F0" stroke-width="3" d="M643.072 598.016c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576h141.312c13.312 0 24.576-10.752 24.576-24.576 0-13.312-10.756-24.576-24.576 h-141.312zm928.256 598.016h-62.464c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576h62.464c13.312 0 24.576-10.752 24.576-24.576 0-13.312-11.264-24.576-24.576-24.576zM510.464 740.352h448C-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h62.464c13.312 0 24.576-10.752 24.576-24.576 0-13.824-11.266-24.576-24.576 z" fill="#fff" p-id="35829"></path>
</svg>
Copy the code

Add CSS code:

.icon-path {
   animation: icon-path-animation 8s ease-in infinite;
}
@keyframes icon-path-animation {
  0% {
    stroke-dasharray: 4917;
    stroke-dashoffset: 4917;
  }

  40% {
    stroke-dasharray: 4917;
    stroke-dashoffset: 0;
    fill: #fff;
  }

  60% {
    stroke-dasharray: 4917;
    stroke-dashoffset: 0;
    fill: #1875F0;
  }

  100% {
    stroke-dasharray: 4917;
    stroke-dashoffset: 0;
    fill: #1875F0; }}Copy the code

And you’re done!

Hahaha, hold your horses

Here are some details you should understand!

First we use the animation property:

Specifies the name of the icon-path-animation keyframe

The duration is 8 seconds

Ease-in The animation process from slow to fast

Infinite loop

And, in keyframes:

Stroke-dasharray and stroke-Dashoffset are two attributes unfamiliar to your friends

Stroke-dasharray represents the length of the blank space between paths

For example, replace the CSS above with this code

.icon-path {
    stroke-dasharray: 1000;
}
Copy the code

It has a gap of 1000 visible to the naked eye

Also, if you’re careful, you’ll notice the word array

Yes, he can pass in an array

For example,

.icon-path {
  stroke-dasharray: 60.50.60;
}
Copy the code

He’ll show up

Then there is the offset of the stroke-Dashoffset blank space

.icon-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 200;
}
Copy the code

In fact, you can see that the gap is offset by 200

So, stroke-Dashoffset: 4917; To stroke – dashoffset: 0;

It should be a process from nothing to something

The longest path of this icon is about 4917

After all, the stroke-Dashoffset gap is offset to 4917, so 4917-4917 = 0, where the path should be 0

When the stroke-Dashoffset gap is offset to 0, 4917-0 = 4917, which is the path length that this icon is sufficient to display

How do you know that the icon path length is 4917? Nonsense?

In fact, I did not calculate, I used the following JS code to obtain

const iconPath = document.getElementsByClassName('icon-path') // Get the path tag
for (let i = 0; i < iconPath.length; i++) {
  const item = iconPath[i]
  console.log(item.getTotalLength()) // Get the path length
}
Copy the code

It can be found that the maximum length is 4916.69335937, about 4917

Therefore, we just choose the longest path as the maximum gap is enough!

The CSS code flow should be:

Draws all stroke paths from 0 to 40%

Fill color from 40% to 60%

It goes from 60% to 100%

The whole process goes from slow to fast for 8 seconds in an infinite loop

So, you should be able to quickly develop a dynamic SVG icon

Attach all the code (HTML file)

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Dynamic ICONS</title>
    <style>
        .icon-path {
            animation: icon-path-animation 8s ease-in infinite;
        }
        @keyframes icon-path-animation {
            0% {
                stroke-dasharray: 4917;
                stroke-dashoffset: 4917;
                fill: #fff;
            }

            40% {
                stroke-dasharray: 4917;
                stroke-dashoffset: 0;
                fill: #fff;
            }

            60% {
                stroke-dasharray: 4917;
                stroke-dashoffset: 0;
                fill: #1875F0;
            }

            100% {
                stroke-dasharray: 4917;
                stroke-dashoffset: 0;
                fill: #1875F0; }}</style>
</head>
<body>
<svg t="1610274780071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35827" width="200" height="200">
    <path class="icon-path" stroke="#1875F0"stroke-width="3" d="M722.944 501.76h173.568c13.312 0 24.576-10.752 24.576-24.576 0-13.312-10.752-24.576-24.576 h-173.568c-27.136 0-53.76 9.216-75.264 25.088L296.96 734.72c-3.072 2.048-6.144 3.584-9.728 4.096-8.704 1.024-17.408 1.536-26.112 1.536-39.424-1.536-75.776-18.432-102.912-48.128-27.136-30.208-40.448-69.12-37.376-109.056 5.12 69.632 55.808 123.392 121.344-132.608 1.536 29.184 7.68 57.344 18.944 84.48 4.096 9.216 12.8 15.36 22.528 15.36 3.072 0 6.144-0.512 13.312-31.744-10.24-25.088-15.36-51.712-15.36-78.848C290.816 323.584 384 230.4 9.216-2.048 12.288-5.12 18.432-19.456 13.312-31.744-10.24-25.088-15.36-51.712-15.36-78.848 498.176 230.4c92.672 0 174.592 61.952 199.68 151.04 3.584 12.8 17.408 20.48 30.208 16.896 12.8-3.584 20.48-17.408 16.896-30.208-30.72-110.08-132.096-186.88-246.784-186.88-129.024 0-236.032 95.744-253.44 219.648-93.184 8.192-165.888 82.432-173.056 178.688-3.584 52.736 14.336 105.984 50.176 145.408 35.84 39.936 84.48 62.464 137.728 64.512H266.24c9.728 0 18.944-0.512 28.672-2.048 11.776-1.536 23.04-6.656 32.256-13.312 L350.72-257.024 c12.288-9.728 28.672-15.36 45.056-15.36zM897.024 740.352 H-301.568 c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h301.568c13.312 0 24.576-10.752 24.576-24.576 0-13.824-11.266-24.576-24.576 z" fill="#fff" p-id="35828"></path>
    <path class="icon-path" stroke="#1875F0" stroke-width="3" d="M643.072 598.016c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576h141.312c13.312 0 24.576-10.752 24.576-24.576 0-13.312-10.756-24.576-24.576 h-141.312zm928.256 598.016h-62.464c-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576h62.464c13.312 0 24.576-10.752 24.576-24.576 0-13.312-11.264-24.576-24.576-24.576zM510.464 740.352h448C-13.312 0-24.576 10.752-24.576 24.576 0 13.312 10.752 24.576 24.576 24.576h62.464c13.312 0 24.576-10.752 24.576-24.576 0-13.824-11.266-24.576-24.576 z" fill="#fff" p-id="35829"></path>
</svg>
<script>
    const iconPath = document.getElementsByClassName('icon-path') // Get the path tag
    for (let i = 0; i < iconPath.length; i++) {
        const item = iconPath[i]
        console.log(item.getTotalLength()) // Get the path length
    }
</script>
</body>
</html>
Copy the code

Finally:

This is just a simple animation

If you want complexity, you can just write several different animations

If you read carefully and understand the principle, you can finish the implementation

Let’s come on!

Thank you for reading