Alien Invasions, SVGs and CSS Animations
I have been a bit obsessed with SVGs and CSS animations lately, so I thought it could be a good idea to share my latest finding with you guys. The idea of this article is walk you through some basic concepts that will allow you to create cool animations like this one, with SVGs and CSS.
Ok, but what is an SVG?
SVG stands for Scalable Vector Graphics, It's an image format that you can write yourself using a text editor or use programs like Illustrator or Sketch to create more complex drawings. The main advantages of using SVGs instead of other commom raster image formats like PNGs or JPGs are:
1- You don't have to worry about retina displays or image sizes, SVGs are Scalable and will aways look good no matter the resolution of the display.
2- You can manipulate the layers of the drawing, changing things like its shape, color, opacity and position.
And how do SVGs work?
In an SVG code, you can have multiple elements that allow you to create different shapes. On the codepen bellow, you can see an example SVG that has a Polygon, a Rect ( Rectangle ), a Circle and a Path element.
The first important thing to notice is the viewBox in the SVG tag itself. The first two numbers represent the X and Y coordinates for the origin of the box, and the last two numbers the width and height of the box.
SVGs accept a wide range of units, like Pixels, Points, Centimetres and Inches. If you don't specify a unit, the default will be Pixel.
In the polygon element, you'll notice a sequence of point numbers. These numbers are XY coordinates, for each point that creates the polygon. These coordinates are relative to the upper left corner of the viewBox.
In the rect element, you'll see the X and Y coordinates for the starting point of the rectangle, and also the width and height.
In the circle element, you'll notice the coordinates for the CX and CY, these are the XY coordinates for the Center of the circle. You'll also notice an R, that stands for Radius and will define how big the circle is.
The path element is probably the most complex one to write the code yourself, but it's also the most powerful in terms of allowing you to create complex shapes. Ideally you'd use something like Illustrator or Sketch to make it easier. If you want to understand deeply how it works, I recommend you read this awesome article by Jakob Jenkov.
There are lots of CSS properties specific to SVGs, but i'd like to highlight a few of them:
fill: Defines the color of the area inside the shape
stroke: Defines the color of the line around the shape
stroke-linecap: It defines the appearance of the start and end point of a path, it can be set to round, butt or square.
stroke-linejoin: It defines how the join between two lines will look, or how "corners" will look. It can be set to round, miter or bevel.
stroke-width: As the name suggests, it allows you to control the width of the path.
Animating things
Take a look at the SVG code for our spaceship bellow:
You'll notice that I've added classes to each individual element of the drawing. We'll use these classes to apply the animations.
To create animations with CSS, you can use keyframes:
You have to define a name for the animation and a sequence of "steps". On the example above, I'm creating a simple rotate animation that goes from -30deg to 30deg and another one that goes from transparent to opaque, by changing the opacity value. You can use percentages if you want to define more than two steps for the animation.
After you have created the keyframes, you can apply the new animation to a class:
It's really important though, to understand that the transform-origin of the element you apply the animation to can drastically change the effect of the animation. You can set the origin to bottom, right, left and top or use XY coordinates to set it to a specific spot. It's also possible to use percentages, but it doesn't work quite well on some browsers, so I'd avoid that :)
Take a look at the example bellow to understand how the same animation applied to the same object can have different effects, just by changing the transform-origin:
The transform-origin is important to create chaining effect animations; like on the "legs" of our spaceship. On the Codepen bellow, you'll notice that I've applied rotate animations to all the legs and the head.
Take a look at the structure of each leg:
Notice that each leg is wrapped by a group tag. We can apply the rotate animation to the tip and to the group tag to create the chain effect. All the legs are using the same animation. You can play around with the animation-timing-function and the animation-duration to see how they affect the overall feel of the animation :)
Now let's make the spaceship float:
To achieve that effect, I've created an animation called "float" — that basically translates and rotates the element a bit — and then applied it to the class of the SVG tag itself.
It would be cool to make the background scroll horizontally, so we feel like the spaceship is moving forward. To achieve that, we can create an animation called "background-scroll":
Then, we can apply that animation to each layer of our background. The same way it happens in real life, the objects that are close to you should move faster than the objects that are far away. You can achieve that by manually changing the animation-duration on each layer of the background. I'm using SCSS, so I've done that in a for loop:
Lastly, I'd like to include a simple animation that changes the hue and lightness of each "headlight" of the spaceship.
That’s all, folks
I had a lot of fun creating the examples for this articles, and I hope you found it fun to follow along. There are also lots of cool things you can do with Javascript and SVGs. I'll write about that in the future :)
If you like what you read, make sure to ❤️ it bellow. Feel free to comment and let me know if you think I could improve this article somehow.
Would you like to know a little more about how we create great digital products and change people’s lives? Visit our website!
