DISEÑO GRÁFICO 05 DIBUJEMOS UN CORAZÓN, MEDIANTE CÓDIGO



Último ejercicio sobre código de imágenes vectoriales.



Explicación paso a paso:

DISEÑO GRÁFICO 05 DIBUJEMOS UN CORAZÓN, MEDIANTE CÓDIGO

 

Hola de nuevo, hoy vamos a crear un corazón y modificarlo a través del código.

Vamos a https://editor.method.ac

Para ello, utilizamos la pluma, pero, en lugar de curvas haremos rectas con vértices. Esto se consigue pulsando el mouse sin mantenerlo apretado.

Un ejemplo.

Curva: mantengo apretado y muevo hasta que aparecen los vectores.

Recta: Hago clic con el mouse, muevo y vuelvo a hacer click:

Así pues, mediante clicks, haremos la siguiente figura:

Veamos su código, "View - Source"

  <path id="svg_1" d="m365,90.86806 79.44444,79.13194 -182.22222,178.88889 -177.77778,-178.88889 97.77778,-87.77778 87.77778,88.88889 95,-80.24306z" stroke-width="1.5" stroke="#000" fill="#fff"/>

Redondeamos valores:

  <path id="svg_1" d="m350,100 70,70 -140,140 -140,-140 70,-70 70,70 70,-70z" stroke-width="1.5" stroke="#000" fill="#fff"/>

Queda así:

Ahora, hacemos doble click sobre cada uno de sus vértices. De esta forma, los convertimos en curvas, apareciendo en cada uno de ellos, dos vectores:

Volvemos a ver el código:

Como podemos apreciar, han aparecido unas letras "c" que indican que los segmentos, son ahora curvas.

  <path id="svg_1" d="m350,100c23.33333,23.33333 46.66667,46.66667 70,70c-46.66667,46.66667 -93.33333,93.33333 -140,140c-46.66667,-46.66667 -93.33333,-93.33333 -140,-140c23.33333,-23.33333 46.66667,-46.66667 70,-70c23.33333,23.33333 46.66667,46.66667 70,70c23.33333,-23.33333 46.66667,-46.66667 70,-70z" stroke-width="1.5" stroke="#000" fill="#fff"/>

Volvemos a redondear:

  <path id="svg_1" d="m350,100c24,24 46,46 70,70c-46,46 -93,93 -140,140c-46,-46 -93,-93 -140,-140c24,-24 46,-46 70,-70c24,24 46,46 70,70c24,-24 46,-46 70,-70z" stroke-width="1.5" stroke="#000" fill="#fff"/>

Si probamos el nuevo código, veremos que queda exáctamente igual:

Ahora haremos un cambio en el segundo de sus vértices:

  <path id="svg_1" d="m350,100c24,24 46,46 70,70c-46,46 -93,93 -140,140c-46,-46 -93,-93 -140,-140c24,-24 46,-46 70,-70c24,24 46,46 70,70c24,-24 46,-46 70,-70z" stroke-width="1.5" stroke="#000" fill="#fff"/>

  <path id="svg_1" d="m350,100c24,24 70,0 70,70c0,70 -93,93 -140,140c-46,-46 -93,-93 -140,-140c24,-24 46,-46 70,-70c24,24 46,46 70,70c24,-24 46,-46 70,-70z" stroke-width="1.5" stroke="#000" fill="#fff"/>

Resultado:

Ahora haremos cambios en todos sus vértices:

  <path id="svg_6" d="m350,100c10,0 70,0 70,70c0,70 -40,110 -140,140c-90,-30 -140,-70 -140,-140c0,-70 60,-70 70,-70c10,0 70,0 70,70c0,-70 60,-70 70,-70z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>         

Ese es el resultado:

        

 

Y eso es todo por hoy.

Espero que os haya gustado y, hasta la próxima...

Ver todos los demás