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...