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

jaquez quiz 1

jaquez quiz 1

By jkitchen2
qeelScylla

qeelScylla

By RoxaneEmerson
SURVEY

SURVEY

By blackbirdabhi
Sequential promises vs async/await

Sequential promises vs async/await

By ivanalejandro0
JavaScript: self-made animation

JavaScript: self-made animation

By gabrieleromanato
infografiche-01_animated

infografiche-01_animated

By ibanez182
Pomodoro Timer

Pomodoro Timer

By gstorbeck
A Pen by Tom

A Pen by Tom

By twwoodward
© 2018 - Copyright CodeSeek.co
contact email