This React component renders a spiral of text. You choose the shape and the size of the spiral, and the component takes care of the rest.
npm i react-spiralimport Spiral from 'react-spiral';
function MyComponent() {
return (
<Spiral
sides={3}
boxSize={500}
fontSize={30}
spacing={20}
>
I'm a spiral
</Spiral>
);
}All of the following props are required to properly render a spiral:
| Name | Type | Description |
|---|---|---|
| sides | number | The number of sides that the shape has. A triangle has 3 sides, a square has 4, a pentagon has 5, and so on. |
| children | string | The text to be rendered in the spiral. The text will continue to repeat itself until there's no room left. |
| boxSize | number | The size, in pixels, of the square that the spiral will be rendered within |
| fontSize | number | The size of the font, in pixels |
| spacing | number | The amount of space, in pixels, between parallel lines in the spiral |
If you're interested to learn how this component works, I wrote a blog post explaining all of the techniques that were involved in its creation. I learned a ton about math and trigonometry in the process, and I hope I can share some of my learnings in a digestible way. There's also a few interactive demos in there that are pretty fun to play with. 😊