Animated Svg

In this example below you will see how to do a Animated Svg with some HTML / CSS and Javascript

A new faded animation using html and css3 and stroke effect is added on the load of the file.

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>Animated Svg</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="500px"
	 height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="rectangle">
	<rect x="16.161" y="138.39" fill="#FFFFFF" stroke="#fafafa" stroke-miterlimit="10" width="467.678" height="246.017"/>
</g>
<g id="line">
	<line class="line1" fill="#FFFFFF" stroke="#fafafa" stroke-miterlimit="10" x1="250" y1="138.39" x2="16.161" y2="384.406"/>
	<line class="line2" fill="#FFFFFF" stroke="#fafafa" stroke-miterlimit="10" x1="360.436" y1="138.39" x2="126.597" y2="384.406"/>
	<line class="line3" fill="#FFFFFF" stroke="#fafafa" stroke-miterlimit="10" x1="483.839" y1="138.39" x2="250" y2="384.406"/>
</g>
<g id="Animation">
	<g>
		<path d="M101.406,286.986H89.559l-4.709-14.127H63.289l-4.452,14.127H47.284l21.008-62.193h11.516L101.406,286.986z
			 M81.354,262.381l-7.432-23.079l-7.285,23.079H81.354z"/>
		<path d="M107.292,286.986v-62.193h10.596l22.075,41.533v-41.533h10.118v62.193h-10.927L117.41,246.43v40.557H107.292z"/>
		<path d="M161.267,286.986v-62.193h10.891v62.193H161.267z"/>
		<path d="M182.385,286.986v-62.193h16.299l9.787,42.423l9.677-42.423h16.335v62.193h-10.118V238.03l-10.707,48.957h-10.486
			l-10.67-48.957v48.957H182.385z"/>
		<path d="M293.938,286.986h-11.848l-4.709-14.127h-21.56l-4.452,14.127h-11.552l21.007-62.193h11.516L293.938,286.986z
			 M273.887,262.381l-7.433-23.079l-7.284,23.079H273.887z"/>
		<path d="M306.264,286.986v-51.672h-16.005v-10.521h42.863v10.521h-15.968v51.672H306.264z"/>
		<path d="M339.818,286.986v-62.193h10.891v62.193H339.818z"/>
		<path d="M358.877,256.271c0-6.335,0.821-11.652,2.465-15.951c1.227-3.167,2.9-6.009,5.021-8.527
			c2.122-2.517,4.446-4.384,6.973-5.6c3.36-1.64,7.235-2.46,11.626-2.46c7.947,0,14.307,2.842,19.077,8.527
			c4.771,5.685,7.156,13.59,7.156,23.715c0,10.04-2.367,17.896-7.102,23.566c-4.733,5.671-11.062,8.506-18.984,8.506
			c-8.021,0-14.398-2.821-19.132-8.464C361.243,273.941,358.877,266.171,358.877,256.271z M370.098,255.848
			c0,7.042,1.411,12.381,4.231,16.015c2.821,3.634,6.402,5.451,10.743,5.451c4.342,0,7.904-1.803,10.688-5.409
			c2.784-3.605,4.176-9.015,4.176-16.227c0-7.127-1.355-12.444-4.065-15.951c-2.71-3.506-6.31-5.261-10.799-5.261
			c-4.488,0-8.106,1.775-10.854,5.324C371.472,243.34,370.098,248.692,370.098,255.848z"/>
		<path d="M419.805,286.986v-62.193H430.4l22.075,41.533v-41.533h10.118v62.193h-10.928l-21.744-40.557v40.557H419.805z"/>
	</g>
</g>
</svg>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/-__-/animated-svg-QbBJPw */
body {
  background-color: #313131;
}

svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

svg path {
  stroke: #fafafa;
  stroke-width:3px;
  stroke-dasharray:500;
  stroke-dashoffset:500;
  fill: none;
  opacity:0; 
  animation:3s fade-animate 1 forwards;
  animation-delay:4s;
}

svg .line1 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 4s line1-animate forwards;
}

svg .line3 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 4s line3-animate forwards;
}

svg .line2 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: 3s line2-animate forwards;
}

svg rect {
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: 8s rectangle-animate 1 forwards;
  transition: 10s all;
  stroke-width:4px;
}

@keyframes rectangle-animate {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes line1-animate {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dashoffset: -485;
  }
}

@keyframes line2-animate {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dasharray: 400;
    stroke-dashoffset: -360;
  }
}

@keyframes line3-animate {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dashoffset: -245;
  }
}
@keyframes fade-animate
{
  from
  {
    opacity:0;
    stroke-dashoffset:500;
    
    
  }
  to
  {
    stroke-dashoffset:0;
    opacity:1;
    
  }
}

Comments

More from -__-

A Pen by Munsif Mujtaba

A Pen by Munsif Mujtaba

By -__-
Svg Animation using Html and Css

Svg Animation using Html and Css

By -__-
Animated Svg

Animated Svg

By -__-
Animated Login Form

Animated Login Form

By -__-

You Might Also Like

A Pen by Gian Carlo

A Pen by Gian Carlo

By gccg
A Pen by joshua chacona

A Pen by joshua chacona

By jchacona
CSS Only Pendulum

CSS Only Pendulum

By eight
Pass/Fail Calculator

Pass/Fail Calculator

By cdlewis
Random Displacement of Data Node

Random Displacement of Data Node

By aaronchuo
ECards

ECards

By LeonardoRasile
Steve Jobs Tribute Page

Steve Jobs Tribute Page

By Branancy
My Wedding Reception Ideas Homepage

My Wedding Reception Ideas Homepage

By colangjas
© 2018 - Copyright CodeSeek.co
contact email