Home
Web Designing
Animated SVG User Icon using HTML, CSS & JavaScript

Animated SVG User Icon using HTML, CSS & JavaScript

Rajib 02 May 2020 Animated Icon, Animated SVG Icon, SVG Icon, User Icon

Solution: Animated SVG User Icon using HTML, CSS & JavaScript with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow

In the previous coding, we share How to Implement an Analog Clock if not check out yet please visit over here. In this coding, we are discus about animated SVG icon, more animated SVG icon will be coming to upcoming coding so stay with us, and don’t forget bookmark our website.

Live Demo

Also Helpful –

Implement Google Pic Chart

JavaScript Analog Clock

Typewriter Effect using JavaScript

Animated SVG User Icon using HTML, CSS & JavaScript

Here is the short description of creating an animated SVG icon using HTML, CSS & JavaScript with source code. To execute the same program you need to copy those codes, it works fine. If you want to make different SVG icon then you need to assign path value.

Example –

If the element starts with the default state of four lines

<div class="svg-container" align="center"> 
  <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0, 20 Q50, 20 100, 20"></path>
    <path d="M0, 40 Q50, 40 100, 40"></path>
    <path d="M0, 60 Q50, 60 100, 60"></path>
    <path d="M0, 80 Q50, 80 100, 80"></path>
  </svg>
</div>

</svg>

</div>

If you want to animate four state line then you need to use CSS code display.none and set the time using the JavaScript function.

Back to coding, To complete this program with debugging free code you have to create three files. The first file is to HTML and the second file gonna be CSS for design part and the third file JavaScript for function-related,

index.html

Create an HTML file named ‘index.html‘ and put those codes given below.

