<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('/georgedoescode/pen/PoKdPoV.js');
}
</script>
body {
margin: 0;
}
.worklet-canvas {
width: calc(100vw - 4rem);
height: calc(100vh - 4rem);
margin-left: 2rem;
margin-top: 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";
class Worklet {
paint(ctx, geometry, props) {
const { width, height } = geometry;
ctx.fillStyle = "#4BAD7B";
ctx.fillRect(0, 0, width, height);
random.use(seedrandom(123456));
ctx.fillStyle = "#E9EDEB";
for (let i = 0; i < 1000; i++) {
const x = random.float(0, width);
const y = random.float(0, height);
ctx.beginPath();
ctx.arc(x, y, random.float(0, 8), 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.