# css-houdini-bullet

> ![CSS Houdini Bullet example](./public/css-houdini-bullet-sample.gif)

Latest version **0.3.0** (published 2021-01-16) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2021-01-16 |
| First published | 2021-01-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eduardo Allegrini |
| Maintainers | edalgrin |
| Keywords | css, houdini, hole, bullet |

## Links

- npm: https://www.npmjs.com/package/css-houdini-bullet
- Repository: https://github.com/edalgrin/css-houdini-bullet
- Homepage: https://github.com/edalgrin/css-houdini-bullet#readme
- Issues: https://github.com/edalgrin/css-houdini-bullet/issues
- npm.io page: https://npm.io/package/css-houdini-bullet

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [web-vitals](https://npm.io/package/web-vitals.md) ^0.2.4
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## 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

- 0.3.0 (latest) — 2021-01-16
- 0.2.0 — 2021-01-15
- 0.1.0 — 2021-01-15

## README

# CSS Houdini Bullet

![css-houdini-bullet-sample](https://user-images.githubusercontent.com/46778114/104809195-b4f7c580-57eb-11eb-95de-8fe3ad75594c.gif)

A CSS Houdini Worklet to paint "bullet holes".

## 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://unpkg.com/css-houdini-bullet/public/worklet.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(
      "https://unpkg.com/css-houdini-bullet/public/worklet.js"
    );
  })();
</script>
```

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

To use the **Bullet** worklet you need to define some custom properties with values and add the value `paint(bullet)` on the `background` property.

```css
.element {
  --bullet-bg: #3112c9, #12c99b;
  --bullet-items: 3;
  --bullet-type: 5;
  --bullet-curve: 0.5;
  --bullet-size: 10, 25;
  --bullet-border: 15;
  background: paint(tesla-coil);
}
```

| Property        | Default   | Description                                                                                |
| --------------- | --------- | ------------------------------------------------------------------------------------------ |
| --bullet-bg     | `#1a2a6c` | Define the background color of the element, multiple colors can be used `#color1, #color2` |
| --bullet-items  | `10`      | Define the number of "holes"                                                               |
| --bullet-type   | `0`       | Define the type of "hole" `0 = Circles`, `1 = Hearts`, `n > 2 = Polygons of n points`      |
| --bullet-curve  | `0.5`     | Define the shorter radius of the `Polygons` (max value 1)                                  |
| --bullet-size   | `10`      | Define the size of the "hole"                                                              |
| --bullet-border | `0`       | Define the space from the border                                                           |

## Development

Run it locally!

```
yarn
yarn start
```

## License

MIT License

Copyright (c) 2021 Edalgrin

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