svg shapes

_.md

[ Launch: svg shapes ] 6691920 by georules

config.json

{"description":"svg shapes","endpoint":"","display":"svg","public":true,"require":[],"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/HBgj288.png","ajax-caching":true}

inlet.js

// http://www.w3.org/TR/SVG/shapes.html
var svg = d3.select("svg");

svg.append("rect").attr({
  x:100,
  y:100,
  width:100,
  height:100
}).style({
  fill:"#ff0000",
    stroke: "#0000ff",
  "stroke-width":"10"
})

svg.append("circle").attr({
  cx:300,
  cy:150,
  r:50
}).style({
  fill:"#00ff00",
  stroke: "#0000ff",
  "stroke-width":"10"
})

svg.append("ellipse").attr({
  cx:450,
  cy:150,
  rx:50,
  ry:100
}).style({
  fill:"#00FF00",
  stroke: "#0000ff",
  "stroke-width":"10"
})

svg.append("line").attr({
  x1:496,
  x2:150,
  y1:376,
  y2:301
}).style({
  stroke: "#000000",
  "stroke-width":"10"
})

svg.append("polyline").attr({
  points : '31,500 626,460 100,399 500,607'
}).style({
  fill:"#00ff00",
  stroke: "#000000",
  "stroke-width":"8.36"
})

svg.append("polygon").attr({
  points : '31,863 499,635 100,560 500,821'
}).style({
  fill:"#00ff00",
  stroke: "#000000",
  "stroke-width":"8.36"
})