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

Blurry Boxes

Blurry Boxes

By billbrown
A Pen by Vladislav

A Pen by Vladislav

By Pashechko
A Pen by recentstudent

A Pen by recentstudent

By RecentStudent
Starsweeper 0.5 beta

Starsweeper 0.5 beta

By godoy
login screen

login screen

By andrewrock
Ralph H. Baer Tribute page

Ralph H. Baer Tribute page

By GeorgeShkan
A Pen by Bryan Farris

A Pen by Bryan Farris

By bryanfarris
Portfolio2

Portfolio2

By Freedom41
© 2018 - Copyright CodeSeek.co
contact email