A CSS Houdini Worklet to show connected nodes.
Using CDN is the easiest way to add the library:
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('[URL]');
}
Or, download the latest Worklet name and import it to your web page:
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('[LOCAL_PATH]');
}
To add support for all moder browsers, you can load the worklet with css-paint-polyfill fallback.
<script>
;(async function() {
if (CSS['paintWorklet'] === undefined)
await import('https://unpkg.com/css-paint-polyfill')
CSS.paintWorklet.addModule('./[file].js')
})()
</script>
To use [Worklet Name] worlet you need define some custom properties with values and add the value paint([worklet_name])
on background-image
property.
The worklet has default values if you don't define these
.element {
/* CSS code */
}
property | description | default value |
---|---|---|
--workletName |
MIT License
Copyright (c) 2020 CSS Houdini