houdini-tesla

A CSS Houdini Worklet to paint Tesla coils.

Getting started

1. Load the worklet

Using CDN is the easiest way to add the library:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('https://unpkg.com/houdini-tesla/dist/worklet.js');
}

You can use the polyfill

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('https://unpkg.com/houdini-tesla/dist/worklet.js');
  })()
</script>

2. Ready to use it in your CSS!

To use the Tesla worklet you need to define some custom properties with values and add the value paint(tesla) on the background property.

.element {
  --tesla: 0; /* Entry point to animate coil and trigger repaint */
  --tesla-hue: 0;
  --tesla-saturation: 50;
  --tesla-lightness: 50;
  --tesla-blur: 10;
  --tesla-width: 10;
  --tesla-angle: 45;
  --tesla-segments: 2;
  background: paint(tesla-coil);
}

Property	Description	Default
--tesla	Hack, use this property to animate coil. Animating the property triggers a repaint.	0
--tesla-hue	Hue, use this to define the hue of the coil	0
--tesla-saturation	Saturation, use this to define the saturation of the coil	0
--tesla-lightness	Lightness, use this to define the lightness of the coil	0
--tesla-blur	Blur, use this to define a stroke blur for the coil	0
--tesla-width	Width, use this to adjust the stroke width of the coil	0
--tesla-angle	Angle, use this to adjust the permitted angles in the coil	0
--tesla-segments	Segments, use this to adjust the number of segments in the coil	0

Development

Run it locally!

npm i
make develop

License

MIT License

Copyright (c) 2020 jh3y