Svg Animation using Html and Css

In this example below you will see how to do a Svg Animation using Html and Css with some HTML / CSS and Javascript

Stroke properties used over here. Dashed array and offset used for the animation purpose. Html code for drawing out the Svg and then applied animation using the Css Code.

Thumbnail
This awesome code was written by -__-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -__- ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Svg Animation using Html and Css</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px"
	 height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
<g id="background">
	<ellipse class="circle" fill="#FFFFFF" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="125" cy="125" rx="120.818" ry="120.34"/>
</g>
<g id="title">
	<g>
		<path d="M35.235,136.207l12.853-1.379c0.773,4.758,2.343,8.252,4.708,10.482c2.365,2.232,5.556,3.348,9.572,3.348
			c4.254,0,7.46-0.992,9.618-2.979c2.157-1.984,3.235-4.305,3.235-6.963c0-1.705-0.454-3.158-1.361-4.355
			c-0.908-1.197-2.492-2.24-4.752-3.125c-1.547-0.59-5.073-1.641-10.577-3.15c-7.081-1.935-12.049-4.313-14.906-7.135
			c-4.017-3.969-6.024-8.809-6.024-14.518c0-3.674,0.944-7.111,2.833-10.31c1.889-3.199,4.611-5.635,8.167-7.308
			c3.555-1.673,7.847-2.51,12.875-2.51c8.212,0,14.393,1.985,18.543,5.955c4.15,3.97,6.33,9.269,6.538,15.896l-13.21,0.64
			c-0.565-3.707-1.778-6.373-3.637-7.997s-4.649-2.436-8.368-2.436c-3.838,0-6.843,0.87-9.015,2.608
			c-1.399,1.116-2.098,2.608-2.098,4.479c0,1.707,0.654,3.167,1.964,4.38c1.666,1.542,5.712,3.15,12.139,4.823
			c6.426,1.673,11.179,3.404,14.259,5.192c3.079,1.789,5.489,4.232,7.229,7.333c1.741,3.102,2.611,6.932,2.611,11.492
			c0,4.133-1.042,8.006-3.124,11.613c-2.083,3.609-5.028,6.291-8.836,8.047c-3.809,1.754-8.554,2.633-14.236,2.633
			c-8.271,0-14.623-2.107-19.056-6.324C38.745,150.422,36.098,144.277,35.235,136.207z"/>
		<path d="M116.235,159.682L92.85,87.535h14.325l16.557,53.396l16.021-53.396h14.013l-23.43,72.146H116.235z"/>
		<path d="M190.942,133.156V121h28.473v28.74c-2.767,2.953-6.776,5.553-12.027,7.801c-5.252,2.246-10.57,3.371-15.954,3.371
			c-6.844,0-12.809-1.584-17.896-4.75c-5.087-3.166-8.911-7.693-11.469-13.582c-2.56-5.889-3.838-12.295-3.838-19.218
			c0-7.513,1.428-14.189,4.284-20.03c2.855-5.839,7.035-10.317,12.54-13.435c4.195-2.395,9.417-3.592,15.664-3.592
			c8.123,0,14.467,1.878,19.034,5.635c4.566,3.757,7.505,8.949,8.814,15.576l-13.121,2.707c-0.923-3.543-2.655-6.34-5.199-8.391
			c-2.544-2.05-5.72-3.076-9.528-3.076c-5.771,0-10.361,2.018-13.768,6.053c-3.407,4.035-5.109,10.023-5.109,17.962
			c0,8.563,1.725,14.986,5.177,19.268c3.451,4.281,7.973,6.422,13.566,6.422c2.768,0,5.541-0.598,8.323-1.797
			c2.781-1.197,5.169-2.648,7.163-4.355v-9.152H190.942z"/>
	</g>
</g>
</svg>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-__-/svg-animation-using-html-and-css-waxYbX */
svg 
{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
} 
body 
{
  background-color:#444;
}
svg .circle 
{
  fill : none;
  stroke-width:5px;
  stroke:white;
  opacity:0;
  stroke-dasharray:40;
  stroke-dashoffset:800;
  animation:4s circle-outline infinite alternate;
}
svg path 
{
  fill:black;
  stroke:#fafafa;
  stroke-width:3px;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  opacity:0;
  animation:4s outline infinite alternate;
}
@keyframes outline 
{
  from
  {
    stroke-dashoffset:400;
    opacity:0;
  }
  to
  {
    stroke-dashoffset:0;
    opacity:1;
  }
}
@keyframes circle-outline 
{
  from
  {
    stroke-dashoffset:800;
    opacity:0;
  }
  to
  {
    stroke-dashoffset:0;
    opacity:1;
  }
}







Comments