DOM
Convert DOM to SVG using dom-to-svg (opens in a new tab).
import { useEffect, useRef, useState } from 'react'; import { elementToSVG } from 'dom-to-svg'; import SVG from 'react-inlinesvg'; import { RoughSVG } from 'react-rough-fiber'; import './style.css'; export default function App() { const [svg, setSVG] = useState(''); const ref = useRef(); useEffect(() => { if (ref.current) { const svgDocument = elementToSVG(ref.current); const svgString = new XMLSerializer().serializeToString(svgDocument) setSVG(svgString); } }, []) return ( <> <div className="dom-container" ref={ref}> <div> <span className="title"> React Rough Fiber </span> <p>A React renderer for rendering hand-drawn SVGs</p> </div> <div className="button-container"> <span className="button"> Go </span> </div> </div> <RoughSVG options={{seed: 2}}> <SVG src={svg} /> </RoughSVG> </> ); }