CSS Houdini Deep Sea

A CSS Houdini Paintlet to render configurable 2D quadratic curve.

Demo Page - http://css-houdini-dojo.georgi-nikolov.com

1. Load the Worklet

Using CDN is the easiest way to add this Worklet:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('https://unpkg.com/@houdini-css-paint/quadratic-curve/index.js');
}

2. Polyfill

To add support for all modern 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-css-paint/quadratic-curve/index.js')
  })()
</script>

3. Using the Paintlet

To use this Paintlet after you have succesffuly loaded it, you need to add background(-image): paint(quadratic-curve) to any HTML element on your page. You can control its appearance just like any other regular image referenced in CSS with properties such as background-size, background-repeat, background-position and so on.

.my-element {
  --quadratic-curve-number-points: 6;
  --quadratic-curve-stroke-width: 3;
  --quadratic-curve-stroke-color: #d35400;
  --quadratic-curve-helper-stroke-color: #999999;
  --quadratic-curve-helper-radius: 5;
  --quadratic-curve-helper-background-color: #c0392b;
  --quadratic-curve-helper-accent-color: #f1c40f;

  background-image: paint(quadratic-curve);
}

Property	Description	Default Value
--quadratic-curve-number-points	The number of points in the curve	3
--quadratic-curve-stroke-width	The stroke width for the bezier curve	3
--quadratic-curve-stroke-color	The stroke color for the bezier curve	orange
--quadratic-curve-helper-stroke-color	The stroke color for the helper line	rgba(0, 0, 0, 0.15)
--quadratic-curve-helper-radius	The radius for the helper circles	5
--quadratic-curve-helper-background-color	The background color for the helper circles	#c0392b
--quadratic-curve-helper-accent-color	The accent color for the helper circles	#f1c40f

License

MIT License