Coloca puntos de anclaje, arrastra las manillas Bézier en un lienzo de 500×500 y obtén al instante el atributo d del trazado SVG y una regla CSS clip-path: path().
En el modo «Añadir puntos», haz clic en el lienzo para crear un ancla (por defecto, una curva C). Arrastra las anclas verdes para moverlas y las manillas azules para curvar el trazado. En el modo «Eliminar puntos», haz clic en un ancla para borrarla.
Coloca puntos de anclaje, arrastra las manillas Bézier en un lienzo de 500×500 y obtén al instante el atributo d del trazado SVG y una regla CSS clip-path: path(). Úsala para trabajo diario, desarrollo, aprendizaje o comprobaciones rápidas.
Esta herramienta funciona en tu navegador. Antes de usar datos sensibles, comprueba que confías en tu dispositivo y navegador.
El elemento path de SVG describe su forma con un atributo d como «M 100 100 C 150 50 …», y escribir a mano esas coordenadas y puntos de control Bézier es muy propenso a errores. Este editor te ofrece un lienzo de 500 × 500 donde construyes la ruta haciendo clic y arrastrando, mientras el panel de la derecha genera al instante el código d de SVG y una regla CSS clip-path: path(). Sirve para iconos, bocetos de logotipos, recortes irregulares de imágenes o, sencillamente, para entender cómo funcionan los comandos de ruta de SVG.
En el modo «Añadir puntos», haz clic en el lienzo para colocar un ancla. El primer punto es el inicio (M) y los siguientes son, por defecto, nodos de curva (C) con dos tiradores de control azules. Cambia a «Seleccionar y mover» para arrastrar las anclas verdes en forma de trébol o los tiradores y ajustar la dirección y la profundidad de cada curva. Con un nodo seleccionado, el menú «Tipo de curva del nodo» lo convierte en vértice angular (L) o curva Bézier (C). En «Eliminar puntos», un clic sobre un ancla la borra. Funciona con ratón, panel táctil o pantalla táctil.
Activa «Ajustar a la cuadrícula» y las anclas se fijarán a una cuadrícula de 20 píxeles, lo que facilita las formas simétricas u ordenadas; el fondo de cuadrícula se puede mostrar u ocultar en cualquier momento. «Cerrar figura (Z)» une el último punto con el primero y crea una forma cerrada que se puede rellenar. Si prefieres no empezar de cero, carga las plantillas de corazón, estrella, gota de agua o silueta de Alpa y modifícalas. Todas las coordenadas se redondean a números enteros, así que el código resultante es corto y listo para pegar.
El atributo d usa un sistema de coordenadas de 0 a 500, así que combínalo con viewBox="0 0 500 500" en tu SVG y la forma se escalará con él. CSS clip-path: path() funciona de otra manera: sus coordenadas están en píxeles y no se escalan con el elemento, por lo que encaja mejor en un elemento de 500 × 500 píxeles. Para un recorte adaptable, usa un clipPath de SVG con clipPathUnits o escala el elemento con transform. Todo se ejecuta en tu navegador y no se sube nada.
M (moveto) mueve el lápiz al punto inicial. L (lineto) traza una línea recta hasta las coordenadas indicadas. C (curveto) dibuja una curva Bézier cúbica: los dos primeros pares de coordenadas son puntos de control y el último es el punto final. Z (closepath) une la ruta con su inicio. Este editor solo usa estos cuatro comandos, lo que hace que el resultado sea fácil de leer y retocar a mano.
La función path() de clip-path usa coordenadas en píxeles: (500, 500) en el lienzo significa 500 píxeles a la derecha y 500 hacia abajo desde la esquina superior izquierda del elemento, sea cual sea su tamaño. Si tu elemento no mide 500 × 500 píxeles, escálalo con transform: scale() o usa un <clipPath clipPathUnits="objectBoundingBox"> de SVG con las coordenadas convertidas al rango 0–1.
Coloca el código d dentro de <svg viewBox="0 0 500 500"><path d="…" /></svg> y dale estilo con fill y stroke. Gracias al viewBox, puedes dar al SVG cualquier ancho y alto y la forma se escalará proporcionalmente. La misma cadena d también sirve en CSS offset-path si quieres que un elemento se desplace a lo largo de la ruta.
Por ahora no. La herramienta solo permite dibujar desde cero en el lienzo o partir de las plantillas de corazón, estrella, gota y silueta de Alpa; los cuadros de salida son de solo lectura y no importan código. Para modificar un icono complejo ya existente, es mejor un editor vectorial completo como Inkscape o Figma.
Ver esta categoría: Diseño y color
Coloca capturas de pantalla dentro de un elegante marco de navegador estilo macOS con sombra y fondo degradado, y descárgalas en PNG de alta resolución.
Diseña textos luminosos y letreros de neón personalizando colores, parpadeos y sombras con exportación de código CSS.
Extrae colores exactos píxel a píxel de cualquier imagen con lupa de alta precisión y genera la paleta dominante.
Configura y previsualiza maquetaciones CSS Flexbox y Grid visualmente, visualiza animaciones y copia el código CSS.
