diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2b5a364
--- /dev/null
+++ b/index.html
@@ -0,0 +1,419 @@
+
+
+
+
+
+
+ Static Template
+
+
+
+
+
+ 5
+ 4
+ 2.758
+ 2.1
+ 0.9
+ 1.1
+
+
+
+
+
+ 5
+ 4
+ 2.758
+ 2.1
+ 0.9
+ 1.1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 6
+ 8
+ 10
+ 12
+ 14
+ 16
+
+
+
+
+
+
+
+
+
+ 5
+ 4
+ 2.758
+ 2.1
+ 0.9
+ 1.1
+
+
+
+
+
+
+
+
+
+
+
+ 6
+ 8
+ 10
+ 12
+ 14
+ 16
+
+
+
+
+
+
+
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5055f73
--- /dev/null
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "smooth-corners",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve",
+ "build": "echo This is a static template, there is no bundler or bundling involved!"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/codesandbox-app/static-template.git"
+ },
+ "keywords": [],
+ "author": "Ives van Hoorne",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/codesandbox-app/static-template/issues"
+ },
+ "homepage": "https://github.com/codesandbox-app/static-template#readme",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/paint.js b/paint.js
new file mode 100644
index 0000000..fc6541b
--- /dev/null
+++ b/paint.js
@@ -0,0 +1,47 @@
+class SmoothCornersPainter {
+ static get inputProperties() {
+ return ["--smooth-corners"];
+ }
+
+ superellipse(a, b, n) {
+ const n2 = 2 / n;
+ const steps = 360;
+ const step = (2 * Math.PI) / steps;
+ const points = t => {
+ const cosT = Math.cos(t);
+ const sinT = Math.sin(t);
+ return {
+ x: Math.abs(cosT) ** n2 * a * Math.sign(cosT),
+ y: Math.abs(sinT) ** n2 * b * Math.sign(sinT)
+ };
+ };
+ return Array.from({ length: steps }, (_, i) => points(i * step));
+ }
+
+ paint(ctx, geom, properties) {
+ const m = properties.get("--smooth-corners").toString() || 4;
+ let n = m;
+ if (m > 100) n = 100;
+ if (m < 0.00000000001) n = 0.00000000001;
+
+ const width = geom.width / 2;
+ const height = geom.height / 2;
+ const smooth = this.superellipse(width, height, n);
+
+ ctx.fillStyle = "black";
+ ctx.setTransform(1, 0, 0, 1, width, height);
+ ctx.beginPath();
+
+ for (let i = 0; i < smooth.length; i++) {
+ const { x, y } = smooth[i];
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ }
+
+ ctx.closePath();
+ ctx.fill();
+ }
+}
+
+// eslint-disable-next-line no-undef
+registerPaint("smooth-corners", SmoothCornersPainter);
diff --git a/sandbox.config.json b/sandbox.config.json
new file mode 100644
index 0000000..5866ed7
--- /dev/null
+++ b/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
+ 
+ 
+