# cistercian-number

> Svelte component for displaying Cistercian Numbers as svg paths

Latest version **1.0.3** (published 2022-12-02) · WTFPL license · 0 weekly downloads

## Install

```sh
npm install cistercian-number
pnpm add cistercian-number
yarn add cistercian-number
bun add cistercian-number
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-12-02 |
| First published | 2022-08-23 |
| Weekly downloads | 0 |
| License | WTFPL |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mallsoft |
| Keywords | svelte, component, svg, number, numeral, cistercian |

## Links

- npm: https://www.npmjs.com/package/cistercian-number
- Homepage: https://github.com/mallsoft/cistercianNumber#readme
- npm.io page: https://npm.io/package/cistercian-number

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2022-12-02
- 1.0.2 — 2022-12-02
- 1.0.1 — 2022-12-02
- 1.0.0 — 2022-09-20
- 0.0.2 — 2022-08-23
- 0.0.1 — 2022-08-23

## README

# Svelte Cistercian-Number Svg Component

Svelte component for displaying Cistercian Numbers as svg paths

## To use:

`npm i cistercian-number`

```html
<script>
	import CistercianNumber from 'cistercian-number';
</script>

<div>
	<CistercianNumber value="{555}" />
</div>

<style>
	div {
		---color: salmon; /* Default */
		---linecap: round; /* Default */
		---thickness: 0.5; /* Default */
		---bgcolor: transparent; /* Default */
		height: 200px;
	}
</style>
```

If you like the defaults you can omit the `div` as it's only for the css variables and sizing.

## Results in the following:

```html
<!-- generated -->
<svg viewBox="0 0 12 12" class="cisterian-number">
	<path d="M6,11L6,1"></path>
	<path d="M6,1L11,1"></path>
	<path d="M11,1L6,5"></path>
	<path d="M6,1L1,1"></path>
	<path d="M1,1L6,5"></path>
	<path d="M6,11L11,11"></path>
	<path d="M6,7L11,11"></path>
	<title>555</title>
</svg>
```

Looking like:

![preview](https://user-images.githubusercontent.com/36839009/186229729-7dd8595c-87f3-4bf6-98f5-63481309862f.png)

#

### "I wanna roll my own mode"

```html
<script>
	import { cistercianNumberPaths } from 'cistercian-number';
	const numbers = [1, 2, 3];
</script>
<!-- Create an `<svg>` or symbol element -->

<svg viewBox="0 0 12 12">
	{#each numbers.map(cistercianNumberPaths) as d}
	<path {d} />
	{/each}
</svg>
```

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