circle-stroke

_.md

[ 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/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg")

svg.append("text")
.text("gas")
.attr({
  x: 387,
  y: 83,
  fill: "#777"
});

svg.append("text")
.text("electric")
.attr({
  x: 178,
  y: 83,
  fill: "#777"
});

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

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

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

svg.append("circle")
.attr({
  r: 30,
  cx: 403,
  cy: 182,
  class: "circle-04"
});

svg.append("circle")
.attr({
  r: 18,
  cx: 403,
  cy: 147,
  class: "circle-05"
});

svg.append("circle")
.attr({
  r: 6,
  cx: 403,
  cy: 108,
  class: "circle-06"
});

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: 6;
  stroke: rgba(250,250,250,0.6);
  stroke-dasharray: 13;
}


/*ELECTRIC*/
.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,223,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 1500ms;
}



/*GAS*/
.circle-04 {
   fill: rgba(197,138,29,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 200ms;
}

.circle-05 {
   fill: rgba(118,140,43,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 500ms;
}


.circle-06 {
   fill: rgba(18,171,64,0.5);
  -webkit-animation-delay: 500ms;
  -webkit-animation-duration: 1500ms;
}