Visualizador de Trayectos SVG
Pegue un atributo `d` de trayecto SVG, renderícelo en vivo con una cuadrícula y explore cada comando de trayecto analizado.
Acerca de esta herramienta
Ingrese cualquier cadena `d` de trayecto SVG y vea al instante cómo se renderiza en un canvas con fondo de cuadrícula. La herramienta analiza cada comando — M, L, C, Q, A, Z, H, V, S, T — y los lista en una tabla de desglose con sus coordenadas. Use el control deslizante de escala para acercar y alejar, elija colores de trazo y relleno, y active o desactive el relleno. Las dimensiones del cuadro delimitador se calculan y muestran. Copie el trayecto como un elemento SVG `<path d="..."/>` listo para usar con un clic.
Cómo usar
- 1 Pegue o escriba una cadena `d` de trayecto SVG en el campo de entrada — hay un trayecto de muestra precargado.
- 2 Ajuste el control deslizante de escala y elija los colores de trazo/relleno usando los selectores.
- 3 Revise la lista de comandos analizados debajo del canvas para entender cada segmento.
- 4 Haga clic en 'Copiar como elemento SVG' para obtener un fragmento `<path d="..."/>` listo para su código.
Preguntas frecuentes
Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.
Construya visualmente valores de box-shadow de CSS con vista previa en vivo — admite múltiples capas.
Convierte colores entre HEX, RGB, HSL, HSV y CMYK — con vista previa en tiempo real.