circle-stroke

_.md

[ Launch: circle-stroke ] 7cfb943a666d9de38ff8 by ptvans
[ 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")

svg.append("circle")
.attr({
  r: 15,
  cx: 203,
  cy: 130,
  class: "circle-01"
});

svg.append("circle")
.attr({
  r: 10,
  cx: 203,
  cy: 160,
  class: "circle-02"
});

svg.append("circle")
.attr({
  r: 5,
  cx: 203,
  cy: 190,
  class: "circle-03"
});
svg.append("circle")
.attr({
  r: 15,
  cx: 203,
  cy: 220,
  class: "circle-01"
});

svg.append("circle")
.attr({
  r: 10,
  cx: 203,
  cy: 250,
  class: "circle-02"
});

svg.append("circle")
.attr({
  r: 5,
  cx: 203,
  cy: 280,
  class: "circle-03"
});
svg.append("circle")
.attr({
  r: 15,
  cx: 203,
  cy: 310,
  class: "circle-01"
});

svg.append("circle")
.attr({
  r: 10,
  cx: 203,
  cy: 340,
  class: "circle-02"
});

svg.append("circle")
.attr({
  r: 5,
  cx: 203,
  cy: 370,
  class: "circle-03"
});

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: 10;
    	stroke-dashoffset: 10; ;}
    to {
    	
    	fill-opacity: 1.0;
    	stroke-dasharray: 10;
    	stroke-dashoffset: 20; ;}
}

circle {
  stroke-width: 3;
  stroke: rgba(250,250,250,0.8);
  stroke-dasharray: 8;
}

.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;
}