Vectors & Mobile Support

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.

On the image you can clearly see the effect when zooming. Well, what's where vectors come in. Like stated above, you resize them flawlessly at any resolution. How is this possible? Vectors are not stored with pixels. Instead, they are stored in code like a program is. I'll show that effect some more with a code block below.

Because I can use vectors on the site, it will improve the experience for mobile users and desktop users both. The site will look cleaner at much higher resolutions, useful for new 4k users, ultrawide users, and users with newer phones with high DPI displays.

Speaking of mobile users, I've done a little work on the sites mobile menu. It should work a bit better now, and won't do anymore glitches where it just kinda freezes. Many of the in page tabs still look weird on mobile, but I'm going to have to spend a lot of time to fix that so for now I'm just leaving them how they are, since it isn't too terrible.

So back on the topic of vectors, let me specify that I'm using SVG files. That stands for Scalable Vector Graphics. Below, you can find the actual code for the 7 logo that I use in the top left and the homepage. More on that below the code block. Feel free to copy and manipulate any code here!

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.

OKAY SO I WAS GOING TO PUT THEM HERE BUT I GUESS IT DOESN'T WORK WITH HOW THESE UPDATES ARE POSTED, BUT YOU CAN VIEW THEM ON THEIR OWN PAGE HERE. (the whole sentence is a link btw)

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.   : - )