Skip to content

Instantly share code, notes, and snippets.

@poezn
Created August 12, 2014 17:18
Show Gist options
  • Save poezn/3d22bc502536651d39e5 to your computer and use it in GitHub Desktop.
Save poezn/3d22bc502536651d39e5 to your computer and use it in GitHub Desktop.
circle-stroke
{"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}
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) }
});
/*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: 10;
stroke-dashoffset: 10; ;}
to {
fill-opacity: 1.0;
stroke-dasharray: 10;
stroke-dashoffset: 20; ;}
}
circle {
stroke-width: 4;
stroke: rgba(250,250,250,0.6);
stroke-dasharray: 13;
}
.circle-01 {
fill: rgba(284,10,29,0.5);
-webkit-animation-delay: 500ms;
-webkit-animation-duration: 200ms;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment