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

A Pen by Zain

A Pen by Zain

By zainraza
Interactive circles

Interactive circles

By drewhaas
Side Menu and Navigation: Nightly

Side Menu and Navigation: Nightly

By xAlien95
Pure CSS Radial Chart

Pure CSS Radial Chart

By tadaima
A Pen by Kathleen

A Pen by Kathleen

By katbug
para practicar codefights

para practicar codefights

By ruthsalvadorz
A Pen by Baschte

A Pen by Baschte

By baschte
A Pen by Greg McAusland

A Pen by Greg McAusland

By gregmcausland
© 2018 - Copyright CodeSeek.co
contact email