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

AK Spring 2017 Style Guide

AK Spring 2017 Style Guide

By bonefold
Floating Crystals

Floating Crystals

By Fafnir
Open Source Coding Main Page

Open Source Coding Main Page

By NateBernstein
A Pen by Jose Rodriguez

A Pen by Jose Rodriguez

By joseluisrod
wiki search

wiki search

By hnsxxscyx
Vectors

Vectors

By markhkr
freeCodeCamp | Camper News

freeCodeCamp | Camper News

By taylor-jones
Cycling cursor trails (interactive)

Cycling cursor trails (interactive)

By zachernuk
© 2018 - Copyright CodeSeek.co
contact email