Cree un logotipo SVG animado para el Día Internacional de la Mujer 2019

Para conmemorar el Día Internacional de la Mujer 2019, crearemos una versión SVG animada del logotipo del evento que puede usar junto con el hashtag de este año #BalanceforBetter.

En el proceso, aprenderemos a usar Figma y sus operaciones booleanas, así como la animación SVG en línea a través del elemento animateTransform.

Esto es lo que va creando:

Para que la cabeza más Figma, crear un archivo nuevo para trabajar en y vamos a empezar!

Crear el Logo de la Figma

Operaciones booleanas

La manera que va creando nuestra ilustración insignia es dibujar varias formas y luego los combina mediante operaciones booleanas. Encontrarás las operaciones booleanas en medio de la barra de herramientas superior de Figma. Usaremos las operaciones de unión de la selección y restar de la selección, y lo que cada uno de estos verás como nos paso con el tutorial.

El círculo principal

Inicie la herramienta de elipse y sacar un círculo 300px ancho por 300px, con un color de relleno de #46296E.

Crear otro círculo, esta vez 180px por 180px.

Seleccione su primer y segundo círculo haciendo clic en una forma, manteniendo presionada la tecla Mayús y luego haciendo clic en la otra forma. Use las herramientas de alineación en la parte superior de la barra lateral derecha para alinear verticalmente y horizontalmente los dos círculos de manera que sus centros estén en la misma posición.

Entonces, con ambas formas aún seleccionados, seleccione restar de la selección en el menú de operaciones booleanas.

Cuando se utiliza la operación booleana de restar, se restará la forma del elemento más superior de la forma del elemento inferior. Esto crea un centro hueco en nuestra original forma de círculo.

El recorte izquierdo parte inferior

Ahora vamos a crear la sección de corte rectangular delgado en la parte inferior izquierda del logo.

Utilizando la herramienta Rectángulo, dibujar un rectángulo 14px ancho de 100px de alto.

Girar el rectángulo-45 grados. Puede hacerlo introduciendo la cifra correcta en el campo de rotación de la forma en la barra lateral derecha.

Luego coloque el rectángulo en la esquina inferior izquierda del círculo.

Seleccione el rectángulo y el círculo y elegir otra vez restar de la selección en el menú de operaciones booleanas para generar el efecto de recorte.

Los triángulos de la cabeza de flecha

A continuación vamos a hacer la cabeza triangular de la forma de la flecha y el recorte triangular correspondiente

Para asegurar que terminan con un triángulo que tiene un ángulo recto perfecto, en lugar de utilizar la herramienta polígono, usaremos la herramienta rectángulo. Dibujar un cuadrado que es 72px por 72px. Debe compartir el mismo color púrpura de #46296E que hemos estado usando hasta ahora.

Tenemos que eliminar uno de los nodos de la plaza a fin de convertirlo en un triángulo de ángulo recto. Ir al nodo en modo de edición por doble clic en el cuadrado, o elegir la opción de menú Editar objeto de la misma sección del menú superior en la que se encuentran las operaciones booleanas.

Una vez en modo de edición de nodos, utilice la herramienta mover para seleccionar el modo correcto de la parte inferior. Porque necesitamos eliminar este nodo puede pensar debe pulsar la tecla de retroceso o el botón delete, pero si sólo dejará los tres nodos restantes abiertos con sin relleno.

Por el contrario, pulse Mayús + retroceso para usar el borrar y sanar función de selección, que se cerrará la forma cuando se elimina el nodo.

Haga clic en el botón azul hecho a la izquierda del menú superior para terminar esta forma de edición.

Pasar del triángulo en la parte superior derecha de nuestra forma de círculo.

Vamos a necesitar un triángulo para formar la punta de la flecha y otro para cortar una forma de triángulo del círculo. Para ello, duplique el triángulo seleccionándolo y luego presionando Ctrl + D. Mueva el duplicado hacia arriba y hacia la izquierda aproximadamente 6 píxeles.

Ocultar temporalmente el primer triángulo, (uno inferior), haciendo clic en el icono ojo del panel capas para que podamos ver más claramente el triángulo duplicado.

