Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
forked from anonymous's block: Spinning Ovals
license: mit |
Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: fresh block
forked from anonymous's block: Spinning Ovals
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
.stop-left { | |
stop-color: RGBA(0, 192, 191, 0.5); /* Indigo */ | |
} | |
.stop-right { | |
stop-color: RGBA(44, 161, 252, 0.5); /* Teal */ | |
} | |
.outlined { | |
fill: none; | |
stroke: url(#mainGradient); | |
stroke-width: 25; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var width = 960, | |
height = 500; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
var svgDefs = svg.append('defs'); | |
var mainGradient = svgDefs.append('linearGradient') | |
.attr('id', 'mainGradient'); | |
// Create the stops of the main gradient. Each stop will be assigned | |
// a class to style the stop using CSS. | |
mainGradient.append('stop') | |
.attr('class', 'stop-left') | |
.attr('offset', '0'); | |
mainGradient.append('stop') | |
.attr('class', 'stop-right') | |
.attr('offset', '1'); | |
var oval1 = svg.append("ellipse") | |
.classed("outlined", true) | |
.attr("cx", width / 2) | |
.attr("cy", height / 2) | |
.attr("rx", 110) | |
.attr("ry", 100); | |
var oval2 = svg.append("ellipse") | |
.classed("outlined", true) | |
.attr("cx", width / 2) | |
.attr("cy", height / 2) | |
.attr("rx", 110) | |
.attr("ry", 100); | |
d3.timer(function (elapsed) { | |
var speed = 1500, | |
offset = 75, | |
omega1 = elapsed % speed / speed * 360, | |
omega2 = elapsed % speed / speed * 360 - offset; | |
oval1.attr("transform", "rotate(" + omega1 + "," + width/2 + "," + height/2 + ")") | |
oval2.attr("transform", "rotate(" + omega2 + "," + width/2 + "," + height/2 + ")") | |
}) | |
</script> | |
</body> |