# How to Make SVG Mesh 3D Work with React Three Fiber

**URL:** <https://discourse.threejs.org/t/how-to-make-svg-mesh-3d-work-with-react-three-fiber/59362>\
**Category:** Questions\
**Tags:** svg-loader, svg, animation, react-three-fiber\
**Created:** [December 18, 2023, 12:03pm UTC](https://discourse.threejs.org/t/how-to-make-svg-mesh-3d-work-with-react-three-fiber/59362 "2023-12-18T12:03:16Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![psygo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/psygo/32/42967_2.png) [@psygo](https://discourse.threejs.org/u/psygo)\
**Post date:** [December 18, 2023, 12:03pm UTC](https://discourse.threejs.org/t/how-to-make-svg-mesh-3d-work-with-react-three-fiber/59362/1 "2023-12-18T12:03:16Z")

</div>

> This question also has [a bounty on Stack Overflow](https://stackoverflow.com/q/77662432/4756173).

I’m trying to make the awesome package [`svg-mesh-3d`](https://github.com/mattdesl/svg-mesh-3d?tab=readme-ov-file) work with React Three Fiber, but I just can’t quite seem to find a way. If this question finds a good answer I think I might try to create a package on top of it to abstract away some of its complexity.

The closest I’ve got so far was actually [this CodeSandbox by robksawyer](https://codesandbox.io/p/sandbox/r3f-render-svg-as-mesh-8u7h6y?file=%2Fsrc%2Findex.js%3A28%2C1). But it seems to be broken. The error reads:

```error
Cannot read properties of undefined (reading 'call')

```

Anyway, here is his code for reference:

```javascript
import React, { Suspense } from "react"
import { createRoot } from "react-dom/client"
import { useEffect, useRef } from "react"
import { Canvas, useFrame } from "@react-three/fiber"
import loadSvg from "load-svg"
import { parse } from "extract-svg-path"
import svgMesh3d from "svg-mesh-3d"
import THREE from "three"
import "./styles.css"

import flame from "../public/flame.svg"

const container = document.getElementById("root")
const root = createRoot(container)

const createGeometry = require("three-simplicial-complex")(require("three"))

export function SvgButton() {
  const ref = useRef()

  useEffect(() => {
    loadSvg(flame, (err, svg) => {
      const svgPath = parse(svg)
      const meshComplex = svgMesh3d(svgPath, {
        delaunay: false,
        scale: 4
      })

      ref.current.geometry = createGeometry(meshComplex)
    })
  }, [])

  useFrame(({ pointer }) => {
    ref.current.rotation.y += Math.sin(pointer.x)
  })

  return (
    <>
      <mesh ref={ref} />
    </>
  )
}

function Content() {
  return (
    <Suspense fallback={null}>
      <SvgButton />
      <meshDepthMaterial />
    </Suspense>
  )
}

root.render(
  <Canvas style={{ background: "#0e0e0f" }} camera={{ position: [0, 0, 7.5] }}>
    <pointLight />
    <pointLight position={[10, 10, -10]} />
    <pointLight position={[-10, -10, 10]} />
    <Content />
  </Canvas>
)

```