Skip to content

Instantly share code, notes, and snippets.

@ptvans
Created August 9, 2014 01:26
Show Gist options
  • Save ptvans/692fe2d4a8af898c1c65 to your computer and use it in GitHub Desktop.
Save ptvans/692fe2d4a8af898c1c65 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")
svg.append("circle")
.attr({
r: 105,
cx: 203,
cy: 131,
class: "circle-01"
});
svg.append("circle")
.attr({
r: 54,
cx: 203,
cy: 131,
class: "circle-02"
});
svg.append("circle")
.attr({
r: 12,
cx: 203,
cy: 131,
class: "circle-03"
});
/*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: 12;
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