HunorBorbely

7 ms·

1.
by HunorBorbely 2y ago
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.
2.
Gorillas – Plain JavaScript Game Tutorial with HTML Canvas(freecodecamp.org)
2 points by HunorBorbely 3y ago|0 comments
3.
JavaScript Game Tutorial with HTML Canvas: Gorillas(youtube.com)
1 points by HunorBorbely 3y ago|1 comments
4.
by HunorBorbely 3y ago
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
5.
by HunorBorbely 3y ago
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.
6.
by HunorBorbely 3y ago
Thank you. The whole project actually started as an advent calendar. Then I started thinking okay, what should be the content of it :)
7.
by HunorBorbely 3y ago
True. When you make art with CSS then you don't start with Illustrator either
8.
by HunorBorbely 3y ago
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 yo
9.
by HunorBorbely 3y ago
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
10.
by HunorBorbely 3y ago
Added a Table of Contents below. Probably it helps SEO as well :)
11.
by HunorBorbely 3y ago
Lol :) Maybe I should just put this below the calendar. What do you think?
12.
by HunorBorbely 3y ago
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.
13.
by HunorBorbely 3y ago
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.
14.
by HunorBorbely 3y ago
Super cool effect. Yes, SVGs can be a rabbit hole. This is just scratching the surface of it
15.
by HunorBorbely 3y ago
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
16.
by HunorBorbely 3y ago
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
17.
by HunorBorbely 3y ago
Thank you, I'm glad it helped. Cool comics!
18.
by HunorBorbely 3y ago
Yes, and imagine if I would have figured out how to do the view transitions properly :)
19.
by HunorBorbely 3y ago
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?
20.
by HunorBorbely 3y ago
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
21.
by HunorBorbely 3y ago
Good catch. Yes, I rearranged some chapters and I missed this link. Thank you, fixed
22.
by HunorBorbely 3y ago
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 someo
23.
by HunorBorbely 3y ago
That is true, good idea. I might update it with a note on this
24.
by HunorBorbely 3y ago
Damn, something is always broken. Let me look into it. As for foreignObject, I also didn't knew about it. That's awesome
25.
by HunorBorbely 3y ago
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 th
26.
by HunorBorbely 3y ago
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 :)
27.
by HunorBorbely 3y ago
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 als
28.
SVG Tutorial(svg-tutorial.com)
484 points by HunorBorbely 3y ago|110 comments
29.
Learn React while coding a Tic-Tac-Toe game (Free this weekend)(udemy.com)
1 points by HunorBorbely 6y ago|0 comments
30.
Learn Three.js while building a 3D game with physics(youtube.com)
1 points by HunorBorbely 6y ago|0 comments

More ›