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.

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.