Another Inlet

_.md

[ Launch Inlet ]
Gist #4349651 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"Another Inlet","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},"test.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.7,"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,"hidepanel":false}

inlet.js

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

var defs = svg.append("defs")
//.attr("patternUnit","objectBoundingBox")
//.attr("patternContentUnits","objectBoundingBox")
    
var pattern = defs.append("pattern")
//    .attr("patternUnit","userSpaceOnUse")
    .attr("id","stripes-vertical")
    .attr("x",0)
    .attr("y",0)
  .attr("width",0.1)
    .attr("height",0.1)  
   .attr("patternUnit","objectBoundingBox")
   .attr("patternContentUnits","objectBoundingBox") 
    
pattern.append('svg:line')
.attr("stroke","#140505")
.attr("stroke-width",0.03)
.attr("fill","none")
.attr("x1",0.11)
.attr("x2",0.2)
.attr("y1",0)
.attr("y2",1);
    
var pattern2 = defs.append("pattern")
//    .attr("patternUnit","userSpaceOnUse")
    .attr("id","stripes-horizontal")
    .attr("x",0)
    .attr("y",0)
    .attr("width",0.1)
    .attr("height",0.1)  
   .attr("patternUnit","objectBoundingBox")
   .attr("patternContentUnits","objectBoundingBox") 
    
pattern2.append('svg:line')
.attr("stroke","#140505")
.attr("stroke-width",0.03)
.attr("fill","none")
.attr("x1",0)
.attr("x2",1)
.attr("y1",0)
.attr("y2",1);
    
	
//   x="0" y="0" width="6" height="6"
    
    
svg.append("circle")
  .attr("r", 200)
  .attr("cx", 677)
  .attr("cy", 284)
  .style("fill", "url(#stripes-horizontal)")
  .style("stroke", "#5B6799")
  .style("stroke-width", 0);


svg.append("circle")
  .attr("r", 200)
  .attr("cx", 898)
  .attr("cy", 284)
  .style("fill", "url(#stripes-vertical)")
  .style("fill-opacity", "0.9")
  .style("stroke", "#0033FF")
  .style("stroke-width", 0);



svg.append('svg:text')
.text(function(d,i){ return "Hello World";})
.attr("fill", "#000000")
.attr("x", 549)
.attr("y", 338)
.attr("font-size", 100)
.attr("font-family", "Arial")
.attr("text-anchor", "start");