{
  "$type": "site.standard.document",
  "canonicalUrl": "https://oli.zilla.org.uk/2015/09/18/rainbow",
  "description": "Sketching with animated SVGs",
  "path": "/2015/09/18/rainbow",
  "publishedAt": "2015-09-18T00:00:00.000Z",
  "site": "at://did:plc:2ngsl5btroik454wzz7vpbzq/site.standard.publication/3mn67n3cam32w",
  "textContent": "<svg id=\"box\" width=\"100%\" height=\"100%\" viewBox=\"-50 -50 100 100\"></svg>\n<div class=\"controls\" style=\"opacity: 0.6; position:fixed; bottom:26px; width: 100%;\">\n  <input id=\"w\" type=\"range\" min=\"0\" max=\"200\" step=\"1\" value=\"2\" autofocus>\n  <input id=\"h\" type=\"range\" min=\"0\" max=\"200\" step=\"1\" value=\"200\">\n  <input id=\"x\" type=\"range\" min=\"-100\" max=\"100\" step=\"1\" value=\"-3\" >\n  <input id=\"y\" type=\"range\" min=\"-100\" max=\"100\" step=\"1\" value=\"-40\">\n</div>\n<script>\nvar count = 0\nfunction move () {\n  var step = Math.sin(count/600)\n  draw(step + 4)\n  count++\n  window.requestAnimationFrame(move)\n}\nwindow.requestAnimationFrame(move)\nfunction draw (step) {\n  var w = document.getElementById('w').value\n  var h = document.getElementById('h').value\n  var x = document.getElementById('x').value\n  var y = document.getElementById('y').value\n  var box = document.getElementById('box')\n  empty(box)\n  for (var i=0; i < (360/step); i++) {\n    var fill = getColour(i)\n    var rot = i * step\n    var shape = getRect(x, y, w, h, rot, fill)\n    box.appendChild(shape)\n  }\n}\nfunction getRect (x, y, w, h, rot, fill) {\n  return makeSVG('rect', {\n    transform: 'rotate('+rot+')',\n    fill: '#' + fill,\n    x: x,\n    y: y,\n    width: w,\n    height: h\n  })\n}\nfunction getColour (n) {\n  var gosh = [\n    'EFE61F',\n    'FBD614',\n    'F7A416',\n    'F17A16',\n    'E6471D',\n    'E7302A',\n    'DF0736',\n    'DF0559',\n    'E5177B',\n    'D80681',\n    'E5177B',\n    'D80681',\n    'BE107F',\n    '881F7E',\n    '5B2579',\n    '3D297E',\n    '193E8E',\n    '1D60AE',\n    '2784C9',\n    '169DD7',\n    '20A19D',\n    '209B6C',\n    '1A9D3F',\n    '60B236',\n    'B0CC22'\n    ]\n  var i = n % gosh.length\n  return gosh[i]\n}\nfunction empty (node) {\n  while (node.lastChild) {\n    node.removeChild(node.lastChild)\n  }\n}\n// stackoverflow yo: http://stackoverflow.com/a/3642265\nfunction makeSVG(tag, attrs) {\n  var el = document.createElementNS('http://www.w3.org/2000/svg', tag)\n  for (var k in attrs)\n    el.setAttribute(k, attrs[k]);\n  return el;\n}\n</script>\n<style>\n  p { margin:0; }\n</style>",
  "title": "Rainbow"
}