<h1>arrayToRawPath() GSAP Demo</h1>

<svg id="svg" viewBox="0 0 900 200">
  <path id="path" />
</svg>


<a href="https://greensock.com"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /></a>
html, body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
  font-family: "Signika Negative", sans-serif;
  text-align: center;
  background-color: #111;
}

h1 {
  margin: 20px;
  text-align: center;
}

svg {
  overflow: visible;
  height: 100%;
  max-width: 100%;
}

circle {
  fill: white;
}

path {
  stroke-width: 3px;
  stroke: #88ce02;
  fill: none;
}

.nav {
  display: flex;
  justify-content: center;
  padding: 0 0 20px 0;
  align-content: center;
}

.gsap-3-logo {
    width: 20vw;
    max-width: 150px;
    position: fixed;
    bottom: 15px;
    right: 15px;
}
View Compiled
gsap.registerPlugin(MotionPathPlugin);

let anchors = [{x:50, y:130}, {x:300, y:10}, {x:510, y:100}, {x:700, y:190}, {x:850, y:100}], // anchor coordinates (feel free to change these if you want)
    rawPath = MotionPathPlugin.arrayToRawPath(anchors, {curviness:0.5}),
    path = document.querySelector("#path"),
    svg = document.querySelector("#svg");

path.setAttribute("d", MotionPathPlugin.rawPathToString(rawPath));

// place the anchors as <circle> elements
for (let i = 0; i < anchors.length; i++) {
  createSVG("circle", svg, {cx: anchors[i].x, cy: anchors[i].y, r: 5});
}

// animate with drawSVG
gsap.from(path, {
  drawSVG:false, 
  duration: 4, 
  ease: "power1.inOut"
});

// helper function for creating SVG elements
function createSVG (type, container, attributes) {
    var element = document.createElementNS("http://www.w3.org/2000/svg", type),
        reg = /([a-z])([A-Z])/g,
        p;
    for (p in attributes) {
        element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
    }
    container.appendChild(element);
    return element;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://assets.codepen.io/16327/gsap-latest-beta.min.js
  2. https://assets.codepen.io/16327/MotionPathPlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js