Create SVG Animated circle

Hello friends,

Today in this blog you’ll learn how to create a SVG Animated circle using JavaScript, HTML & CSS. Earlier I have shared a blog on 3D image slider using HTML, CSS.

What is SVG?

SVG is Scalable Vector Graphics. It used to define graphics for the web. SVG is a language for describing 2D graphics in XML. SVG is SML based, which means that every element is available within the SVG DOM.

You can attach JavaScript event handler for an element. In SVG, each drawn shape is remember as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape. It is resolution independent, support for event handler.

In that project we create menu bar and SVG animated circle for the introduce team member. we create one circle. in that circle we create 5 section. whenever we click the particular dote it’s change with background image.

See also  Pure CSS Responsive Horizontal Accordion

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title>SVG Animation</title>
        <link rel="stylesheet" href="svg.css"> 
     </head>
     <body>
        <div id="main">
            <div class="navbar">
                <div class="logo">
                    <img src="./codeithub.png" alt="">
                </div>
                <nav>
                    <ul>
                        <li>Studio</li>
                        <li>Positon</li>
                        <li>Contact</li>
                        <li>Media</li>
                    </ul>
                </nav>  
            </div>
            <div class="circle-box">
                <svg height="402" width="402">
                    <circle r="200" cx="201"  cy="201" stroke-width="1px" stroke="gray" fill="none" />
                </svg>
                <svg height="402" width="402">
                    <circle r="200" cx="201"  cy="201" stroke-width="1px" stroke="#fff" fill="none" id="svgCircle" />
                </svg>
                <div>
                    <span id="step1"> </span>
                    <span id="step2"></span>
                    <span id="step3"></span>
                    <span id="step4"></span>
                    <span id="step5"></span>
                </div>
                <div class="user-box" id="userBox">
                    <div class="user">
                        <img src="IMG/person-1.jpg" alt="">
                        <h1>Code IT Hub</h1>
                        <p>Work on HTML,CSS,JavaScript, WordPress, Python, </p>
                        <div class="social-icon">
                            <img src="IMG/facebook.png" alt="">
                            <img src="IMG/instagram.png" alt="">
                            <img src="IMG/linkedin.png" alt="">
                            <img src="IMG/twitter.png" alt="">
                        </div>
                    </div>
                    <div class="user">
                        <img src="IMG/person-2.jpg" alt="">
                        <h1> Shreya Malik</h1>
                        <p>Work as DataScientist. In Amazon Web Services Banglore.</p>
                        <div class="social-icon">
                            <img src="IMG/facebook.png" alt="">
                            <img src="IMG/instagram.png" alt="">
                            <img src="IMG/linkedin.png" alt="">
                            <img src="IMG/twitter.png" alt="">
                        </div>
                    </div>
                    <div class="user">
                        <img src="IMG/person-3.jpg" alt="">
                        <h1> John Doe</h1>
                        <p>Work as DataScientist. In Amazon Web Services Banglore.</p>
                        <div class="social-icon">
                            <img src="IMG/facebook.png" alt="">
                            <img src="IMG/instagram.png" alt="">
                            <img src="IMG/linkedin.png" alt="">
                            <img src="IMG/twitter.png" alt="">
                        </div>
                    </div>
                    <div class="user">
                        <img src="IMG/person-4.jpg" alt="">
                        <h1> Ranu Singh</h1>
                        <p>Work as DataScientist. In Amazon Web Services Banglore.</p>
                        <div class="social-icon">
                            <img src="IMG/facebook.png" alt="">
                            <img src="IMG/instagram.png" alt="">
                            <img src="IMG/linkedin.png" alt="">
                            <img src="IMG/twitter.png" alt="">
                        </div>
                    </div>
                    <div class="user">
                        <img src="IMG/person-5.jpg" alt="">
                        <h1> Naaz Khana</h1>
                        <p>Work as DataScientist. In Amazon Web Services Banglore.</p>
                        <div class="social-icon">
                            <img src="IMG/facebook.png" alt="">
                            <img src="IMG/instagram.png" alt="">
                            <img src="IMG/linkedin.png" alt="">
                            <img src="IMG/twitter.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </body>
</html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
*{
    margin:0;
    padding:0;
    font-family:sans-serif;
}
#main{
    width:100%;
    height:100vh;
    background-position: center;
    position: relative;
    background-size: cover;
    transition:1.5s;
  
}
.navbar{
    width: 85%;
    margin:auto;
    display:flex;
    align-items: center;
    padding-top:30px;
}
.logo{
    flex-basis: 20%;
}
.logo img{
    width:160px;
    cursor: pointer;
}
nav{
    flex:1;
    text-align:right;
}
nav ul li{
    list-style: none;
    color:#fff;
    display:inline-block;
    margin-left:50px;
    cursor:pointer;
}
.circle-box{
    position: absolute;
    height:450px;
    width:450px;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    overflow: hidden;
}
svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
#svgCircle{
    stroke-dasharray: 1256;
    stroke-dashoffset:1256;
    transition:1s;
}
span{
    position: absolute;
    height:10px;
    width:10px;
    background:#fff;
    border-radius:50%;
    display:block;
    cursor: pointer;
    z-index: 10;
}
#step1{
    right:160px;
    bottom:30px;
}
#step2{
    left:56px;
    bottom:106px;
}
#step3{
    left:60px;
    top:100px;
}
#step4{
   right:156px;
   top:30px;
}
#step5{
    right:20px;
    top:220px;
}
.user-box{
    width:350px;
    position: absolute;
    top:100px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    color:#fff;
    transition: 1s;
}
.user img{
    width:80px;
    margin-bottom: 10px;
    border-radius: 50%;
}
.social-icon img{
    width:20px;
    border-radius: 0;
    padding:5px 10px;
    cursor: pointer;
}
.user-box p{
    margin:20px;
    color:#c0c0c0;
    line-height: 25px;
}
.user{
    height:450px;
}
<script>
            var svgCircle = document.getElementById("svgCircle");
            var step1 = document.getElementById("step1");
            var step2 = document.getElementById("step2");
            var step3= document.getElementById("step3");
            var step4 =document.getElementById("step4");
            var step5 =document.getElementById("step5");
            var main =document.getElementById("main");
            var userBox =document.getElementById("userBox");
            

            main.style.backgroundImage="url(IMG/img-1.jpg)";

            step1.addEventListener('click',()=>{
                svgCircle.style.strokeDashoffset="1004";
                main.style.backgroundImage="url(IMG/img-2.jpg)";
                userBox.style.top="-350px";

            })
            step2.addEventListener('click',()=>{
                svgCircle.style.strokeDashoffset="753";
                main.style.backgroundImage="url(IMG/img-3.jpg)";
                userBox.style.top="-800px";


            })
            step3.addEventListener('click',()=>{
                svgCircle.style.strokeDashoffset="502";
                main.style.backgroundImage="url(IMG/img-4.jpg)";
                userBox.style.top="-1250px";
            })
            step4.addEventListener('click',()=>{
                svgCircle.style.strokeDashoffset="251";
                main.style.backgroundImage="url(IMG/img-5.jpg)";
                userBox.style.top="-1700px";


            })
            step5.addEventListener('click',()=>{
                svgCircle.style.strokeDashoffset="0";
                main.style.backgroundImage="url(IMG/img-1.jpg)";
                userBox.style.top="100px";


            })
        </script>

Leave a Reply

Your email address will not be published. Required fields are marked *