DEV Community: Mariana Beldi

Building an SVG virtual stand

Mariana Beldi — Sun, 06 Feb 2022 21:32:56 +0000

A responsive illustrated website with CSS Grid.

Nerdearla is an annual conference with talks and workshops about technology and science here in Buenos Aires.

As sponsors of the event with Leniolabs, we used to have a stand where people could come by and say hi, play games with us, talk about technologies we love, and get some of our alien merch. It was the perfect excuse to get to know each other in this community.

Then the pandemic changed everything. And the event as we knew it was not possible anymore. They resolved to make this last edition online, so we decided to build a site to still be able to interact with people and play the games we’ve been developing. We didn’t know what to expect. Trying to keep closer in the distance was a challenge for us. But at the same time, there was a bigger audience to connect to, as many speakers and attendees could be present from any part of the world.

We first attempted to create an interactive city to chat in bars or share articles in the library, talk in the theatres, or play games in the park. But all those places seemed far away from our reality at that moment.

Then the popular #stayathome hashtag hit us: why not illustrate our own house at Leniolabs?

Each room would refer to one area of the company; we had our videos of workshops and talks in the garage, our blog posts in the home library, the live chat in the living room, the games in the garden, the trivia challenges in the loft, our lab in the basement, the Bootcamp we were cooking at the kitchen, and the job section in the office room. And everyone was invited; we wanted to share what happens inside Leniolabs, our internal workshops, and articles we write to share our knowledge.

Coding the design and making it responsive

There was a challenge to make this website mobile-friendly as the whole site was a big illustration. After playing around with different approaches, we decided to use Layoutit to build a CSS Grid. We exported every room as a single SVG and made every SVG a component. Then we created a grid where every grid item was one of these components. We changed the layout and the position of the grid areas depending on the screen size, going from 4 column layout on large screens to a single column on mobile.

The technology used

We chose Nuxt as we needed a site that would last 5 days but with one month to build it from scratch. No time was lost in router configuration, auto imported components, and a nice folder structure in a pre-rendered site. And we chose Netlify as we needed to iterate and share the results often. A free, serverless platform to push and deploy.

CSS animations

We used some small animations on hover to make the house a little bit more alive—all with preferred reduce-motion for accessibility.

Night mode and easter eggs

After a certain hour, the house switches off, some of the lights are out, and others are on. The sleeping cat is now catching a spider; Leni (our alien mascot) falls asleep outside the house. We love the idea that the more you visit the site, the more details you’ll find hidden. Every SVG is a reusable component that appears on each internal page and changes as the dark mode turns on.

Between 4 pm and 7 am, this function adds a class to the container of the site to activate the dark mode:

<template>
 <div :class="{ night: isDark }">
 ...
