HunorBorbely

In this advent calendar-themed tutorial, you will learn the fundamentals of Scalable Vector Graphics (SVG), from the basics to advanced concepts like animation and interactivity.

In this JavaScript Game Tutorial, we code a modern version of the 1991 classic game, Gorillas!

This tutorial is both a JavaScript Game Tutorial and an introduction to the HTML Canvas elements. First, we learn how to draw on a Canvas element with JavaScript. How to draw the background, the buildings, the gorillas, and the bomb.

Then we add interaction. We add event handlers, we cover how to aim, how to animate the bomb across the sky, and how to detect if the bomb hit the enemy or a building.

In the end, we also add AI logic for the enemy gorilla, so you can play against the computer.

Day 24 is a basic example of React + SVG. Once you get the basics of React you can just start coding images based on this tutorial.

Thank you. The whole project actually started as an advent calendar. Then I started thinking okay, what should be the content of it :)

True. When you make art with CSS then you don't start with Illustrator either

Yes, I was thinking of fixing the second point, but then I was annoyed with it and left it like that. If I knew that it blows up here on Hacker News I would have fixed it.

I'm not sure where you see horizontal scrollbars though. Are you on Windows?

It's an interesting point. Writing tutorials like this also made me realize what's the difference between a function property and a function argument. I just used them completely interchangeably before. So element is more accurate here?

Added a Table of Contents below. Probably it helps SEO as well :)

Lol :) Maybe I should just put this below the calendar. What do you think?

Ouch. Some browsers might not support every feature. Gradients also have some issues. Luckily it seems to be all right so far in desktop browsers.

The funny thing about writing tutorials like this as a non-native speaker myself is also googling how to call things like the "clapper". I also didn't know what it was called before writing this article.

Super cool effect. Yes, SVGs can be a rabbit hole. This is just scratching the surface of it

Thank you for the great feedback, I really appreciate it. I fixed some errors you found. Let me know if something still doesn't work. It's still a bit in the process of fine-tuning.

For instance, does anyone know why the thumbnail preview does not work on Twitter? It works with the sub-pages.

Totally. There are many cases when HTML Canvas is way more performant, but if you don't build the next Figma, then working with SVG is way more convenient

Thank you, I'm glad it helped. Cool comics!

Yes, and imagine if I would have figured out how to do the view transitions properly :)

Okay, I fixed the links to the interactive demos (somehow deep links do not always work on that site, probably because it's made with Vue). I don't see the problem with bio.link. What issue do you see?

Yes, there's some bug with using gradients that I couldn't figure out yet. Are you looking at it on mobile? On desktop it works for me

Good catch. Yes, I rearranged some chapters and I missed this link. Thank you, fixed

With text I wasn't experimenting too much, apart from the example where it follows a line.

I know there is text anchor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...

And someone suggested the foreignObject tag that might be useful here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...

That is true, good idea. I might update it with a note on this

Damn, something is always broken. Let me look into it.

As for foreignObject, I also didn't knew about it. That's awesome

Yes, since HTML5 you can inline an SVG. You don't need Webpack or anything like that, it just works.

One of the examples in this tutorial is also a data-driven diagram generated from React. You can do pretty cool things by combining the two.

Thank you. Let me know if you have any feedback. It's still under fine-tuning. And of course if you share it, that helps a lot :)

For more complex graphics you would probably still use a designer tool. But for some simple ones, you can probably code them yourself. Like if you need an arrow or a hamburger menu icon, you can just jump straight into code. Sometimes I also just start with pen and paper and then figure out the coordinates from there, and adjust till it looks good enough.