Sidebar Icon | The Icon Interaction

 Sidebar icon with animation || Icon interaction HTML 

Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you.

#CODE : 

     <!DOCTYPE html>

<html>

<head>

<title>Icon menu</title>

<style type="text/css">

body{

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

margin: 0;

font-family: sans-serif;

font-weight: bold;

flex-direction: column;

}

p{

font-size: 2.5rem;

text-transform: uppercase;

}

svg{

stroke-linecap: round;

stroke-linejoin: round;

transition: transform 400ms;

cursor: pointer;

-webkit-tap-highlight-color:rgba(0,0,0,0);

}

svg path{

fill: none;

stroke: black;

stroke-width:2px;

transition:stroke-dasharray 400ms,stroke-dashoffset 400ms;

}

svg.active{

transform: rotate(-45deg);

}

#top{

stroke-dasharray: 59, 158.08;

}

#bottom{stroke-dasharray: 59, 218.95;

}

svg.active #top{

stroke-dashoffset:-110px;

}

svg.active #bottom{

stroke-dashoffset:-151px;

}

</style>

</head>

<body>

<svg viewBox="0 0 64 81"

onclick="this.classList.toggle('active')"

width="100">

<g transform="matrix(1,0,0,1,-319.976,-199.747)">

        <g transform="matrix(1,0,0,1,0.158581,0.510367)">

          <path

            d="M320.317,219.335L379.52,219.335C379.52,219.335 380.06,199.994 350.531,199.737C350.368,199.735 349.922,259.74 349.922,259.74"

            id="top"

          />

        </g>

        <g transform="matrix(1,0,0,1,0.158581,0.510367)">

          <path d="M320.317,239.75L379.527,239.75" id="middle" />

        </g>

        <g transform="matrix(1,0,0,1,0.158581,0.510367)">

          <path

            d="M320.317,259.74L379.527,259.74C388.512,217.303 377.34,199.617 350.448,199.737L349.922,279.557"

            id="bottom"

          />

        </g>

      </g>

</svg>

<p>Click on the menu</p>

</body>

</html>

#OUTPUT : 

   

After Clicking