# css-houdini-connections

> CSS Houdini Background Connections

Latest version **1.0.5** (published 2020-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-houdini-connections
pnpm add css-houdini-connections
yarn add css-houdini-connections
bun add css-houdini-connections
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-12-02 |
| First published | 2020-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 36 |
| Author | Joan León |
| Maintainers | nucliweb |
| Keywords | houdini, css, css-houdini, PaintWorklet, paint, worklet |

## Links

- npm: https://www.npmjs.com/package/css-houdini-connections
- Repository: https://github.com/CSSHoudini/css-houdini
- Homepage: https://github.com/CSSHoudini/css-houdini/tree/main/src/connections
- Issues: https://github.com/CSSHoudini/css-houdini/issues
- npm.io page: https://npm.io/package/css-houdini-connections

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2020-12-02
- 1.0.4 — 2020-12-02
- 1.0.3 — 2020-12-02
- 1.0.2 — 2020-11-29
- 1.0.1 — 2020-11-22
- 1.0.0 — 2020-11-22

## README

# CSS Houdini Connections

A CSS Houdini Worklet to show connected nodes.

![CSS Houdini Connections](https://rawcdn.githack.com/CSSHoudini/css-houdini/37db32100d05d0231d0adb11b128229a8b737d55/src/connections/assets/connections.png)

## Getting started

### 1. Load the worklet

Using CDN is the easiest way to add the library:

```js
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('https://rawcdn.githack.com/CSSHoudini/css-houdini/6979b873e80f9120f52bd481fbdf2d4c60db6b19/src/connections/dist/connections.js');
}
```

Or, download the latest [Connections Worklet](https://github.com/CSSHoudini/css-houdini/tree/main/src/connections/dist) and import it to your web page:

```js
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('path/to/connections.js');
}
```

#### You can use the polyfill

To add support for all moder browsers, you can load the worklet with [css-paint-polyfill](https://github.com/GoogleChromeLabs/css-paint-polyfill) fallback.

```html
<script>
  ;(async function() {
    if (CSS['paintWorklet'] === undefined)
      await import('https://unpkg.com/css-paint-polyfill')

    CSS.paintWorklet.addModule('./connections.js')
  })()
</script>
```

### 3. Ready to use it in your CSS!

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

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

```css
.element {
  --connections-particleColor: rgb(150,180,200);
  --connections-lineColor: rgb(150,180,200);
  --connections-particleAmount: 40;
  --connections-defaultRadius: 2;
  --connections-variantRadius: 1;
  --connections-linkRadius: 60;

  background-image: paint(connections);
}
```

| property | description | default value |
| -------- | ----------- | ------------- |
| --connections-particleColor | Dot color | `rgb(74,74,74)` |
| --connections-lineColor | Line conections color | `rgb(76,76,76)` |
| --connections-particleAmount | Dots number to show on the element | `(w * h) / 1000` Calc of width * height divided to 1000  |
| --connections-defaultRadius | Dot radius | 1.5 |
| --connections-variantRadius | Dot radius variant | 3 |
| --connections-linkRadius | Minimum distance between dots to draw the line connection | 80 |

#### Important informaction

- The current worklet version needs that the values for `--connections-particleColor` and `--connections-lineColor` are **RGB Color** with format `rgb(150,180,200)`.
- If you define a huge values, you can see hundreds of lines in your element.

## License

MIT License

Copyright (c) 2020 CSS Houdini

---
_Source: https://npm.io/package/css-houdini-connections · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._