Seleccione el triángulo duplicado y la forma de círculo principal y utilice el sustraer de selección desde el menú de operaciones booleanas para crear este efecto de recorte:

Coloque el triángulo original para volver a mostrar, seleccionar y la forma de círculo principal, luego combinar los dos eligiendo Unión selección desde el menú de operaciones booleanas. Esto completa el área de la cabeza de flecha.

El recorte de parte inferior derecha

Ahora podemos pasar a crear el extremo pequeño, redondeado, Cruz en forma de recorte en la parte inferior derecha del círculo.

En primer lugar, dibujar un rectángulo 12px amplia por 80px de alto y aumentar la esquina redondeo mediante campo de radio de la esquina de la forma en la barra lateral derecha hasta que vea que las esquinas no están obteniendo cualquier todoterreno. (6px o superior). Esto crea tapas perfectamente redondeados en ambos extremos del rectángulo.

Duplicar el rectángulo redondeado, cambiar su altura 50px y gírelo 90 grados. Seleccione ambas formas y alinéelas horizontalmente presionando el botón Alinear centros horizontales en la parte superior de la barra lateral derecha. Coloque este nuevo rectángulo cerca de la parte inferior del primer rectángulo de manera que:

Combinar las dos formas seleccionándolos y eligiendo Unión selección desde el menú de operaciones booleanas. Luego seleccione la forma recién unificada y girarla 45 grados.

Coloque la forma sobre nuestra forma de círculo principal en la parte inferior derecha, como se ve a continuación:

Con la forma de Cruz y principal círculo seleccionada, seleccione restar de la selección en el menú de operaciones booleanas para hacer el corte final.

Su insignia completa debería parecerse a esto:

Nota en "Aplanar" y SVG

En este punto usted tendrá una serie de formas anidados en el panel capas, combinado por varias operaciones booleanas. Opcionalmente puede haga clic en la ilustración, elija aplane y esa jerarquización se colapsó en una sola capa. En muchos casos esto será preferible a tener varias formas anidados.

Sin embargo, en nuestro caso crearía dos separadas las secciones, la parte superior izquierda y mitad derecha inferior, y los que a su vez se convertirían en dos elementos de la ruta en código SVG. Así, dejaremos nuestros perfiles anidados como es, porque cuando nosotros convertirlo a código poco Figma nos dará una ruta única, que es más fácil de animar.

Traducción a código

Con la ilustración completa ahora estamos listos para convertirlo en SVG e incrustar en una página HTML para animación.

Configurar el HTML

Vamos a empezar por crear el documento HTML. Crear un archivo llamado index.html y agregue este código:

1

<!DOCTYPE html>

2

<html lang="en">

3

<head>

4

  <meta charset="UTF-8">

5

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

6

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

7

  <title>Animated SVG Logo</title>

8

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet"> 

9

  <style>

10

11

  </style>

12

</head>

13

<body>

14

15

16

17

</body>

18

</html>

Esto es sólo una cáscara básica donde tenemos un conjunto de etiquetas de estilo listos para algunos CSS, y nos estamos cargando en una fuente de Google que va a utilizar en un momento.

Convertir a SVG

Figma hace conversión de nuestra ilustración a SVG extremadamente rápido y fácil. Simplemente haga clic derecho sobre la imagen y elija Copiar como > Copiar como SVG.

Luego pegar el código resultante en la sección body de tu HTML.

1

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="https://www.w3.org/2000/svg">

2

<path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E"/>

3

</svg>

Entre el <style>...</style> etiquetas añadir este CSS vertical centro nuestro SVG y hacer un pequeño espacio por encima de él.

1

svg {

2

  display: block;

3

  margin: 50px auto;

4

}

Previsualizar el archivo en el navegador y debe aparecer tu imagen SVG:

Agregar animación

Ahora podemos seguir adelante y animar el SVG a girar lentamente. Vamos a estar haciendo esto con el elemento animateTransform, que puede ser colocado entre las etiquetas de apertura y cierre de una forma SVG.

Nuestro código pegado tiene actualmente un auto cierre elemento de ruta de acceso, es decir, así:

<path...></path...>

