3dsvg Interactive React

Takes any SVG and extrudes it into an interactive 3D React component powered by Three.js and React Three Fiber. You get a single `<SVG3D>` component with props for material presets (chrome, gold, holographic), animations (spin, float, wobble), and extrusion depth. Ships with a visual editor at 3dsvg.design where you can tweak lighting, export PNGs or videos, and grab embed code. Most useful when you want to turn a flat logo or icon into a spinnable 3D object without touching Blender. The clay and holographic materials look surprisingly good. Requires the usual React Three Fiber peer dependencies, and you'll need dynamic imports with Next.js since it's browser-only.

skills.sh installs: 393
GitHub stars: 26
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add aradotso/trending-skills --skill 3dsvg-interactive-react --agent claude-code

Installs into .claude/skills of the current project.

Files

3dsvg — Interactive React 3D Components from SVGs

Skill by ara.so — Daily 2026 Skills collection.

3dsvg extrudes SVG paths, text, and shapes into fully interactive 3D React components powered by Three.js and React Three Fiber. It ships as an embeddable <SVG3D> component (npm) plus a visual editor at 3dsvg.design.

Installation

npm install 3dsvg
# or
yarn add 3dsvg
# or
pnpm add 3dsvg

Peer dependencies (install if not already present):

npm install three @react-three/fiber @react-three/drei

Quick Start

import { SVG3D } from "3dsvg";

// Spin text in 3D
<SVG3D text="Hello" animate="spin" />

// 3D logo from SVG file
<SVG3D svg="/logo.svg" material="gold" />

// Pixel editor input
<SVG3D svg="<svg>...</svg>" material="chrome" animate="float" />

SVG3DProps — Full API

import { SVG3D } from "3dsvg";

<SVG3D
  // Input (choose one)
  text="Hello World"          // Text string (uses Google Fonts)
  svg="/path/to/file.svg"     // URL to SVG file
  // svg="<svg>...</svg>"     // Raw SVG markup string

SKILL.md on GitHub