<div id="ccc"></div>

<script id="c" type="text/worklet">
  const PAINTLET_NAME = 'diagonal-lines'

  class CSSPaintlet {
    static get inputProperties() {
      return [
        `--${PAINTLET_NAME}-line-width`,
      ]
    }

    paint(ctx, paintSize, props) {
      const lineWidth = props.get(`--${PAINTLET_NAME}-line-width`)
      console.log(lineWidth)
      ctx.lineWidth = lineWidth
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.lineTo(paintSize.width, paintSize.height)
      ctx.stroke()
      ctx.beginPath()
      ctx.moveTo(0, paintSize.height)
      ctx.lineTo(paintSize.width, 0)
      ctx.stroke()
    }
  }

  registerPaint(PAINTLET_NAME, CSSPaintlet)
</script>
* {
  margin: 0;
  padding: 0;
}

#ccc {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  
  --diagonal-lines-line-width: 2;

  background-image: paint(diagonal-lines);
  background-repeat: repeat;
  background-size: 40px 40px;
 
}

console.clear()

const paintletCode = document.getElementById('c')

;(async function() {
  // ⚠️ Handle Firefox and Safari by importing a polyfill for CSS Pain    
  if (CSS['paintWorklet'] === undefined) {
    await import('https://unpkg.com/css-paint-polyfill')
  }

  // Explicitly define our custom CSS variable
  // Make sure that the browser treats it as a number
  // It does not inherit it's value
  // It's initial value defaults to 1
  if ('registerProperty' in CSS) {
    CSS.registerProperty({
      name: '--diagonal-lines-line-width',
      syntax: '<number>',
      inherits: true,
      initialValue: 10
    })
  }

  // Include our paintlet using
  registerCSSPaintlet(paintletCode.textContent)
})()

function registerCSSPaintlet (sourceCode) {   
  CSS.paintWorklet.addModule(`data:application/javascript;charset=utf8,${encodeURIComponent(sourceCode)}`)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.