Wondering what’s next for npm?Check out our public roadmap! »

css-houdini-lines

1.0.4 • Public • Published

CSS Houdini Lines

A CSS Houdini Worklet to show connected nodes.

CSS Houdini Lines

Getting started

1. Load the worklet

Using CDN is the easiest way to add the library:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('https://rawcdn.githack.com/CSSHoudini/css-houdini/74a3e2482adf18b41882de48f601a5fc18fd9d5c/src/lines/dist/lines.js');
}

Or, download the latest lines Worklet and import it to your web page:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('path/to/lines.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('./lines.js')
  })()
</script>

3. Ready to use it in your CSS!

To use Lines worlet you need define some custom properties with values and add the value paint(lines) on background-image property.

The worklet has default values if you don't define these

.element {
  --lines-colors: #f94144, #f3722c, #f8961e, #f9844a;
  --lines-widths: 10, 2, 3, 8;
  --lines-gaps: 20, 4, 3, 7;
  --lines-rotate: 0; /* In degrees */

  background-image: paint(lines);
}
property description default value
--lines-colors Color lines, you can define one or more hexadecimal colors comma separated #71a7ee, #7940c1
--lines-widths Width lines, you can define one or more line widths comma separated 6, 2
--lines-gaps Gap lines, you can define one or more gaps comma separated 8
--lines-rotate Rotation lines, with an interger 0

License

MIT License

Copyright (c) 2020 CSS Houdini

Install

npm i css-houdini-lines

DownloadsWeekly Downloads

88

Version

1.0.4

License

MIT

Unpacked Size

4.3 kB

Total Files

3

Last publish

Collaborators

  • avatar