fur

a coat of fur for any shape. it's a react component that draws thousands of tiny strands onto one canvas, with a fringe around the edge so it actually reads as fur. works on the built-in shapes, on a custom svg path, or on a line of text (yes, including inside the holes of letters). no images, no textures, nothing to download.

it's also pettable. drag across it and the strands bend with your pointer, then spring back. the animation loop only runs while something is still moving, so when it's sitting there it costs nothing.

live demo with every knob: feralui.dev/fur

install

npm i feral-fur

use it

import { Fur } from 'feral-fur'
import 'feral-fur/fur.css'

// a pink fur folder
<Fur shape="folder" color="#f5a8c9" style={{ width: 320, aspectRatio: '29 / 24' }} />

// fur on text
<Fur text="feral" style={{ width: 420, aspectRatio: '10 / 3' }} />

// fur on your own path
<Fur path="M 20 0 L 80 0 ..." style={{ width: 300, height: 300 }} />

the element sizes the fur, so give the <Fur> a width/height (or aspect-ratio) and it fills it. the fringe pokes past the box on purpose, so leave it a little room and don't clip it with overflow: hidden.

props

| prop | type | default | what it does | | --- | --- | --- | --- | | color | string | #f5a8c9 | coat colour, any css colour. shadows and tips come off this | | shape | folder | card | heart | folder | built-in shape, ignored if you pass path or text | | path | string | | svg path string, auto-fit and centred in the element | | pathBox | { width, height } | | scale the path from this box instead of auto-fitting | | text | string | | grow fur on text instead of a shape | | fluff | number | 1 | strand length | | density | number | 1 | how many strands, capped so big elements stay cheap | | mess | number | 0.5 | 0 is combed, 1 is slept on | | seed | number | 7 | same seed + same size gives the same fur | | padColor | string | | fill the interior holes with bare skin of this colour (paw pads) | | pettable | boolean | true | pointer petting. off automatically under reduced motion | | children | ReactNode | | drawn on top of the coat |

notes

petting is turned off when the user has reduced motion on, so you don't need to handle that yourself. the canvas is aria-hidden, it's decorative.

MIT.