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

<script id="c" type="text/worklet">
  const PAINTLET_NAME = 'my-awesome-css-paintlet'

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

    paint(ctx, paintSize, props) {
      const lineWidth = Number(props.get(`--${PAINTLET_NAME}-line-width`))
      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>
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ccc {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  
  background-image: paint(my-awesome-css-paintlet);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  
  --my-awesome-css-paintlet-line-width: 1;
}
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
  CSS.registerProperty({
    name: '--my-awesome-css-paintlet-line-width',
    syntax: '<number>',
    inherits: false,
    initialValue: 10
  })

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.