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

Pango - Intro Animation

Pango - Intro Animation

By ElHalWaNY
serial index replace

serial index replace

By refactorized
Angular Responsive Select Box

Angular Responsive Select Box

By derekshull
Simon Says Game FCC - by mate

Simon Says Game FCC - by mate

By sirmmate
Informatietechnologie 3: 0pdracht 2: Grid Layout

Informatietechnologie 3: 0pdracht 2: Grid Layout

By JeroenVanGrootel
From 1 to 1 million in CSS and 3d

From 1 to 1 million in CSS and 3d

By paulobrien
MTT NEW !!2

MTT NEW !!2

By RobertEatough
A Pen by Louis

A Pen by Louis

By louisweb
© 2018 - Copyright CodeSeek.co
contact email