Text

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>
  );
}