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
xxxxxxxxxx
<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>
https://d3js.org/d3.v4.min.js