It's been quite a while since my last post here - 2 years to be precise. And it's been a wild two years, I tell ya. I got married, switched jobs, had some personal issues, a ton of projects, and way too many ups and downs to put them into a tech post intro.
One of my goals for 2026 was to get back into writing and to continue the style of posts and content that I've been producing for many years before my 2-year writing hiatus. I'm working on quite a few posts, actually, but today, we'll start with a relatively slow one. Or something rather old, I should say.
Old? So, no AI?
No. No AI. Quite the contrary. If you've read the title, and I'm sure you did, otherwise you wouldn't have clicked, we're going to build a little something called the "DVD logo animation".
The what?
... please don't tell me I'm that old by now.
There used to be a time when we would rent or buy movies not by clicking on them, but physically acquiring a round shiny object with a hole in the middle: A DVD. DVD used to stand for "Digital Video Disc", but since many companies (and private people) started putting non-movie data on them, the acronym today stands for "Digital Versatile Disc".
To read data off them, we used special devices called "DVD players". Most of them, when you plugged them into your TV and turned them on, would show the DVD logo bouncing around the screen at perfect 45-degree angles. Some people may even remember sitting in front of this thing, waiting for it to bounce right into the corner of the screen.
The inspiration for this came from a way-too-long YouTube session (ironic, isn't it?) where I saw someone build this animation out of Lego.
Let's get coding already!
Alright, alright, enough nostalgia. We start by acquiring the DVD logo as an SVG. Luckily, Wikimedia is just the place to look for that.
We then put it into a small little HTML file:
<div class="screen">
<svg class="logo" width="100%" height="100%" viewBox="0 0 1058.4 465.84" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="#fff"/>
</svg>
</div>
(I spare you the d value of that path, it's really not the most interesting thing.)
We then add a bit of styling:
body {
margin: 0;
padding: 0;
background-color: #000;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.screen {
background-color: #000;
border: 3px solid #fff;
width: 80vw;
aspect-ratio: 16/9;
}
.logo {
width: 12vw;
height: auto;
position: relative;
transition: all linear;
top: 0;
left: 0;
}
This will add a white rectangle centered on the screen, with the logo placed in the top-right corner. The 12vw just felt right; there's no science or any sort of measurement behind that.
Animating the whole thingie
We're going to do that with plain ol' Vanilla JS. Yes, everything in this post is old school.
Here's the principle: We change the top and left coordinates by 1 pixel per animation frame. CSS will ensure the animation is as smooth as it can be. By adding 1 pixel to the top and left value, the logo will move to the bottom-right at a 45-degree angle.
Once the logo reaches the bottom of the screen, it should bounce back up while continuing to move to the right. This means the value of change for the top coordinate is now -1, not 1.
Once the logo hits the right edge, the left value turns to -1 (since it should bounce). Once it hits the top edge, the top change value is set to 1 again, etc.
We call these values a delta - so, a "rate of change". Initially, since the logo starts in the top left corner of the screen, these deltas are 1:
let topDelta = 1
let leftDelta = 1
Next, we need to define the time between frames. 5ms gives a pretty smooth transition that isn't too fast. We'll use an interval to update the position repeatedly. In there, we first need to get the current top, bottom, left, and right values of the logo.
setInterval(() => {
const currentTop = parseInt(logo.style.top) || 0
const currentLeft = parseInt(logo.style.left) || 0
const currentRight = currentLeft + logo.clientWidth
const currentBottom = currentTop + logo.clientHeight
// ...
}, 5)
We can now define the actual animation logic:
// ...
if (currentBottom >= screen.clientHeight) {
topDelta = -1
}
if (currentTop <= 0) {
topDelta = 1
}
if (currentRight >= screen.clientWidth) {
leftDelta = -1
}
if (currentLeft <= 0) {
leftDelta = 1
}
// ...
Lastly, we need to update the position:
// ...
logo.style.top = currentTop + topDelta + 'px'
logo.style.left = currentLeft + leftDelta + 'px'
}, 5)
And done! That was a quick one! Let's see it in action:
Now, the nice thing is: This already is fully responsive. You can change your screen size, rotate the screen in CSS, or even resize it. The animation will always work just the same way.
Let's take a moment and appreciate when the DVD logo finally hits that corner!
I hope you enjoyed reading this article as much as I enjoyed writing it! If so, leave a ❤️! I write tech articles in my free time and like to drink coffee every once in a while.
If you want to support my efforts, you can offer me a coffee ☕! You can also support me directly via Paypal!
Top comments (0)