Encuentro que el 98% de todo mi uso de SVG proviene de archivos SVG prediseñados o arte vectorial en algún software de diseño que finalmente exporto como SVG. No muy a menudo estoy manipulando a mano las coordenadas de las cosas en el código SVG. Oye, incluso tengo un libro sobre todo eso.
Pero de vez en cuando, es apropiado y quizás incluso un poco divertido. En este caso, quería trazar una línea bastante específica con un par de giros suaves. Con un poco de conocimiento de la sintaxis de ruta de SVG (la más extraña, pero más poderosa de las herramientas de dibujo de SVG) podemos hacerlo sin mucho problema.
Demostración con la que jugamos en video:
Vea el Pen
KOvPaa de Chris Coyier (@chriscoyier)
en CodePen.
Idea original:
Vea la
ruta iluminada con lápiz de Chris Coyier (@chriscoyier)
en CodePen.
Recuerde que lo que no hicimos fue ajustar el SVG de modo que las esquinas redondeadas se mantuvieran en una buena relación de aspecto mientras que el resto del SVG era flexible y podía llenar el espacio vertical y horizontal. Eso es posible, es más complicado y tendremos que cubrirlo en otro momento.