Houdini worklet for fancy curved horizontal line
npm install curved-lineCurvedLine (curved-line) is a CSS Houdini implementation to create a custom horizontal line.
The browser supports for Paint API is also getting better, and with a polyfill, we can support out more browsers.
Using CDN is the easiest way to add the library:
``js`
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('"https://unpkg.com/curved-line@1.0.0/curved-line.js');
}
Or, download the code and import it to your web page:
`js`
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('path/to/curved-line.js');
}
#### You can use the polyfill
To add support for all moder browsers, you can load the worklet with css-paint-polyfill fallback.
`html`
To use CurvedLine worlet you need define some custom properties with values and add the value paint(curved-line) on background-image property.
> The worklet has default values if you don't define these
`css
.element {
--curved-lineHeight: 30; / default: element height /
--curved-lineWidth: 5; / default: 3 /
--curved-lineColor: midnightblue; / default: 'black' /
--curved-lineSpread: 20; / default: 50 /
background-image: paint(curved-line);
}
`
| property | description | default value |
| -------- | ----------- | ------------- |
| --curved-lineHeight: | Line height, the height of the curved line | element height |3
| --curved-lineWidth | Line width, the width of the line | |'black'
| --curved-lineColor | Line color, the line color | |20` |
| --curved-lineSpread | Line spread, the curve interval length |
* See this demo on Codepen
* See more examples on Codepen
* CurvedLine Github repository
* See more information about CSS Houdini
MIT License
Copyright (c) 2020 Hazmi