SVG Path Interpolation with RaphaelJS

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

Demo of using RaphaelJS's interpolation between two SVG paths using the .animate method.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>SVG Path Interpolation with RaphaelJS</title>
  
    <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 id="paper"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/1Marc/svg-path-interpolation-with-raphaeljs-bgHJk */
#paper {
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
}

/*Downloaded from https://www.codeseek.co/1Marc/svg-path-interpolation-with-raphaeljs-bgHJk */
// converted SVG to RaphaelJS with rappar.js
// https://github.com/DmitryBaranovskiy/rappar
var paper = Raphael('paper'),
    minnesota = "M9.138,75.551L8.68,67.092l-1.829-7.316L5.022,46.287l-0.458-9.831l-1.829-3.429l-1.6-5.03V17.709l0.686-3.887L0,8.371l30.133,0.035l0.323-8.245L31.103,0l2.264,0.485l1.939,0.808l0.809,5.497l1.455,6.143l1.616,1.617h4.85l0.324,1.455l6.305,0.323v2.102h4.85l0.323-1.293l1.132-1.132l2.263-0.646l1.293,0.97h2.91l3.88,2.587l5.335,2.425l2.425,0.485l0.485-0.97l1.455-0.485l0.484,2.91l2.587,1.293l0.485-0.485l1.293,0.162v2.102l2.586,0.97h3.072l1.616-0.809l3.233-3.233l2.587-0.485l0.808,1.778l0.485,1.293h0.97l0.97-0.808l8.892-0.323l1.778,3.071h0.646l0.714-1.084l4.439-0.371l-0.611,2.28l-3.939,1.837l-9.245,4.061l-4.775,2.007l-3.071,2.587l-2.425,3.557l-2.264,3.88l-1.778,0.808l-4.526,5.011l-1.293,0.162l-4.328,2.757l-2.463,3.205l-0.229,3.191l0.095,8.043l-1.376,1.689l-5.082,3.76l-2.229,5.982l2.871,2.233l0.681,3.228l-1.855,3.238l0.171,3.748l0.369,6.73l3.027,3.002h3.329l1.892,3.133l3.379,0.504l3.859,5.671l7.087,4.116l2.144,2.875l0.671,6.439l-81.212,1.146l-0.338-35.677l-0.457-2.973l-4.115-3.429l-1.143-1.829v-1.601l2.058-1.601l1.371-1.371L9.138,75.551L9.138,75.551z",
    wisconson = "M83.906,93.687l-0.067-3.157l-1.179-4.527l-0.646-6.143l-1.132-2.425l0.97-3.072l0.809-2.91l1.455-2.586l-0.647-3.395l-0.646-3.557l0.485-1.778l1.939-2.425l0.162-2.748L84.6,53.671l0.646-2.586l-0.452-4.171l2.748-5.658l2.91-6.79l0.162-2.263l-0.323-0.97l-0.809,0.485l-4.203,6.305l-2.748,4.042l-1.94,1.778l-0.809,2.263l-1.954,0.808l-1.132,1.94l-1.455-0.323l-0.162-1.778l1.294-2.425l2.102-4.688l1.778-1.617l0.99-2.358l-2.561-1.901l-1.975-10.367l-3.548-1.342l-1.945-2.308l-12.13-2.722l-2.876-1.012l-8.213-2.167l-7.918-1.159l-3.766-5.13l-0.75,0.554l-1.198-0.162l-0.646-1.131l-1.334,0.296l-1.132,0.162l-1.778,0.97l-0.97-0.647l0.646-1.94l1.939-3.071l1.132-1.132L30.282,0l-2.102,0.808l-2.91,1.94l-7.437,3.233l-2.91,0.646l-2.909-0.485l-0.982-0.878L8.916,8.1l-0.229,2.744v8.459l-1.144,1.601l-5.258,3.886L0,30.733l0.457,0.229l2.515,2.058l0.686,3.201l-1.829,3.201v3.887l0.458,6.63l2.972,2.972h3.43l1.829,3.201l3.429,0.458l3.887,5.715l7.087,4.115l2.058,2.744l0.915,7.43l0.686,3.315l2.286,1.601l0.229,1.372l-2.058,3.429l0.229,3.201l2.515,3.887l2.515,1.143l2.972,0.458l1.343,1.38L83.906,93.687L83.906,93.687z",
    path = paper.path(wisconson);

path.transform('S' + [3, 3, 0, 0]);
path.attr({ fill: "#555" });

function animate(p, d, e, cb) {
  path.animate({path: p}, d, e, cb);
}

function play() {
  animate(minnesota, 3500, 'easeInOut',
  function(){
    setTimeout(function(){
      animate(wisconson, 2000, 'easeInOut', play);
    }, 1000);
  });
}

play();

Comments