SVG Path Element

_.md

[ Launch: SVG Path Element ] 4741243 by roundrobin
[ Launch: SVG Path Element ] 4737246 by roundrobin
[ Launch: Bootstrap Trib ] 4711978 by roundrobin
[ Launch: Tributary inlet ] 4711690 by roundrobin

config.json

{"description":"SVG Path Element","endpoint":"","display":"svg","public":true,"require":[{"name":"Helpers","url":"https://raw.github.com/roundrobin/svg-path-generator/master/svg-path-generator.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/3c4Zs4F.png"}

inlet.js

var svg = d3.select("svg");
var pattern_size = 105;
var w1 = pattern_size/2;
var defs = d3.select('svg').append('defs')
var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('pattermTransform','')
    .attr('height',pattern_size)
    .attr('width',pattern_size)
    .attr('patternUnits','userSpaceOnUse')


//Uses the svg-path-generator class
//https://github.com/roundrobin/svg-path-generator
var path = new Path(pattern)
path.el().attr({fill:'#535C77','stroke':'none'})
path.add(['m', w1, 0]);
path.add(['l', w1, w1]);
path.add(['l', -w1*2, 0]);
path.render();



var path = new Path(pattern)
path.el().attr({fill:'#6C9FCF','stroke':'none'})
var path = new Path(pattern)
path.el().attr({fill:'#535C77','stroke':'none'})
path.add(['m', w1, w1*2]);
path.add(['l', 100,-100]);
path.add(['l', 22,100]);
path.render();

path.render();

path.hidePoints()

d3.select('svg').append('rect')
        .attr('height',tributary.sh)
      .attr('width',tributary.sw)
  	  .attr('fill','url(#pattern1)')