Path

In this example below you will see how to do a Path with some HTML / CSS and Javascript

Exercise in using Snap svg to animate an SVG path

Thumbnail
This awesome code was written by jmanhart, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jmanhart ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Path</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
	<div>
		<svg class="svg" id="svgA" width="300" height="300" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet" />
	</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://oss.maxcdn.com/libs/snapsvg/0.1.0/snap.svg-min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jmanhart/path-OWyLOP */
html, body {
  height: 100%;
  width: 100%;
  font-family: "Open Sans", cursive;
  background: #45d045;
  background: linear-gradient(-135deg, #e4405f 0%, #ff92a7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg {
  padding: 1em;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}


/*Downloaded from https://www.codeseek.co/jmanhart/path-OWyLOP */
  var snapA = Snap("#svgA");

  // SVG A - "Squiggly" Path
  var myPathA = snapA.path("M1 1 H 300 V 300 H 1 L 1 1").attr({
    id: "squiggle",
    fill: "none",
    strokeWidth: "4",
    stroke: "#ffffff",
    strokeMiterLimit: "10",
    strokeDasharray: "9 9",
    strokeDashOffset: "988.01"
  });

  // SVG A - Draw Path
  var len = myPathA.getTotalLength();

  // SVG1 - Animate Path
  myPathA.attr({
	  stroke: '#fff',
	  strokeWidth: 6,
    fill: 'none',
    // Animate Path
    "stroke-dasharray": len + " " + len,
    "stroke-dashoffset": len
  }).animate({"stroke-dashoffset": 10}, 2500,mina.easeinout);

  // SVG A - Circle
  var CircleA = snapA.circle(20,20,10);
  CircleA.attr({
    fill: "#fff",
    stroke: "#fff",
    strokeWidth: 2
  });

  setTimeout( function() {
    Snap.animate(0, len, function( value ) {
       movePoint = myPathA.getPointAtLength( value );
       CircleA.attr({ cx: movePoint.x, cy: movePoint.y }); 
    }, 2500,mina.easeinout);
  });

Comments