Tendremos que cambiar esto para tener un par de etiquetas<path></path>  a las que podamos agregar nuestro elemento animateTransform. Elimine la barra diagonal (/) al final de la etiqueta de ruta actual, luego agregue una etiqueta de cierre </path> también detrás de ella.

Nuestro elemento de ruta de acceso está ahora listo para ser animado. Pegue el código siguiente antes de la etiqueta de  </path> cierre:

1

<animateTransform attributeName="transform"

2

  type="rotate"

3

  from="0 150 150"

4

  to="-360 150 150"

5

  begin="0s"

6

  dur="10s"

7

  repeatCount="indefinite"

8

  />

El código SVG resultante debería parecerse a esto:

1

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">

2

3

  <path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E">

4

  <animateTransform attributeName="transform"

5

    type="rotate"

6

    from="0 150 150"

7

    to="-360 150 150"

8

    begin="0s"

9

    dur="10s"

10

    repeatCount="indefinite"

11

    />

12

  </path>

13

</svg>

Echemos un vistazo rápido a las propiedades de nuestro elemento de animateTransform qué a través de los valores que hemos creado:

• tipo = "girar"
  Animar rotación, a diferencia de la escala o la traducción de
  
• de = "0 150 150"
  Las coordenadas del punto de inicio de la animación. El primero de los tres valores son los grados iniciales de rotación, mientras que los valores segundo y tercero son las posiciones x e y del centro. Comenzamos con 0 grados de rotación y establecemos el centro en 150 en ambas direcciones ya que esa posición está justo en el medio de nuestra forma de 300 por 300.
  
• a = "-360 150 150"
  Las coordenadas de la animación de punto de llegada, representando otra vez grados de rotación y x del centro y posición. Dejamos el centro en la misma posición y establece los grados de acabado de la rotación en -360 de una rotación completa. El valor negativo hace que la rotación gire hacia la izquierda, en la dirección que apunta la flecha.
  
• comenzar = "0s"
  Ajuste este valor a los medios de 0 segundos la animación comenzará inmediatamente. Si se utiliza un número positivo que causaría un retraso en el inicio de la animación.
  
• Dur = "10s"
  Aquí fijamos la duración a 10 segundos por lo que la animación tiene un ritmo bastante lento.
  
• repeatCount = "indefinido"
  Este valor significa indefinido que la animación será lazo sin fin
  

Cuando actualices el navegador deberías ver el logo girando.

Ajustar viewBox para evitar el recorte

Como puede ver en la imagen de arriba, cuando la punta de la flecha gira cerca de los bordes exteriores del SVG, se corta. Para solucionar esto ajustaremos el viewBox. Al ajustar el viewBox, básicamente podemos alejar un poco nuestra imagen vectorial.

Ajuste los valores de viewBox en la etiqueta de apertura svg a -20 -20 340 340, de esta manera

1

<svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">

Los dos primeros números controlan el "panorama" de la forma, y los dos últimos números controlan el "zoom".

Mediante el establecimiento de los dos últimos números y 340 340, efectivamente estamos contando los SVG para mostrarnos el equivalente de 340px por 340px de imagen de 300px por 300px de espacio para las propiedades width y height. Para lograr esto el SVG tiene que ser reducido, o "zoom out", que nos da algo de espacio alrededor de la insignia.

Luego, "desplazamos" la imagen hacia abajo y hacia la derecha 20px con los dos primeros números. Si no hiciéramos esto, la imagen se quedaría arriba en la esquina superior izquierda del viewBox y continuaría recortándose en su parte superior e izquierda al girar. Este "desplazamiento" nos da un espacio vacío a nuestro alrededor, y cuando la imagen gira, la flecha ya no se recorta.

El SVG animado terminado se ve así:

Añadir texto

Ahora vamos a añadir un pequeño texto debajo de la animación, con etiqueta de día internacional de las mujeres de 2019. Pegue el código siguiente debajo de su SVG:

1

<h1>#BalanceforBetter</h1>

Y dale estilo agregando el siguiente CSS a tus etiquetas de estilo:

1

body {

2

  text-align: center;

3

}

4

