SVG Path Banner

_.md

[ Launch: SVG Path Test 1 ] 4737144 by roundrobin
[ Launch: SVG Path Element ] 4721053 by roundrobin
[ Launch: Bootstrap Trib ] 4711978 by roundrobin
[ Launch: Tributary inlet ] 4711690 by roundrobin

config.json

{"description":"SVG Path Banner","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/SAt0XUm.png"}

inlet.js

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


//Uses the svg-path-generator class
//https://github.com/roundrobin/svg-path-generator

var x= 200,y= 100;
var unit = 239;
var edges = 9;
var index = 1;
var red1 = 4;
var red2 = 2;
var height = 54;
var path = new Path(svg)

var path = new Path(svg)

path.add(['m',x,y + height/2]);
path.add(['q',-height/2,0,-height,-19]);

path.add(['q',height/2,27,height/2, height/2]);
path.add(['q',-height/2,0,-height, -16]);

path.add(['q',height/1.28,47,height*2, height]);
path.add(['v',-height])

path.el().attr({fill:'#4D4B4B',stroke:'none','transform':'translate('+[0,0]+')scale(1,'+(1)+')'})
path.render();

var path = new Path(svg)



path.add(['m',x,y]);


path.add(['c',unit/red2, unit/red1, unit/red2, -(unit/red1),unit, 0]);
path.add(['v',height]);
path.add(['c',-unit/red2, -(unit/red1),-unit/red2, (unit/red1),-unit, 0]);
path.add(['z']);
path.render();
path.el().attr({fill:'#616161',stroke:'none'})

//path.render();
path.hidePoints()
path.hidePoints()