phi-line · May 9, 2018 23:29 · May 9, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,4 @@
+<html>
+<body>
+  <canvas></canvas>
+</body>
diff --git a/quadratic-mesh-circle.markdown b/quadratic-mesh-circle.markdown
@@ -0,0 +1,7 @@
+Quadratic Mesh Circle
+---------------------
+
+
+A [Pen](https://codepen.io/phi_line/pen/gzvpqL) by [phi-](https://codepen.io/phi_line) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/phi_line/pen/gzvpqL/license).
diff --git a/script.js b/script.js
@@ -0,0 +1,66 @@
+const SPEED = 0.001;
+const SIZE = 1000;
+
+const SATURATION = 50;
+const LIGHTNESS = 60;
+const COLOR_START = 150;
+const COLOR_END = 300;
+
+const canvas = document.querySelector('canvas');
+const c = canvas.getContext('2d');
+
+function resizeCanvas() {
+  let body = document.querySelector('body');
+  let w = window.getComputedStyle(body).getPropertyValue('width');
+  let h =     window.getComputedStyle(body).getPropertyValue('height');
+  canvas.width = parseInt(h, 10);
+  canvas.height = parseInt(h, 10);
+}
+resizeCanvas();
+
+canvas.addEventListener("resize", resizeCanvas);
+
+canvas.addEventListener("click", e => {
+  c.clearRect(0, 0, canvas.width, canvas.height);
+})
+
+function penDown(x, y, t) {  
+  c.beginPath();
+
+  c.moveTo(x, y);
+
+  c.quadraticCurveTo(x*Math.sin(Math.PI*t), y*Math.cos(Math.PI*t),canvas.width -x ,canvas.height - y);
+
+  // c.quadraticCurveTo(x*Math.sin(t), y*Math.cos(t),canvas.width/2,canvas.height/2);
+  c.stroke();
+
+}
+let date = new Date();
+function mainLoop() {
+  let t = new Date().getTime() * SPEED;
+
+  penDown(canvas.width + Math.sin(t) * SIZE, canvas.height + Math.cos(t) * SIZE, t);
+
+  window.requestAnimationFrame(mainLoop);
+}
+
+mainLoop();
+
+let color = COLOR_START;
+let direction = true;
+function strobe(){
+  let co = (direction)?color++:color--;
+  c.strokeStyle = generateColor(co, SATURATION, LIGHTNESS, 100/co);
+  c.shadowColor = generateColor(co, SATURATION, 70, .5);
+  c.shadowBlur = 50;
+  c.shadowOffsetX = 0;
+  c.shadowOffsetY = 0;
+
+  if (color <= COLOR_START || color >= COLOR_END) direction = !direction;
+}
+
+function generateColor(h=0, s=SATURATION, l=LIGHTNESS, a=1.0){
+  return `hsla(${h}, ${s}%, ${l}%, ${a})`
+}
+
+setInterval(function() { strobe() }, 100/(COLOR_END+COLOR_START));
diff --git a/style.css b/style.css
@@ -0,0 +1,13 @@
+body, html, canvas {
+  background-color: #000;
+}
+
+body, html {
+  height: 100%;
+  display: grid;
+}
+
+canvas {
+  margin: auto;
+  border-radius: 50vh;
+}