compose + decompose path

_.md

[ Launch: Another Inlet ] 4716899 by enjalot

config.json

{"description":"compose + decompose path","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.5835087719298245,"fullscreen":false,"thumbnail":"http://i.imgur.com/uhRVt1h.png"}

inlet.js

//http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

function move(p) {
  return [" M", p.x, p.y].join(" ");
}

function lineSeg(p) {
  return [" L", p.x, p.y].join(" ");
}

function arcSeg(p) {
  //A r r rotation large-arc sweep x y
  return [" A", p.r, p.r, p.rot, p.c, p.d, p.x, p.y].join(" ");
}

function bezSeg(p) {
  //x1,y1 and x2,y2 are control points
  return [" C", p.x1, p.y1, p.x2, p.y2, p.x, p.y].join(" ");
}
function smoothSeg(p) {
  //x2,y2 is the control point
  return [" S", p.x2, p.y2, p.x, p.y].join(" ");
}

function qbezSeg(p) {
  //x1 y1 x y
  return [" Q", p.x1, p.y1, p.x, p.y].join(" ");
}
function qsmoothSeg(p) {
  //x y
  return [" T", p.x, p.y].join(" ");
}


var pathD = move({x: 141, y: 79})
    + lineSeg({x: 259, y: 100})
    + lineSeg({x: 279, y: 236})
    //+ arcSeg({x: 444, y:253, r: 117, rot: 0, c: 0, d: 0})
    + bezSeg({x: 479, y: 400, x1: 437, y1: 116, x2: 669, y2: 289})
    + smoothSeg({x: 244, y: 376, x2: 300, y2: 300})
    + qbezSeg({x: 94, y: 475, x1: 178, y1: 907})
    + qsmoothSeg({x: 300, y:327})
    
    //console.log(pathD)

var svg = d3.select("svg");

var path = svg.append("path")
  .attr("d", pathD)
  .style({
    fill: "none",
    stroke: "#000000",
    "stroke-width": 12,
    "stroke-linecap": "round",
    "stroke-linejoin": "round"
  })

var seglist = path.node().pathSegList;
//console.log(seglist);
var segPathData = d3.range(seglist.numberOfItems).map(function(d, i){
  var item = seglist.getItem(i); 
  return item;
});
console.log("list:", segPathData);