lonekorean

CSS.registerProperty({
    name: '--dot-spacing',
    syntax: '<length>',
    initialValue: '20px',
    inherits: false
});
CSS.registerProperty({
    name: '--dot-fade-offset',
    syntax: '<percentage>',
    initialValue: '0%',

lonekorean

.jagged {
    --tooth-width: 80px;
    --tooth-height: 30px;
    -webkit-mask-image: paint(jagged-edge);

    /* other styles as needed... */
}

.slot:nth-child(1) .jagged {
    background-image: linear-gradient(to right, #22c1c3, #fdbb2d);

lonekorean

.jagged {
    background: paint(jagged-edge);

    /* other styles as needed... */
}

.slot:nth-child(1) .jagged {
    --tooth-width: 50px;
    --tooth-height: 25px;
}

lonekorean

CSS.registerProperty({
    name: '--tooth-width',
    syntax: '<length>',
    initialValue: '40px',
    inherits: false
});
CSS.registerProperty({
    name: '--tooth-height',
    syntax: '<length>',
    initialValue: '20px',

lonekorean

class JaggedEdgePainter {
    static get inputProperties() {
        return ['--tooth-width', '--tooth-height'];
    }

    paint(ctx, size, props) {
        let toothWidth = props.get('--tooth-width').value;
        let toothHeight = props.get('--tooth-height').value;

        // lots of math to ensure teeth are collectively centered

lonekorean

.shorthand {
    border: 1px solid blue;
}

.expanded {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;

lonekorean

class PlaceholderBoxPropsPainter {
    static get inputProperties() {
        return ['border-top-width', 'border-top-color'];
    }

    paint(ctx, size, props) {
        // default values
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#666';

lonekorean

.placeholder {
    background-image: paint(placeholder-box);

    /* other styles as needed... */
}

lonekorean

<script>
    CSS.paintWorklet.addModule('worklet.js');
</script>

<div class="placeholder"></div>

lonekorean

class PlaceholderBoxPainter {
    paint(ctx, size) {
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#666';

        // draw line from top left to bottom right
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(size.width, size.height);
        ctx.stroke();