cistercian-number v1.0.3

Svelte Cistercian-Number Svg Component

Svelte component for displaying Cistercian Numbers as svg paths

To use:

npm i cistercian-number

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

<!-- 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:

"I wanna roll my own mode"

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