MKBHD logo animation | Step by step SVG and CSS tutorial

In this post I'll walk through the steps taken to create an animated loading animation in CSS and SVG for MKBHD, or Marques Brownlee. I've been following Marques on YouTube for years. His tech reviews are top notch, and his passion for high quality videos is obvious in every upload. If you don't already subscribe to his channel, go do that now, you won't regret it. For this tutorial, I've included the steps to take in Sketch too since a lot of you were asking for it. Let me know if this is something you'd like to see more of though. :)

I originally posted the animation on Twitter and didn't expect much, until the man himself saw it, replied, and retweeted it. The response was incredible and I'm really greatful. Marques if you're reading this, thank you!

Creating the SVG graphic in Sketch

NB: Click here if you want to skip the actual graphic part of this tutorial and get straight to the code part where we'll animate the logo with some buttery smooth 60FPS CSS animations.

I create all my vector graphics in Sketch. I find it's really great for these types of projects. It's not free, but it has a free trial so you can try it out at no cost. I'm not an affilliate of theirs, but I really should be :D.

To get started, create a new Artboard. Hit "A" on your keyboard and drag a new artboard across the screen.

Make the artboard a square shape, 400x400 (1). I find this size works best for most of my loading animation projects. I've also gone ahead and color-picked the dark grey from MKBHD's logo and made the artboard background that colour, 3D4346 (2).

Next, we'll start drawing the actual logo. For the purposes of this animation, I've broken the logo out into 3 pieces.

The #white element sits on top of the #red element in terms of order. Then the #redoverlap element sits on top of them all to achieve the visual effect of one element slotting through the other.

To make the polygon shapes you can use the Rectangle tool and then free transform the element so that it skews to the right angle. Protip: screenshot the logo and trace over it so you get it as close as possible to the real thing.

The final thing we need to do in Sketch is to add the four white progress bar segments that gradually appear as the animation progresses.

To make them, I simply rotated the #red element so that it was level. For me this was about -28 degrees.

I then filled that shape with four equally sized polygons, making sure that they were seated behind the red outer shape.

We're almost finished with Sketch, but first we need to make sure our layers are named appropriately. This makes our lives easier later when we're targeting certain elements with CSS.

I named my layers in a way that made sense to me. You can make them whatever makes sense to you, but you'll be referencing those names in the code later so make them easy :)

Next step is to export our creation as SVG.

Make sure you have the format set to SVG (1), and then export your file to a location of your choice (2). Remeber where you save it, you'll need to go there in a second and copy the code to a codepen.

Tools and prerequisites

I use Codepen for most of my animations. It's really handy for seeing your code changes straight away. It also makes it easy to include resources like Bootstrap. Including a whole library is a little overkill, but it gets me set up quickly and I'm familiar with it, so for development purposes, it's fine.

The browser I use is Chrome, for the simple fact that it doesn't need any prefixing for the animations to work. We'll need to remember this when we're finished coding though, and run our CSS through an auto-prefixer so everything works ok in other browsers.

Animating the logo with CSS

Getting started with CodePen

You can use the codepen below to get started. Open it up and click "Fork" in the top right of the screen to create your own version of this pen.

Open up your SVG file in a text editor and copy-paste your SVG code onto the paragraph element in the pen.

transform-origin: 50% 50%; moves the origin of the element to its centre. This sounds complicated, but it just means that when we apply a rotation, it'll rotate about its centre.

transition: 0.25s ease; defines how long a transition applied to this element will take (0.25s, in this case), and then defines the easing. Easings.net is a good resource for visualising the different values that could go here (check browser compatibility though).

transform: rotate(-27.5deg) translate(-2px,0) is what actually does the magic. We're telling it to rotate the element -27.5 degrees (28 was a tad too much), and we're also translating (moving) the element a tiny bit. I had to do this to make it look just right.

The reason we have the transform in a seperate CSS rule is so that we can add and remove the animation with some Javascript, by adding or removing the .loading class.

Some Javascript to make the magic happen

In order to simulate the "loading" state of the animation, we'll add a Javascript function. This function will add the loading class to elements that need it.

At this stage we need to make sure that we have the snapsvg.io library installed. This is essentially jQuery, but for SVG. We can add it to our codepen by clicking the little cog icon beside the JS panel, and adding it via the CDN link:https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js

If you forked the pen I shared earlier, this will already be done for you :)

Add the code onclick="startLoading()" to the button element. This will call the startLoading() function when it's clicked.

Next, we need to define our startLoading() function in the JS panel. This is where we'll add the loading class to the elements that need it. We'll start by selecting the #red element and adding the loading class to it using Snap. I'll also use jQuery to hide the button element.

Sweet! The red line disappears. Now to take care of the large white block. In my SVG, I've simply named this white. So, like before, we'll add some CSS to animate that element when it has the loading class.

Let me explain each line of this CSS:transform-origin: 50% 50%; - We're going to be flipping and rotating the element, this code makes sure that we'll be rotating around the centre of the element by making sure the origin is 50% from the left, and 50% from the top of the element

transition: all 0.5s ease; - This is telling the browser that any animation we add to this element, make it half a second long and use ease easing.

transform: scaleX(-1) rotate(27.5deg); - This is the magic of this animation, and gives the white element the cool "flipping" effect.

scaleX(-1) is what "mirrors" the element along its X axis. Then, at the same time, we're rotating the element 27.5 degrees, so that it appears to fit right into the redoutline element.

opacity: 0 is what makes the element invisible.

Then in our JS, we need to add a line that gives the white element the loading class, to apply the animation when the button is clicked.

Adding the "progress" steps

We've gotten a lot done! But there's more to do. Now, we need to add the 4 white elements that appear as the "loading" completes. For the purposes of this animation, all I did was add a Javascript function that sequentially reveals the elements in order.

But first, the CSS. Add class="progressBlock"to each progress element in the HTML.

Next, the CSS to reveal the elements. Earlier we added the rule to hide the .progressBlock elements. We'll add another CSS rule under that one that will animate those elements when the loaded class is applied.

You can see that I have 2 global variables, timerId and progress. The frame() function is where the magic happens. It runs every hald a second (500ms), and checks the value of progress. It then reveals the appropriate element by giving it the loaded class we defined earlier.

One last thing - cross-browser compatibility

At the start I mentioned how Chrome is the best browser to use for making these animations as it doesn't need any prefixes. But, we need to consider all browsers, or at least as many as we can.

Thankfully, this is fairly quick and easy with online prefixers. My current go-to is autoprefixer.github.io. I just copy-paste the CSS in there, and it adds all the prefixes we need.

And that's it! We've used some fairly simple CSS animations to make an animated loading animation with SVG, with only some Javascript for adding and removing classes as required, and made it all cross-browser compatible.

What did you think of this write-up? I hope I covered everything you came here for. Let me know in the comments below, and if you want to learn more about how I make these animations, make sure you subscribe below.

I'm @cderm on Twitter, or if you'd like to get in touch by email just reply to the welcome email you'll get after you subsribe. I read and reply to all of them.

If you'd like to know how to make this into a GIF, check out my quick post on that here.