<!-- Coding Debugging (https://codingdebugging.com) -->
<!DOCTYPE html>
<html>
    <head>
        <title>Animated SVG User Icon - Coding Debugging</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <!--jQuery CDN-->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

        <!-- Our Custom CSS -->
        <link rel="stylesheet" href="style.css">    
        
    </head>

<body>
    <div class="svg-container" align="center">
        <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="path"
                d="M381.178 349.264L372.133 348.667V331.6C372.133 317.46 360.673 306 346.533 306H175.866C161.726 306 150.266 317.46 150.266 331.6V348.667L141.221 349.691C107.472 354.205 82.213 382.886 82 416.934V510.8H440.4V416.933C440.399 382.723 415.081 353.795 381.178 349.264Z"
                fill="#E56B2E" />
            <path class="path"
                d="M256 401.067C232.9 401.067 211.004 390.776 196.267 372.992V512H315.734V372.992C300.996 390.775 279.1 401.067 256 401.067Z"
                fill="#EBEBEB" />
            <path class="path"
                d="M313.685 343.125C305.066 342.084 298.607 334.737 298.666 326.058V264.533H213.333V326.144C213.393 334.822 206.933 342.17 198.314 343.211H196.266V372.822C223.598 405.812 272.494 410.403 305.484 383.071C309.213 379.982 312.643 376.552 315.733 372.822V343.382L313.685 343.125Z"
                fill="#FEDAC6" />
            <path class="path" d="M230 396.551C216.706 391.967 204.942 383.818 196 373V511H230V396.551Z"
                fill="#DBDBDB" />
            <path class="path" d="M77 419.487V511H111V362C90.0051 373.864 77.0508 395.76 77 419.487Z" fill="#D65B25" />
            <path class="path"
                d="M341.333 196.267H358.4C372.54 196.267 384 184.807 384 170.667C384 156.527 372.54 145.067 358.4 145.067H349.867"
                fill="#FEDAC6" />
            <path class="path"
                d="M170.667 196.267H153.6C139.46 196.267 128 184.807 128 170.667C128 156.527 139.46 145.067 153.6 145.067H162.133"
                fill="#F5C4B0" />
            <path class="path"
                d="M349.867 93.867H179.2C150.921 93.867 128 70.946 128 42.667H162.133C147.993 42.667 136.533 31.207 136.533 17.067V8.533H264.533C311.663 8.533 349.867 46.737 349.867 93.867Z"
                fill="#FECB66" />
            <path class="path"
                d="M162.133 93.867V179.2L164.181 205.824C168.533 256.58 213.214 294.204 263.97 289.852C266.735 289.613 269.483 289.255 272.213 288.768C314.257 280.636 345.463 245.069 348.074 202.325L349.866 179.2V93.867H162.133Z"
                fill="#FEDAC6" />
            <path class="path"
                d="M196.267 190.72V85.333H162.134V179.2L164.182 205.824C167.186 242.193 191.489 273.306 226.049 285.013L210.177 249.77C201.028 231.433 196.267 211.217 196.267 190.72Z"
                fill="#F5C4B0" />
            <path class="path" d="M196.267 85.333C196.6 109.969 183.527 132.847 162.134 145.066V85.333H196.267Z"
                fill="#F5AD76" />
            <path class="path" d="M349.867 145.067C349.867 145.067 315.734 128 315.734 93.867H349.867V145.067Z"
                fill="#FECB66" />
            <path class="path" d="M298.667 307.2V281.6H213.334V307.2C245.333 324.267 266.667 324.267 298.667 307.2Z"
                fill="#F5C4B0" />
            <path class="path"
                d="M128 42.667C129.963 70.085 151.782 91.904 179.2 93.867H341.333C268.791 83.43 197.376 66.295 128 42.667Z"
                fill="#F5AD76" />
            <path class="path"
                d="M198.656 344.491C200.149 341.888 202.257 339.687 204.8 338.091C210.108 334.789 213.333 328.977 213.333 322.731V307.2H177.834C159.692 307.174 144.955 321.852 144.929 340.002C144.92 346.556 146.866 352.964 150.527 358.4L160.938 373.931C169.071 359.467 182.656 348.868 198.656 344.491Z"
                fill="#D65B25" />
            <path class="path"
                d="M197.733 165.066C203.256 165.066 207.733 160.589 207.733 155.066C207.733 149.543 203.256 145.066 197.733 145.066C192.21 145.066 187.733 149.543 187.733 155.066C187.733 160.589 192.21 165.066 197.733 165.066Z"
                fill="black" />
            <path class="path"
                d="M300.133 165.066C305.656 165.066 310.133 160.589 310.133 155.066C310.133 149.543 305.656 145.066 300.133 145.066C294.61 145.066 290.133 149.543 290.133 155.066C290.133 160.589 294.61 165.066 300.133 165.066Z"
                fill="black" />
            <path class="path"
                d="M261 207H246.001C244.341 207 242.791 206.223 241.861 204.933C240.931 203.643 240.741 201.994 241.356 200.544L251.356 177L257 179.5L247.5 200.5L261 203V207Z"
                fill="black" />
            <path class="path"
                d="M240.384 238.933H238.933L240.384 234H244.5C257.786 233.991 273.596 226.395 283 217L287.633 219.366C275.012 231.979 258.236 238.925 240.384 238.933Z"
                fill="black" />
        </svg>
    </div>

    <!-- Our Custom JS -->
    <script src="function.js"></script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Animated SVG User Icon - Coding Debugging</title>

integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

</head>

<body>

<path class="path"

d="M381.178 349.264L372.133 348.667V331.6C372.133 317.46 360.673 306 346.533 306H175.866C161.726 306 150.266 317.46 150.266 331.6V348.667L141.221 349.691C107.472 354.205 82.213 382.886 82 416.934V510.8H440.4V416.933C440.399 382.723 415.081 353.795 381.178 349.264Z"

fill="#E56B2E" />

<path class="path"

d="M256 401.067C232.9 401.067 211.004 390.776 196.267 372.992V512H315.734V372.992C300.996 390.775 279.1 401.067 256 401.067Z"

fill="#EBEBEB" />

<path class="path"

d="M313.685 343.125C305.066 342.084 298.607 334.737 298.666 326.058V264.533H213.333V326.144C213.393 334.822 206.933 342.17 198.314 343.211H196.266V372.822C223.598 405.812 272.494 410.403 305.484 383.071C309.213 379.982 312.643 376.552 315.733 372.822V343.382L313.685 343.125Z"

fill="#FEDAC6" />

<path class="path" d="M230 396.551C216.706 391.967 204.942 383.818 196 373V511H230V396.551Z"

fill="#DBDBDB" />

<path class="path"

d="M341.333 196.267H358.4C372.54 196.267 384 184.807 384 170.667C384 156.527 372.54 145.067 358.4 145.067H349.867"

fill="#FEDAC6" />

<path class="path"

d="M170.667 196.267H153.6C139.46 196.267 128 184.807 128 170.667C128 156.527 139.46 145.067 153.6 145.067H162.133"

fill="#F5C4B0" />

<path class="path"

d="M349.867 93.867H179.2C150.921 93.867 128 70.946 128 42.667H162.133C147.993 42.667 136.533 31.207 136.533 17.067V8.533H264.533C311.663 8.533 349.867 46.737 349.867 93.867Z"

fill="#FECB66" />

<path class="path"

d="M162.133 93.867V179.2L164.181 205.824C168.533 256.58 213.214 294.204 263.97 289.852C266.735 289.613 269.483 289.255 272.213 288.768C314.257 280.636 345.463 245.069 348.074 202.325L349.866 179.2V93.867H162.133Z"

fill="#FEDAC6" />

<path class="path"

d="M196.267 190.72V85.333H162.134V179.2L164.182 205.824C167.186 242.193 191.489 273.306 226.049 285.013L210.177 249.77C201.028 231.433 196.267 211.217 196.267 190.72Z"

fill="#F5C4B0" />

<path class="path" d="M196.267 85.333C196.6 109.969 183.527 132.847 162.134 145.066V85.333H196.267Z"

fill="#F5AD76" />

<path class="path" d="M349.867 145.067C349.867 145.067 315.734 128 315.734 93.867H349.867V145.067Z"

fill="#FECB66" />

<path class="path" d="M298.667 307.2V281.6H213.334V307.2C245.333 324.267 266.667 324.267 298.667 307.2Z"

fill="#F5C4B0" />

<path class="path"

d="M128 42.667C129.963 70.085 151.782 91.904 179.2 93.867H341.333C268.791 83.43 197.376 66.295 128 42.667Z"

fill="#F5AD76" />

<path class="path"

d="M198.656 344.491C200.149 341.888 202.257 339.687 204.8 338.091C210.108 334.789 213.333 328.977 213.333 322.731V307.2H177.834C159.692 307.174 144.955 321.852 144.929 340.002C144.92 346.556 146.866 352.964 150.527 358.4L160.938 373.931C169.071 359.467 182.656 348.868 198.656 344.491Z"

fill="#D65B25" />

<path class="path"

d="M197.733 165.066C203.256 165.066 207.733 160.589 207.733 155.066C207.733 149.543 203.256 145.066 197.733 145.066C192.21 145.066 187.733 149.543 187.733 155.066C187.733 160.589 192.21 165.066 197.733 165.066Z"

fill="black" />

<path class="path"

d="M300.133 165.066C305.656 165.066 310.133 160.589 310.133 155.066C310.133 149.543 305.656 145.066 300.133 145.066C294.61 145.066 290.133 149.543 290.133 155.066C290.133 160.589 294.61 165.066 300.133 165.066Z"

fill="black" />

<path class="path"

d="M261 207H246.001C244.341 207 242.791 206.223 241.861 204.933C240.931 203.643 240.741 201.994 241.356 200.544L251.356 177L257 179.5L247.5 200.5L261 203V207Z"

fill="black" />

<path class="path"

d="M240.384 238.933H238.933L240.384 234H244.5C257.786 233.991 273.596 226.395 283 217L287.633 219.366C275.012 231.979 258.236 238.925 240.384 238.933Z"

fill="black" />

</svg>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put those codes given below.

body {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 }

.svg-container {
 width: 100%;
 text-align: center;
 }
 
 .svg-container svg{
     width:330px;
 }

.svg-container .path {
 display: none;
 }

body {

padding: 0;

margin: 0;

box-sizing: border-box;

}

.svg-container {

width: 100%;

text-align: center;

}

.svg-container svg{

width:330px;

}

.svg-container .path {

display: none;

}

function.js

Create a JavaScript file named ‘function.js‘ and put those codes given below.

const n = 0;
$(document).ready(_ => show(n))
let show = n => {
    $(`.path:eq(${n})`).fadeTo(100, 1, _ => {
        n++;
        const svgLen = $(".path").length;
        if (n < svgLen) show(n);
    });
}

const n = 0;

$(document).ready(_ => show(n))

let show = n => {

$(`.path:eq(${n})`).fadeTo(100, 1, _ => {

n++;

const svgLen = $(".path").length;

if (n < svgLen) show(n);

});

}

Thank you for visiting!

We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.

Keep coding, Keep debugging!

Live Demo Download Code

Animated SVG User Icon using HTML, CSS & JavaScript

Live Demo

Also Helpful –

Animated SVG User Icon using HTML, CSS & JavaScript

Like this:

Related

Leave a Reply Cancel reply

Animated SVG User Icon using HTML, CSS & JavaScript

Live Demo

Also Helpful –

Animated SVG User Icon using HTML, CSS & JavaScript

Share this:

Like this:

Related

Leave a Reply Cancel reply