A Pen by Munsif Mujtaba

undefined

A concept of svg animations using html and css3 is used over here. The hover effect is added which fills out and in the entire stroke color.

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>A Pen by Munsif Mujtaba</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="Layer_1">
	<polyline fill="none" stroke="#cccccc" stroke-width="5" stroke-miterlimit="10" points="133.051,47.438 366.949,47.438 
		483.898,250 366.949,452.562 133.051,452.562 16.102,250 111.239,85.218 345.696,85.218 442.488,252.934 345.639,420.683 
		151.997,420.715 55.204,252.998 125.458,131.315 317.322,131.593 392.331,260.955 317.803,390.039 168.27,389.762 93.262,260.398 
		143.757,172.939 298.815,173.072 352.013,264.945 299.046,356.687 192.883,356.555 139.686,264.68 171.344,209.847 277.316,209.99 
		312.085,269.925 277.564,329.715 208.275,329.573 173.507,269.638 191.508,238.459 260.766,238.657 279.078,269.979 
		261.109,301.103 224.826,300.906 206.513,269.582 242.796,269.781 	"/>
</g>
<g id="Layer_2">
	<polyline class="path" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" points="133.051,47.438 366.949,47.438 
		483.898,250 366.949,452.562 133.051,452.562 16.102,250 111.239,85.218 345.696,85.218 442.488,252.934 345.639,420.683 
		151.997,420.715 55.204,252.998 125.458,131.315 317.322,131.593 392.331,260.955 317.803,390.039 168.27,389.762 93.262,260.398 
		143.757,172.939 298.815,173.072 352.013,264.945 299.046,356.687 192.883,356.555 139.686,264.68 171.344,209.847 277.316,209.99 
		312.085,269.925 277.564,329.715 208.275,329.573 173.507,269.638 191.508,238.459 260.766,238.657 279.078,269.979 
		261.109,301.103 224.826,300.906 206.513,269.582 242.796,269.781 	"/>
</g>
</svg>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/-__-/a-pen-by-munsif-mujtaba-aOjRjb */
svg {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}
.path {
  stroke-dasharray:6000;
  stroke-dashoffset:6000;
  transition:10s all;
}
svg:hover .path
{
stroke-dashoffset:0; 
}

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

phisi fms

phisi fms

By dmitrynizh
Weather App

Weather App

By cscouras
Son of Gradiator

Son of Gradiator

By jasesmith
Cutting Edge CSS with Antiquated HTML

Cutting Edge CSS with Antiquated HTML

By mrwweb
High fps test

High fps test

By Frestho
Mehrfarbige Headline

Mehrfarbige Headline

By hahnsinn
Material Design Lite components demo

Material Design Lite components demo

By Parth123
weather app fCC

weather app fCC

By gothamknight
© 2018 - Copyright CodeSeek.co
contact email