Another Inlet

_.md

[ Launch Inlet ]
Gist #4349862 [ Launch Inlet ]
Gist #4349806 [ Launch Inlet ]
Gist #4349788 [ 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 strokeWidth = 0.005
    
var patternHeight = 0.1;
var patternWidth = patternHeight;
    
var radius = 193;
    
var pattern = defs.append("pattern")
//    .attr("patternUnit","userSpaceOnUse")
    .attr("id","stripes-vertical")
    .attr("x",0)
    .attr("y",0)
  .attr("width",patternWidth)
    .attr("height",patternHeight)  
   .attr("patternUnit","objectBoundingBox")
   .attr("patternContentUnits","objectBoundingBox") 
    
pattern.append('svg:line')
.attr("stroke","#FF7000")
.attr("stroke-width",strokeWidth)
.attr("fill","none")
.attr("x1",0)
.attr("x2",0.2)
.attr("y1",0.1)
.attr("y2",-0.1);
    
var pattern2 = defs.append("pattern")
//    .attr("patternUnit","userSpaceOnUse")
    .attr("id","stripes-horizontal")
    .attr("x",0)
    .attr("y",0)
    .attr("width",patternWidth)
    .attr("height",patternHeight)  
   .attr("patternUnit","objectBoundingBox")
   .attr("patternContentUnits","objectBoundingBox") 
    
pattern2.append('svg:line')
.attr("stroke","#0007AF")
.attr("stroke-width",strokeWidth)
.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", radius)
  .attr("cx", 677)
  .attr("cy", 284)
  .style("fill", "url(#stripes-horizontal)")
  .style("stroke", "#5B6799")
  .style("stroke-width", 0);


svg.append("circle")
  .attr("r", radius)
  .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", "#FFFFFF")
.attr("x", 549)
.attr("y", 338)
.attr("font-size", 100)
.attr("font-family", "Arial")
.attr("font-weight", "bold")  
.attr("text-anchor", "start")
.style("stroke", "#94AF63")
 .style("stroke-width", 4);