Text
Using opentype.js (opens in a new tab) to parse the text font to pathData.
import { useEffect, useState } from 'react'; import opentype from 'opentype.js'; import { RoughSVG } from 'react-rough-fiber'; import './style.css'; const TEXT = 'React Rough Fiber'; export default function App() { const [paths, setPaths] = useState([]); const [width, setWidth] = useState(0); useEffect(() => { let ignore = false; const loadSVG = async () => { const res = await fetch('https://fonts.gstatic.com/s/caveat/v17/WnznHAc5bAfYB2QRah7pcpNvOx-pjcB9eIWpZw.woff'); const buffer = await res.arrayBuffer(); if(ignore) return; const font = opentype.parse(buffer); const paths = font.getPaths(TEXT, 0, 100, 100).map((path) => path.toPathData()); const width = font.getAdvanceWidth(TEXT, 100); setPaths(paths); setWidth(width); } loadSVG(); return () => { ignore = true; } }, []); return ( <RoughSVG style={{ color: 'currentColor' }} options={{ roughness: 0 }} > <svg width="100%" viewBox={`0 0 ${width + 25} 200`} fill="#82ca9d" stroke="#8884d8" > {paths.map((d, i) => <path d={d} key={i} />)} </svg> </RoughSVG> ); }