circle-stroke

_.md

[ Launch: circle-stroke ] b2de1ed485fbe175b8c7 by ptvans
[ Launch: circle-stroke ] 3d22bc502536651d39e5 by poezn
[ Launch: circle-stroke ] 180acd7175f2f5cb65d7 by ptvans
[ Launch: circle-stroke ] 692fe2d4a8af898c1c65 by ptvans
[ Launch: circle-stroke ] a6df5c97bbbcbb8e1685 by ptvans
[ Launch: circle-stroke ] ef1e761134829c8a7d7a by ptvans
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"circle-stroke","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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Fh6zC3A.gif","fullscreen":false,"ajax-caching":true}

inlet.js

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

var qScale = d3.scale.quantile()
.domain([0, 1])
.range(["-03", "-02", "-01"])

var scaleSize = d3.scale.sqrt()
.domain([0, 1])
.range([0, 10])

svg.selectAll("circle.circle-01")
.data(_.map(d3.range(507), function(d) { return Math.random() }))
.enter().append("circle")
.attr({
  r: function(d, i) { return scaleSize(d) },
  cx: function(d, i) {
    return 20 + (i % numPerRow) * 25
  },
  cy: function(d, i) {
    return 20 + Math.floor(i / numPerRow) * 25
  },
  "class": function(d) { return "circle" + qScale(d) }
});

style.css

/*color*/
circle {
    -webkit-animation: colorshift ease-in-out infinite alternate; /* Chrome, Safari, Opera */
}

/* Chrome, Safari, Opera */
@-webkit-keyframes colorshift {
    from {
    	fill-opacity: 0.8;
    	stroke-dasharray: 6;
    	stroke-dashoffset: 10; ;}
    to {
    	
    	fill-opacity: 1.0;
    	stroke-dasharray: 6;
    	stroke-dashoffset: 20; ;}
}

circle {
  stroke-width: 3;
  stroke: rgba(50,50,50,0.6);
  stroke-dasharray: 10;
}

.circle-01 {
   fill: rgba(284,10,29,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 300ms;
}

.circle-02 {
   fill: rgba(173,10,145,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 500ms;
}


.circle-03 {
   fill: rgba(69,10,159,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 1500ms;
}