- for (var y = 1; y < 6; y++)
!= '<svg viewBox="-50 -50 100 100">'
- for (var x = 1; x < 6; x++)
circle&attributes({
"cx": 0,
"cy": 0,
"r": 60-(x*10)
})
!= '</svg>'
View Compiled
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
padding: 0 50px;
}
svg {
flex: 1;
padding: 20px;
}
// TODO: Rewrite this with modern stuff like not-jquery and fetch and stuff.
console.clear();
var rand = Math.floor(Math.random() * (50 - 1)) + 1;
// console.log("Offset will be: " + rand);
$.ajax({
// headers: {
// "x-requested-with": "XMLHttpRequest"
// },
url: "https://www.colourlovers.com/api/palettes/top?format=json&numResults=5&resultOffset=" + rand,
jsonp: true
}).done(function(data) {
$("svg").each(function(x) {
$(this)
.find("circle")
.each(function(y) {
$(this).attr("fill", "#" + data[x].colors[y]);
});
console.log("Palette #" + x + ": " + data[x].colors)
});
});
This Pen doesn't use any external CSS resources.