<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)}`)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.