phi-line · May 9, 2018 06:04 · May 9, 2018
diff --git a/color-squircle.markdown b/color-squircle.markdown
@@ -0,0 +1,7 @@
+Color Squircle
+--------------
+
+
+A [Pen](https://codepen.io/phi_line/pen/QraPVy) by [phi-](https://codepen.io/phi_line) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/phi_line/pen/QraPVy/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,4 @@
+<html>
+<body>
+  <canvas width='1000' height='1000'></canvas>
+</body>
diff --git a/script.js b/script.js
@@ -0,0 +1,52 @@
+let canvas = document.querySelector('canvas');
+let c = canvas.getContext('2d');
+
+canvas.addEventListener("mousedown", e => {
+    penDown(e.x, e.y); 
+    canvas.onmousemove = e => penDown(e.x, e.y);
+});
+canvas.addEventListener("mouseup", e => {
+  canvas.onmousemove = null;
+});
+canvas.addEventListener("click", e => {
+  c.clearRect(0, 0, canvas.width, canvas.height);
+})
+
+function penDown(x, y) {  
+  c.beginPath();
+  c.moveTo(x,y);
+  c.lineTo(canvas.width/2, canvas.height/2);
+  // c.quadraticCurveTo(x, y, canvas.width/2,canvas.height/2);
+  c.lineWidth = 7;
+  c.stroke();
+
+  if (color >= 360){
+    color = 0;
+  }
+}
+
+let color = 0;
+function strobe(){
+  c.strokeStyle = `hsla(${color++}, 50%, 60%, 90%)`;
+
+  if (color >= 360) color = 0;
+}
+
+setInterval(function() { strobe() }, 1);
+
+let date = new Date();
+const SPEED = 1/Math.PI;
+
+function mainLoop() {
+  let t = new Date().getTime() * SPEED;
+
+  let size = 1000;
+  let center = canvas.width/2;
+
+  penDown(center + Math.sin(t) * size, center + Math.cos(t) * size);
+
+  window.requestAnimationFrame(mainLoop);
+}
+
+c.strokeStyle = `hsla(${-1}, 50%, 60%, 90%)`;
+mainLoop();
diff --git a/style.css b/style.css
@@ -0,0 +1,13 @@
+body, html, canvas {
+  background-color: #000;
+  height: 100%;
+  display: grid;
+}
+
+canvas {
+  margin: auto;
+  border-radius: 200px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}