<div class="worklet-canvas"></div>
<script id="register-worklet">
if (CSS.paintWorklet) {
// ⚠️ hey friend! update the URL below each time you fork this pen! ⚠️
CSS.paintWorklet.addModule('https://codepen.io/georgedoescode/pen/QWMVdPG.js');
}
</script>
body {
margin: 0;
background: #f9f9fc;
}
.worklet-canvas {
width: calc(100vw - 4rem);
height: calc(100vh - 4rem);
margin-top: 2rem;
margin-left: 2rem;
background-color: #fff;
background-image: paint(workletName);
resize: both;
overflow: hidden;
}
import random from "https://cdn.skypack.dev/random";
import seedrandom from "https://cdn.skypack.dev/seedrandom";
import { createVoronoiTessellation } from "https://cdn.skypack.dev/@georgedoescode/generative-utils";
class Worklet {
paint(ctx, geometry, props) {
const { width, height } = geometry;
ctx.strokeStyle = "#1D1934";
ctx.fillStyle = "#1D1934";
random.use(seedrandom(123456));
const { cells } = createVoronoiTessellation({
width,
height,
points: [...Array(24)].map(() => {
return {
x: random.float(0, width),
y: random.float(0, height)
};
})
});
ctx.lineWidth = 2;
ctx.scale(0.9, 0.9);
ctx.translate((width * 0.1) / 2, (height * 0.1) / 2);
cells.forEach((cell) => {
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.moveTo(cell.points[0][0], cell.points[0][1]);
for (let i = 0; i < cell.points.length - 1; i++) {
ctx.lineTo(cell.points[i][0], cell.points[i][1]);
}
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#48CB8A";
ctx.beginPath();
ctx.arc(
cell.centroid.x,
cell.centroid.y,
cell.innerCircleRadius * 0.75,
0,
Math.PI * 2
);
ctx.fill();
});
}
}
if (typeof registerPaint !== "undefined") {
registerPaint("workletName", Worklet);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.