3dsvg.design: convierte SVGs en objetos 3D interactivos y exporta PNG, vídeo o código React

Pasar de un logo plano a un objeto 3D listo para web solía implicar Blender, exportar GLB a mano y pelear con materiales. 3dsvg acorta ese camino: en 3dsvg.design subes un SVG —o escribes texto, pegas código vectorial o dibujas en el editor de píxeles— y el motor lo extruye en WebGL con profundidad, suavizado y zoom ajustables. Lo que ves en el canvas es lo mismo que obtienes al copiar el snippet React o instalar el paquete 3dsvg desde npm.

Cuatro formas de entrada

La barra lateral ofrece cuatro modos, visibles nada más abrir la web:

• Texto — 10 Google Fonts (DM Sans, Bebas Neue, Playfair Display, Righteous, Black Ops One, Permanent Marker, Rubik Mono One, Pacifico, Oswald, Archivo Black).
• Pixel editor — dibuja en una cuadrícula con herramientas Draw, Erase y Clear; ideal para iconos retro o sprites.
• SVG Code — pega markup vectorial directamente.
• File Upload — arrastra un .svg a cualquier parte de la página o usa «Choose File»; también hay un ejemplo precargado («Load example (star)»).

En todos los casos el panel Object controla color (#4f46e5 por defecto), profundidad de extrusión, suavizado de bordes y zoom de cámara, con botón «Reset Position» para volver a la vista inicial.

Materiales, texturas, luz y animación

El README del repositorio documenta 10 presets PBR: Default, Plastic, Metal, Glass, Rubber, Chrome, Gold, Clay, Emissive e Holographic. A eso se suman 10 texturas procedurales o la posibilidad de subir la propia. La sección Lighting permite mover la luz clave, ajustar intensidad, ambiente y sombras; Background cambia el plano de fondo.

Para motion hay 7 animaciones de bucle: Spin, Float, Pulse, Wobble, Swing, Spin+Float o estático. La pestaña Interaction activa rotación con inercia al arrastrar, zoom con scroll y órbita que sigue al cursor. En móvil el canvas auto-ajusta el zoom en vertical para que el objeto no quede fuera de encuadre.

Exportar: imagen, vídeo, modelo 3D o código

La barra inferior del editor concentra la salida. En modo Image exporta PNG con fondo transparente o con color, hasta 4K. En Video captura a 60 fps con interfaz de recorte al estilo iOS; convierte a MP4 vía FFmpeg WASM o WebM nativo, con control de calidad. También hay modo Auto que elige formato según contexto.

Para impresión 3D o pipelines DCC, el menú de descarga incluye GLB (color y materiales preservados), STL, OBJ y PLY. El botón de código (</>) genera un JSX listo para pegar con todas las props del estado actual del editor — material, animación, cámara, iluminación.

Integración React con npm

El monorepo separa packages/engine (componente publicado como 3dsvg) y packages/web (Next.js en 3dsvg.design). Instalación mínima:

npm install 3dsvg

import { SVG3D } from "3dsvg";

<SVG3D text="Hello" animate="spin" />
<SVG3D svg="/logo.svg" material="gold" />

Las props aceptan text o svg (markup, ruta pública o URL remota; si van ambos, gana svg), font, material, animate, iluminación y callbacks de progreso para SVGs complejos que se procesan en lotes asíncronos. El motor usa React Three Fiber sobre Three.js, opentype.js para convertir fuentes a paths y tsup para empaquetar la librería.

Por qué destaca en 2026

El proyecto nació en abril de 2026 y acumula cientos de estrellas en GitHub con licencia MIT. Su promesa —«The easiest way to turn SVGs into 3D»— se sostiene en que no hay curva de DCC: diseñadores pueden iterar materiales en el navegador y developers copiar el mismo resultado a producción sin reimplementar la escena. Encaja con landings de producto, logos animados en hero sections, stickers 3D para redes y prototipos rápidos antes de modelar en Blender.

Para equipos frontend ya acostumbrados a shadcn/ui y Tailwind v4 (también presentes en el editor web), 3dsvg añade una pieza que faltaba en el stack React: vector 2D → malla 3D embebible en una sola dependencia, sin backend ni suscripción. Todo ocurre en cliente; incluso la conversión de vídeo a MP4 corre con FFmpeg compilado a WebAssembly.