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

multilevel menu with only ul li

multilevel menu with only ul li

By aftabzaman
Starter CP

Starter CP

By francoiscoron
Jamie: Positioning Lesson

Jamie: Positioning Lesson

By RedSquirrelious
Infinitely unfolding triangles

Infinitely unfolding triangles

By caleboleary
Styles of https://mixpanel.com/?from=partner

Styles of https://mixpanel.com/?from=partner

By parnas
Moment.js scratchpad

Moment.js scratchpad

By jdboyd
Missing pointercancel on drag in Chrome desktop

Missing pointercancel on drag in Chrome desktop

By appsforartists
HTML5 Form email

HTML5 Form email

By ayavi
© 2018 - Copyright CodeSeek.co
contact email