- 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>'

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)
  });
  
});