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

weatherApp

weatherApp

By alevis
Basic closure

Basic closure

By jeromeelf
BSG II

BSG II

By ztt628
Definition List w/ Border Using :before

Definition List w/ Border Using :before

By jasonadelia
Giphy

Giphy

By vishwasg
Wikipedia Viewer

Wikipedia Viewer

By erinhalbmaier
Read Recommendations (CAT) 19-07-2015

Read Recommendations (CAT) 19-07-2015

By clm
ribbons

ribbons

By Vampireos
© 2018 - Copyright CodeSeek.co
contact email