h1 {

5

  background: #46296E;

6

  color: #fff;

7

  display: inline-block;

8

  font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

9

  font-size: 42px;

10

  padding: 0.2em 0.5em;

11

  margin: 0;

12

}

Con este CSS hacemos lo siguiente:

• Centro de alinear el texto a través de la etiqueta body.
  
• Establecer su fondo en color púrpura y el texto a blanco a través de la etiqueta h1.
  
• Ajustar la visualización en línea-bloque - la parte de "en línea" significa que todavía se comportan como texto, pero la parte del "bloque" nos da un mayor control de su espaciado y alineación.
• Establece la familia de fuentes a "Open Sans", con un montón de fuentes de reserva.
• Establecer el tamaño de fuente.
• Añadir un acolchado en el interior para que el fondo morado no es al ras con los bordes del texto.
• Establezca el margen en 0 por lo que no hay demasiado espacio entre el SVG y el texto.

Actualización y su página completa deben tener este aspecto:

Terminando

El código final debe ser:

1

<!DOCTYPE html>

2

<html lang="en">

3

<head>

4

  <meta charset="UTF-8">

5

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

6

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

7

  <title>Animated SVG Logo</title>

8

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet"> 

9

  <style>

10

    svg {

11

      display: block;

12

      margin: 50px auto;

13

    }

14

    body {

15

      text-align: center;

16

    }

17

    h1 {

18

      background: #46296E;

19

      color: #fff;

20

      display: inline-block;

21

      font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

22

      font-size: 42px;

23

      padding: 0.2em 0.5em;

24

      margin: 0;

25

    }

26

  </style>

27

</head>

28

<body>

29

30

  <svg width="300" height="300" viewBox="-20 -20 340 340" fill="none" xmlns="http://www.w3.org/2000/svg">

31

32

    <path fill-rule="evenodd" clip-rule="evenodd" d="M150 300C232.843 300 300 232.843 300 150C300 113.671 287.085 80.3588 265.596 54.4036L281 39H209V111L222.854 97.1464C233.639 111.987 240 130.251 240 150C240 167.559 234.972 183.943 226.277 197.791L239.293 210.808L248.485 201.615C250.829 199.272 254.628 199.272 256.971 201.615C259.314 203.958 259.314 207.757 256.971 210.101L247.778 219.293L253.246 224.761C255.589 227.104 255.589 230.903 253.246 233.246C250.903 235.589 247.104 235.589 244.761 233.246L239.293 227.778L230.101 236.971C227.757 239.314 223.958 239.314 221.615 236.971C219.272 234.628 219.272 230.829 221.615 228.485L230.808 219.293L219.138 207.623C202.628 227.41 177.785 240 150 240C129.343 240 110.311 233.04 95.1213 221.338L52.4815 263.978C78.7044 286.435 112.768 300 150 300ZM202 76.5336V33H243.875C218.176 12.3536 185.531 0 150 0C67.1573 0 0 67.1573 0 150C0 190.572 16.1078 227.382 42.2772 254.383L84.7124 211.948C69.3968 195.812 60 174.003 60 150C60 100.294 100.294 60 150 60C169.372 60 187.315 66.1206 202 76.5336Z" fill="#46296E">

33

    <animateTransform attributeName="transform"

34

      type="rotate"

35

      from="0 150 150"

36

      to="-360 150 150"

37

      begin="0s"

38

      dur="10s"

39

      repeatCount="indefinite"

40

      />

41

    </path>

42

  </svg>

43

44

  <h1>#BalanceforBetter</h1>

45

46

</body>

47

</html>

¡Mira esto!

Ojala que recogió algunos consejos útiles para el uso Figma, crear SVGs y animar a través de animateTransform.

Para más información sobre Figma, SVG y animateTransform disfrutan de estos recursos de aprendizaje adicionales:

• 
  Diseño de interfaz de usuario
  Nuevo curso: Introducción a la Figma
  Andrew Blackman
• 
  Figma
  Nuevo curso: Uso de Figma para diseño SVG
  Andrew Blackman
• 
  SVG
  Cómo uso "animateTransform" para la animación de SVG en línea
  Kezz Bracey
• 
  SVG
  Cómo hacer un corazón de latir con SVG
  Ian Yates