Sectors
to generate a new and unique variation
Every variart piece is open source, you can see exactly how it is drawn from the code.
var colors = ['#5898c3', '#c0cee4', '#f6da4d', '#eeeeee', '#55a84b'];
var trackWidth = intVariable('trackWidth', 5, 20);
var centerX = intVariable('centerX', 0, width);
var centerY = intVariable('centerY', 0, height);
// from opsb, http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, arcSweep, 0, end.x, end.y
].join(" ");
return d;
}
for (var i = 0; i < width; i += trackWidth * 0.9){
for (var j = 0.0001; j <= 360; j += getRandomInt(0, 50)){
s.path(describeArc(centerX, centerY, i, j, 360))
.attr({stroke: colors[getRandomInt(0, colors.length - 1)], fill: 'none', strokeWidth: trackWidth});
}
}
Copyright © 2014–2025 Kevin Marsh. All rights reserved. Questions? Comments? hello@variart.io