</template>
<script>
 export default {
  data() {
   return { isDark: false };
  },
 methods: {
  updateTime() {
   if (process.client) { 
    const hours = new Date().getHours();
    this.isDark = hours < 7 || hours > 16;
   }
  },
 },
...
</script>

This ended up being our official event site for Nerdearla, as they will continue doing it online and we are part of the 2021 edition from 20 to 23rd of October. We will be hosting games and sending gifts to everyone who will join us this year! But even if you don’t join the conference you can still visit our virtual stand at https://nerdearla.leniolabs.com

More details about the making of the site are in this talk (Spanish version):

Going beyond automatic SVG compression with the “use” element

Mariana Beldi — Thu, 07 May 2020 12:52:58 +0000

If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only a few seconds and reduces your file size a lot. But if you need to use your SVG inline to animate or interact with the code, there’s still a lot you can do about code legibility.

Reusing content with SVG’s <use> is not always an option, but when it is, you won’t regret taking a few extra minutes to put it in practice.

In this article, I’ll show an example where I was able to take a lot of advantage of this element — not only for keeping the file size down but also a clearer markup that became more legible and easy to maintain.

This is the first design that I needed to work with. It was originally created in Illustrator:

Take a look at the following code, this is the original file exported directly from the software, weighs 2.05kb:

It’s not a heavy file at all. However, open it and you’ll find there are lots of empty tags, deprecated namespaces, unnecessary white space, commas and extra information applied by the software. This makes the code hard to work with, annoying to scan and creates a big scroll for those hundreds of lines in your document.

You’ll also notice that the file is indeed using <use> and <defs> elements, but not in the best way it could. And that’s not the software’s fault! Each astronaut illustration in the original file has a clipping mask: an invisible circle that acts like a window through which we can see our character. Without it, the suit of the astronaut would be flooding outside the circle. There are a few ways to avoid this in Illustrator, like cropping those extra parts with a pathfinder option. That way we would gain a few bytes and avoid using an extra circle only for clipping information of the graphic that we won’t show. The compression of the file starts in the software. Still, there are a lot of things we’ll be able to improve on the code in case we don’t want to edit the original file.

Compressing the SVG with SVGOMG and keeping the default options won’t take any effort and you’ll get a file that weighs 1.46kb. That is a reduction of 30% compared to the original size and the graphic will look exactly the same.

Reusing content

This will require going through the SVG and making some adjustments. I know this option takes more time regarding the previous example, but it’s not as hard as it seems.

We have one repeated element, which is the astronaut inside the circle. That’s the one we’ll compress on SVGOMG. The result will look something like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 95.8 95.8"> <style>.st3,.st4{fill:#ffcb2f;stroke:#12192c;stroke-width:1.4891;stroke-miterlimit:10}.st4{fill:#69b2b1}</style>   
<circle cx="47.9" cy="47.9" r="47.9" fill="#12192c"/>      
<circle cx="47.9" cy="47.9" r="40.7" fill="#f6a2a4"/>      
<defs><circle id="SVGID_1_" cx="47.9" cy="47.9" r="40.7"/></defs>    <clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"/></clipPath>   
<g clip-path="url(#SVGID_2_)">        
<path class="st3" d="M63.9 45.6H32c-4 0-7.2 1.9-7.3 4.3l-.8 26.6H72l-.8-26.6c-.2-2.5-3.4-4.3-7.3-4.3z"/>        
<path class="st4" d="M74.3 86.9L66 88.2C53.8 90 41.4 90 29.1 88.1l-7.7-1.2v-14c0-4 3.2-7.2 7.2-7.2h38.5c4 0 7.2 3.2 7.2 7.2v14z"/>      <path class="st3" d="M31.8 47.3h-.6c-.7 0-1.2-.6-1.2-1.2V23.2c0-.7.6-1.2 1.2-1.2h.6c.7 0 1.2.6 1.2 1.2v22.9c0 .7-.6 1.2-1.2 1.2z"/>        
<circle class="st4" cx="31.5" cy="20.7" r="2.8"/>        
<circle class="st4" cx="47.9" cy="51.4" r="20.3"/>        
<path d="M64.5 53.1c0 8-7.4 11.2-16.5 11.2S31.4 61 31.4 53.1s7.4-14.4 16.5-14.4 16.6 6.4 16.6 14.4z" fill="#13192d" stroke="#12192c" stroke-width="1.489" stroke-miterlimit="10"/>        
<path fill="none" stroke="#12192c" stroke-width="1.489" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-dasharray="9.6793,3.7228" d="M65.9 88V76.9"/>        
<path fill="none" stroke="#12192c" stroke-width="1.489" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M29.6 87.9v-11"/>  
</g>  
</svg>

First recommendations:

Move the <style> content to the CSS file (assuming you can use your SVG inline and that you have a stylesheet linked in your document).
Rename the IDs with something that makes sense to you.
Round those complicated numbers, like stroke-width="1.489" to stroke-width="1.5". This is something that could happen if you resize your vectors in Illustrator with the option of scaling borders checked.
Remove the stroke-miterlimit="10" as we don’t need it since our stroke-linejoin is round.
This code will be our astronaut template. We need to wrap everything in a group, add an ID to that group and place it inside a <defs> tag. Notice that we already have a <defs> element with a circle inside it. We can remove that one as it will be part of a bigger <defs> tag.

Notice that the first two circles are filled shapes with different radius and color. We can keep the smaller one and add a stroke big enough to achieve the same effect — again, something that we could avoid using a circle with border in Illustrator in the first place.

Another important thing is that our current viewBox is too small for what we want to build. Let’s make it bigger and add some negative space on the x-axis so we can start cloning our astronaut from the middle.

To learn more about viewBox, check out this beautiful guide to scaling SVG by Amelia Wattenberger.

We will end with something like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-400 0 1000 5000">    
<defs>  
<g **id="astronaut"**>      
<circle cx="94.5" cy="48" r="44" fill="currentColor" stroke="#12192c" stroke-width="8"/><clipPath id="a"><circle cx="94.5" cy="47.9" r="40"/></clipPath>      
<g clip-path="url(#a)"><path class="st3" d="M110.5 45.6H78.6c-4 0-7.2 1.9-7.3 4.3l-.8 26.6h48.1l-.8-26.6c-.1-2.5-3.4-4.3-7.3-4.3z"/><path class="st4" d="M121 86.9l-8.3 1.3C100.4 90 88 90 75.8 88.1l-7.7-1.2v-14c0-4 3.2-7.2 7.2-7.2h38.5c4 0 7.2 3.2 7.2 7.2v14z"/><path class="st3" d="M78.4 47.3h-.6c-.7 0-1.2-.6-1.2-1.2V23.2c0-.7.6-1.2 1.2-1.2h.6c.7 0 1.2.6 1.2 1.2v22.9c0 .7-.5 1.2-1.2 1.2z"/><circle class="st4" cx="78.1" cy="20.7" r="2.8"/><circle class="st4" cx="94.5" cy="51.4" r="20.3"/><path d="M111.1 53.1c0 8-7.4 11.2-16.5 11.2S78 61 78 53.1s7.4-14.4 16.5-14.4 16.6 6.4 16.6 14.4z" fill="#13192d" /><path fill="none" stroke="#12192c" stroke-width="1.5" stroke-linecap="round" d="M112.5 88V76.9"/><path fill="none" stroke="#12192c" stroke-width="1.5" stroke-linecap="round" d="M76.3 87.9v-11"/></g>  
<g>  
</defs>   
</svg>

What goes inside the <defs> won’t render anywhere. To start cloning our astronaut, we need to link its ID inside a <use> element like this:

<use xlink:href="**#astronaut**"/>

_xlink:href_ is deprecated since SVG2, but is better to use it for compatibility purposes. You can use href in modern browsers, but I tested it on Safari and it wasn’t working as of this writing. If you usexlink:href,make sure you include this namespace in your SVG tag: _xmlns:xlink="http://www.w3.org/1999/xlink_ (you won’t need it if you decide to use _href_).

Now we can add the corresponding text to this first figure and align it with the transform attribute. We better place both elements inside a group so in the future instances we’ll be able to translate the whole group to the position we want:

<g transform="translate(-95 210)">     
 <use xlink:href="#astronaut"/>     
 <text transform="translate(25 130)">Tech Leader</text>   
</g>

The connecting lines are simple shapes that can be drawn directly with <path>. Paths look scary but, for rect lines, there is not much to worry about. I’ll explain this code:

<path class="line" d="M-4 200v-25h200"/>

d="" is for data and that’s where we’ll place our commands. M is to move our hand to the place where we’ll start drawing (but it’s not drawing anything). -4 200 means we place our pencil four units to the left and 200 to the bottom of our viewBox (following the orientation of the SVG coordinate system). v is the command to start drawing a vertical line that will go from this place to -25 units up. h is for horizontal, so we’re drawing a line from there to 200 to the right. It feels like logo writer.

I separated the lines in three paths, but we can use just one with the M value after a series of commands to move our hand and start drawing from a new point in the coordinate system.

Take a look at the final document. Now the file weighs 779 bytes and has 12 lines of legible and scalable code:

If we declare any value in the attributes we defined in the _<defs>_ then it won’t be possible to change it in their clones because of the nature of the _<use>_ element. That’s why in the example above the fill of the main circle was replaced with a value of _currentColor_ to have control of the backgrounds of all the replications. _currentColor_ will inherit the CSS color value of the element (or any element above it). In the SVG, I’m adding a class to some replicated astronauts and adding a color value in CSS to those classes. This way, I’ll be able to change all instances of the _<use>_ element with that class. To understand more about _<use>_ and how to style its content, this post by Sara Soueidan has everything you need to know.

With this code ready, we’ll be able to scale the graphic to something like this much more easily:

This is the complete code:

Here are the three examples side by side to compare legibility and amount of code, we went from 241 to 12 neat lines:

From left to right: Code direct from Illustrator, code after SVGOMG, code after optimization.

This article was first published on CSS-Tricks with edits from Chris Coyier and Geoff Graham

Usar y reusar todo en SVG … ¡Incluso animaciones!

Mariana Beldi — Tue, 17 Mar 2020 15:17:05 +0000

Cómo crear y optimizar SVG y animaciones CSS

Read the English version here.

Si estás familiarizado con SVG y animaciones CSS, o empezaste a trabajar con ellas a menudo, acá hay algunas ideas a tener en cuenta antes de comenzar a trabajar. Este artículo trata sobre cómo escribir y optimizar código con el elemento , las variables CSS y las animaciones CSS.

Parte 1: El elemento SVG `<use>`

Si sos un desarrollador al que le gusta mantener su código DRY o sos de usar las variables Sass / CSS, es muy probable que te guste esta etiqueta.

Digamos que tenés un elemento que se repite muchas veces en tu gráfico. En lugar de repetir una parte compleja del código varias veces en el SVG, se puede definir esta parte una vez y luego clonarla en otro lugar del documento con el elemento <use>. Esto no solo reducirá una enorme cantidad de código, sino que también lo hará más simple y fácil de manipular.

Para comenzar a implementar el elemento <use>, abrí tu SVG y seguí estos pasos:

Identificá la parte del código que querés clonar
Agregale un ID a esa parte
Linkeala dentro del tag <use> de esta forma: <use xlink:href="#id"/>

Eso es todo! Tu nuevo clon está listo, ahora podés cambiarle los atributos que necesites (por ej. la posición x o la posición y).

Veamos un ejemplo muy conveniente

Este es un caso real donde necesitaba animar un cubo grande compuesto por cubos más pequeños. Algo así como un cubo Rubik.

Empecemos a dibujar un pequeño cubo en SVG usando formas básicas (SVG basic shapes, en este caso sólo rect) y transformaciones (transforms):

<svg viewBox="-130 -20 300 100">   
 <g id="cubo">     
  <rect width="21" height="24" transform="skewY(30)"/>     
  <rect width="21" height="24" transform="skewY(-30) translate(21 24.3)"/>     
  <rect width="21" height="21"  transform="scale(1.41,.81)   rotate(45) translate(0 -21)"/>   
 </g> 
</svg>

Las formas (rects) están agrupadas con el elemento <g> (group) para poner agregarle un ID (#cubo) a toda la figura.

Ahora, hagamos un cubo más grande clonando la unidad que acabamos de crear. Primero hay que ubicar el grupo dentro del elemento <defs> dentro del tag de SVG. Dentro de <defs> podemos poner cualquier cosa que queramos reutilizar, puede ser una forma, un grupo, una gradiente, casi cualquier elemento de SVG. No se renderizará nada de lo que incluyamos dentro de <defs>, hasta que lo usemos fuera de él.

Para poder usar la figura que acabamos de definir, vamos a linkearla con su ID dentro del elemento <use> todas las veces que lo necesitemos, cambiando su posición x y su posición y en cada clon de la siguiente manera:

<use xlink:href="#cubo" x="142" y="124"/> 
<use xlink:href="#cubo" x="100" y="124"/> 
<!-- ... -->

Ahora hay que ubicar cada clon del cubo pequeño, recordando que el último elemento se muestra al frente, con esto tendremos nuestro primer gran cubo listo!

xlink:href está obsoleto desde SVG2, pero es mejor usarlo por cuestiones de compatibilidad. En algunos navegadores modernos se puede simplemente usar href pero al momento de escribir esta nota lo testié en Safari y no está funcionando ahí. Si usás xlink:href asegurate de incluir este namespace en tu SVG tag: xmlns:xlink='http://www.w3.org/1999/xlink' (no lo necesitas si decidís usar href).

Parte 2: Usando variables CSS para aplicar diferentes estilos al gráfico reutilizado

Elegí un color principal para el cubo, con tonalidades más claras y oscuras en los lados y el borde. Pero qué pasa si quiero crear un nuevo cubo con otro color?

Podemos reemplazar el color de relleno y bordes con variables CSS para hacer estos atributos más flexibles. De esta manera, podremos reutilizar la misma unidad del pequeño cubo con otra paleta, en vez de definir un segundo pequeño cubo con distintos colores.

Por qué no agregar una clase al nuevo cubo y cambiar los colores con CSS? Eso haremos, pero primero, intentá inspeccionar el elemento <use>. Vas a notar que se renderiza en el Shadow DOM. Significa que no es vulnerable a scripts o estilos, como los elementos en el DOM normal. Cualquier valor que definas en la figura dentro de <defs> será heredado por todas sus instancias y no podrán reescribirse con CSS. Pero si remplazamos esos valores con variables, podremos controlarlas con CSS.

En nuestra unidad de cubo pequeño, reemplazaremos cada valor de relleno y borde con un nombre de variable semántico.

Por ejemplo esto:

<rect fill="#00affa" stroke="#0079ad" />

… puede reemplazarse con esto:

<rect fill="var(--colorPrincipal)" stroke="var(--colorBorde)" />

A partir de acá, podemos duplicar el SVG anterior para crear un nuevo cubo grande. Sin embargo, no necesitamos duplicar el elemento <defs> si vamos a tener ambos cubos en el mismo documento. Podemos agregar una clase a cada SVG y controlar la paleta de colores con CSS, defefiniendo los valores de cada variable.

Creemos una paleta para el cubo azul y otra para el cubo rosa:

.cubo-azul {   
 --mainColor: #009CDE;   
 --strokeColor: #0079ad;   
 --lightColor: #00affa;   
 --darkColor: #008bc7; 
}  
.cubo-rosa {   
 --mainColor: #de0063;   
 --strokeColor: #ad004e;   
 --lightColor: #fa0070;   
 --darkColor: #c7005a; 
}

De esta manera podemos crear la cantidad de cubos que queramos y cambiar todos los colores desde un solo lugar.

Parte 3: Reusando animaciones

La idea de esta parte es quebrar el cubo cuando pasamos el mouse sobre él — algo así como una vista explotada, algunas piezas se alejarán del centro cuando pasamos el cursor sobre los cubos.

Empecemos definiendo dos movimientos, uno por cada eje: move Y y move X. Al definir las animaciones en movimientos, podremos reutilizarlas en cada cubo. Las animaciones consistirán en mover al cubo desde su posición inicial hasta 30px o 50px de distancia en una misma dirección. Podemos usar un transform translate (X o Y ) para lograrlo.
Por ejemplo:

@keyframes moveX {   
 to { transform: translateX(-35px); } 
}

Pero si queremos reutilizar esta animación, es mejor remplazar el valor numérico por una variable:

@keyframes moveX {   
 to { transform: translateX(var(--translate, 35px)); } 
}

Si la variable no está definida, el valor por defecto va a ser 35px.

Ahora necesitamos al menos una clase para enlazar a esta animación. En este caso serán dos clases, para mover los cubos en el eje x: .m-izquierda y .m-derecha.

.m-izquierda, .m-derecha {    
 animation: 2s moveX alternate infinite;  
}

Para que el cubo se mueva a la izquierda, necesitamos un valor negativo, pero también podemos declarar un valor numérico distinto. Podemos definir nuestra variable dentro de la clase .m-izquierda así:

.m-izquierda { --translate: -50px; }

Acá estamos declarando que, cuando agreguemos la clase .m-izquierda a un elemento, se lanzará la animación moveX (la que definimos en los @keyframes) que tardará dos segundos en moverse en el eje x hasta alcanzar una nueva posición 50px a la izquierda (los números negativos se mueven a la izquierda). Luego, la animación alterna de dirección para empezar a moverse desde esta última posición durante dos segundos hasta alcanzar su estado inicial. Lo hará en un loop infinito, porque eso hemos declarado al poner infinite.

Podemos declarar otra variable para la clase .m-derecha pero si no lo hacemos, recordá que tomará el valor por defecto de 35px que declaramos al principio.

Por defecto el valor de animation-play-state es running pero quizás no queremos que los cubos se muevan todo el tiempo. Sería muy molesto si usamos estas cubos en un sitio con texto cerca de ellos. Así que intentaremos hacer que la animación se ejecute sólo cuando pasamos el cursor por encima:

svg:hover .m-izquierda {
 animation: 2s moveX alternate infinite; 
}

Podés probar este código por tu cuenta y verás que la animación salta muy rápido a su estado inicial cada vez que quitamos el cursor de encima. Para evitar esto, podemos usar el valor paused al final de la propiedad animation:

.m-izquierda {   
 animation: 2s moveX alternate infinite paused; 
}

Ahora la animación está pausada pero se disparará on hover agregando esta línea de CSS:

svg:hover * {
 animation-play-state: running;
}

Podemos aplicar cada una de estas clases a diferentes elementos dentro del SVG. En el primer cubo estamos moviendo algunas unidades; en el segundo cubo, estamos aplicando estas clases a grupos de unidades.

Para terminar…

Tardé mucho en darme cuenta que podía reutilizar un simple cubo pequeño para construir todo. Trabajé en esa unidad para hacerla isométrica y así poder alinearla fácilmente con las demás unidades. A esta altura mi unidad era un path, pero decidí reemplazarlo por SVG rect para reducir la cantidad de código y hacerlo más legible.

Aprendí que es mejor tomarse un tiempo para analizar qué se puede hacer con SVG antes de embarcarse en la tarea. En este caso hubo que modificar el diseño original levemente, pero esa modificación permitió hacer un código más mantenible y escalable. Puede tomar más tiempo al principio pero a largo plazo ganaremos mucho más.

Este artículo fue publicado originalmente en CSS-Tricks editado por Chris Coyier y Geoff Graham

How to use and reuse everything in SVG… even animations

Mariana Beldi — Tue, 17 Mar 2020 15:01:02 +0000

Build and optimize SVG and CSS animations.

Link a la versión en español.

If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your code with the <use> element, CSS Variables and CSS animations.

Part 1: The SVG element

If you are a developer that likes to keep your code DRY or a big fan of Sass/CSS variables, there is a good chance that you will like this tag.

Let's say you have an element that is repeated many times in your graphic. Instead of having a complex part of your code repeated many times in your SVG, you can define this part once and then clone it somewhere else in your document with the <use> element. This will not only reduce an enormous amount of code but also will make your markup simpler and easier to manipulate.

To start implementing the <use> element, go to your SVG and follow these steps:

Identify the part of the code that you want to clone
Add an ID to that part
Link it inside your <use> tag like this: <use xlink:href="#id"/>

That's it! Your new clone is ready, now you can change its attributes (e.g. x and y position) to fit your needs.

Let's dive into a very convenient example

I want to share this real case where I needed to animate a big cube made of little cube units. (Imagine the classic Rubik's Cube.)

We'll start by drawing the cube unit in SVG using basic shapes and transforms:

<svg viewBox="-130 -20 300 100">   
 <g id="cube">     
  <rect width="21" height="24" transform="skewY(30)"/>     
  <rect width="21" height="24" transform="skewY(-30) translate(21 24.3)"/>     
  <rect width="21" height="21"  transform="scale(1.41,.81)   rotate(45) translate(0 -21)"/>   
 </g> 
</svg>

Note that the shapes are grouped in a <g> element so we can add the ID to the whole figure.

Next, let's build a bigger cube cloning this unit. First, we need to wrap the cube from the previous example inside the <defs> tag inside the SVG. In the <defs> element we can put whatever we want to reuse, which could be a single shape, a group, a gradient.. almost any SVG element. They won't render anywhere unless we use them outside this tag.

Then we can link the unit as many times as we want using its ID and change the x and y position on every clone like this:

<use xlink:href="#cube" x="142" y="124"/> 
<use xlink:href="#cube" x="100" y="124"/> 
<!-- ... -->

Now we have to position every cube remembering that the last element will appear at the front, after that, we'll have our first big cube ready!

xlink:href is deprecated since SVG2, but it is better to use it for compatibility purposes. In modern browsers, you can just use href but I tested it on Safari and at the time of writing is not working there. If you use xlink:href make sure you include this namespace in your SVG tag: xmlns:xlink="http://www.w3.org/1999/xlink" (you won't need it if you decide to use href).

Part 2: Using CSS variables to apply different styles to your reused graphic

I chose a main color for the cube, which is a lighter and a darker shade for the sides and a stroke color. But what if we want to make a second cube a different color?

We can replace the fills and strokes with CSS variables to make these attributes more flexible. That way, we'll be able to reuse the same cube unit with another palette (instead of defining a second unit with different colors for a second cube).

Why not add a class to the new cube and change the fill color with CSS? We'll do that, but first, try to inspect a <use> element. You'll notice it renders in the Shadow DOM, which means it is not vulnerable to scripts and styles, like elements in the normal DOM. Whatever values you define in the figure inside <defs> will be inherited by all its instances and you won't be able to rewrite those with CSS. But if you replace those values with variables, then you'll be able to control them in CSS.

In our cube unit, we'll go through each side and replace the fill and stroke values with semantic variable names.

For example, this:

<rect fill="#00affa" stroke="#0079ad" />

…can be replaced with this:

<rect fill="var(--mainColor)" stroke="var(--strokeColor)" />

From here, we must duplicate the SVG to build a second cube. However, we don't need to duplicate <defs> if we are keeping both in the same document. We can add a class to each SVG and control the color palette through CSS, redefining the values of the variable.

Let's create a palette for the blue cube and another one for the pink cube:

.blue-cube {   
 --mainColor: #009CDE;   
 --strokeColor: #0079ad;   
 --lightColor: #00affa;   
 --darkColor: #008bc7; 
}  
.pink-cube {   
 --mainColor: #de0063;   
 --strokeColor: #ad004e;   
 --lightColor: #fa0070;   
 --darkColor: #c7005a; 
}

This way, we can add as many cubes as we want and change all colors from one place.

Part 3: Reusing animations

The idea for this instance is to break the cubes on hover - something like an exploded view so some pieces will move away from the center when we place the cursor over the cubes.

Let's start by defining two movements, one for each axis: move Y and move X. By dividing the animations into movements, we'll be able to reuse them in every cube. The animations will consist of moving the cube from its initial position to 30px or 50px away in one direction. We can use a transform translate (X or Y ) to achieve that.

For example:

@keyframes moveX {   
 to { transform: translateX(-35px); } 
}

But if we want to be able to reuse this animation, it's better to replace the numeric value with a variable, like this:

@keyframes moveX {   
 to { transform: translateX(var(--translate, 35px)); } 
}

If the variable is not defined, the default value will be 35px.

Now we need at least one class to bind to the animation. In this case, though, we need two classes to move cubes in the x-axis: .m-left and .m-right.

.m-left, .m-right {    
 animation: 2s moveX alternate infinite;  
}

For the cube to move left, we need a negative value, but we can also declare a different number. We can define our variable like this inside the .m-left class:

.m-left { --translate: -50px; }

What's happening here is we're declaring that when we add the class .m-left to one element, this will play the animation moveX (the one defined in the @keyframes) which will last two seconds to translate in the x-axis and reach a new position that is -50px left. Then, the animation alternates directions so that it moves from the last position and take two more seconds to go to its original state. And so on, because it's an infinite loop.

We can declare another variable to the .m-right class but if we don't, remember that it will take the 35px we declared at the beginning.

The default animation-play-state value is running but maybe we don't want the cubes to move all the time. It would be very distracting and annoying to use on a site with some nearby content. So, let's try to play the animation only on hover by adding this:

svg:hover .m-left {
 animation: 2s moveX alternate infinite; 
}

You can try it by yourself and will find that the animation is jumping super fast to the initial state every time we place the cursor out of the cube. To avoid it, we can add the value paused at the end of the animation shorthand:

.m-left {   
 animation: 2s moveX alternate infinite paused; 
}

Now the animation is paused but will be running on hover by adding this line of CSS:

svg:hover * {
 animation-play-state: running;
}

We can apply each class to different elements in the SVG. In the first blue cube, we are moving single cubes; in the second one, we're applying those classes to groups of cubes.

One last thing…

It wasn't until later that I realized I could reuse a single unit to build them all. I worked on the small cube to make it isometric enough so it could align easily with the other ones next to it. At this point, my unit was a <path> but I decided to replace it with SVG shapes to reduce the code and get cleaner markup.

I learned that it is better to take some time to analyze what can be done with SVG before drawing every single shape and dealing with a huge amount of code. It might take more time in the beginning but will save you a lot of time and effort in the long run.

This article was first published on CSS-Tricks with edits from Chris Coyier and Geoff Graham

Store Loading animation

Mariana Beldi — Sat, 07 Dec 2019 14:49:49 +0000

with SVG and CSS

We were building a site where the user was able to create their own store for selling products online. This task might take a while, so we decided to make a loading animation to explain what was happening at the moment.

This was my proposal, SVG drawing + CSS animations = 22k weight:
(place your mouse over the tree and wait for the >.<)

Contact form with animated feedback

Mariana Beldi — Fri, 06 Dec 2019 17:41:41 +0000

SVG interactions to improve your UX with UI

Animations are the best way to bring life to our websites: they help us tell stories and communicate what is happening at that moment. They naturally catch our attention so it’s important to learn how and when to apply them. If we use animations in the right way, we can improve our website’s usability, if we abuse them we can ruin the user experience.

In this article we’ll show an example of interactive animations, the ones that appear right after the users take an action and can help them notice the results.

A good case for using SVG interactions are form validations. We can let the user know what is happening at the time they interact with the inputs. This is an example that you can find at our Leniolabs website.

In this example we need both inputs to be filled. As soon as the user types any letter the green check icon will confirm that the input is valid. This is a small interaction that we can achieve by adding the required HTML5 attribute to our text input or textarea like this:

<input type=”text” name=”name” id=”name” aria-required=”true” autocorrect=”off” required>

In CSS we use the selector + pseudo-class: input:valid or textarea:valid with a SVG in the background that will show only when the element is valid:

input#name:valid, textarea:valid {
 background: white url(‘data:image/svg+xml,\
 <svg xmlns="http://www.w3.org/2000/svg" width=”26" height=”26">\
 <circle cx=”13" cy=”13" r=”13" fill=”%23abedd8"/>\
 <path fill=”none” stroke=”white” stroke-width=”2" d=”M5 15.2l5 5 10–12"/>\
 </svg>’) no-repeat 98% 5px;
 border: 3px solid $lightgreen;
 transition: background ease 0.2s;
}

When adding an inline SVG in CSS is important to use the namespace xmlns=”http://www.w3.org/2000/svg" or the image won’t be displayed.

The transition of the background will make the SVG move from its initial position to 98% to the right, as defined in the background shorthand in CSS.

In JavaScript we can check those validations and add a class to the form (and the SVGs) when both fields are completed, and another class if at least one input is empty. Each class will bind to a CSS animation: one will make the form shake and the envelop fall out of the Send button; the other one will make the envelop fly directly to the mailbox and the red flag will be up.

document.getElementById(‘sendBtn’).addEventListener(‘click’, function (e) { 
 if (submitName[‘0’].validity.valid && submitText[‘0’].validity.valid) {
 e.preventDefault();
  message.classList.remove(‘not-active’);
  message.classList.add(‘active’);
  mailbox.classList.add(‘active’);
 }
 else {
  message.classList.add(‘not-active’);
  formshake.classList.add(‘active’);
 }
});

Here is the complete code: