It's been a while since the first post, sorry about that. I've been doing a lot of work under the hood. I'm still working on getting an SSL Certificate. It should be coming, I think I'm in the clear. Meanwhile, I've been updating the website with vectors. A vector is an image that can be resized and manipulated. Normal images (raster images) are stuck with pixels. Pixels are great for real photos and videos, but they can't be resized well and it's very hard to individually manipulate parts of a raster image. Using vectors, I can make logos and animations for things that look like images. Think of it like text. If you zoom in on text, it automatically looks perfectly smooth. That's because text rendering actually uses one of the first forms of vectors. So, if you zoom in on this paragraph, it will automatically sharpen. However, if you zoom in on a raster image with text, it will look very blurry.
In the code above, you can see what looks like a bunch of mumbo jumbo. I make all my vectors in Adobe Illustrator, and it allows auto exporting as an SVG. The code shows paths. A path in an SVG is basically just a single line or shape, kinda like how it sounds. There are only three lines on my logo, but keep in mind there is also a black stroke. These paths are represented with a series of numbers and characters in a plane. Think of it like a 2D coordinate plane from Algebra. Lines are connected between each dot to form an image. So if the image size changes, it can just automatically fill in everything, providing perfect scaling. Each path also has a class. At the top, classes are styled using CSS. On my logo for instance, you can see I'm filling the .st2 class with #FFFFFF. That's the RGB color code for pure white, which is the basis of my logo. This is just specifying to fill the points up with white. So what else is cool about CSS. Well, CSS has animations. Using this, we can use Javascript and CSS to animate vectors. This provides an awesome and smooth affect. This is how websites make awesome animation for the users that look clean and effective. Here is an example. It's the logo from my main homepage, where the black stroke progressively appears around the vector. And also, the logo from my tournament Ultimate Underground, which uses the same effect. Try zooming in! The edges are perfect!As you can see, these CSS animations can be used to make awesome things. This is only a basic animation, the possibilities are endless! So, let me put the code for the animated logo here: The animations are made using keyframes. Since this isn't really supposed to be about CSS, I'll just say a few quick things on how it works. JAzTzDPf and anything that looks like it is actually a class. This means that anything in that class will load with the animation. Every keyframe, it draws the black stroke some more, creating what looks to be a super smooth drawing animation. That's all for now.Thanks for checking this out, for real. I'm working on adding 1 or 2 new movies. Kinda stuck on music. What's some music? Not looking for anything too niche since I can't add it very easily. Until next time. : - )
|