Intro to SVGs
I am still trying to increase my css skills, so that one day maybe I can use css on the world like the artist did above. I’m still working on mastering flexbox, on the last few chapters of flexbox zombies. It is definitely not getting any easier, but I feel like I’m learning a lot. I decided to look into this svg thing. I could only create-react-app so many times before I got curious about the logo. How is it made? Can I… will I make my own? The answer to all these questions can only be yes.
That logo is my baby and it is hideous. Hideous as it is I am still proud of it. It took a lot more effort than I thought it would. In my head I was just making a smiley face, thinking that would take like 15 seconds. Flash forward an hour later and all I have to show for it is this. Now that might be because I wanted it to do 360’s, fade in and out, teach me Arabic. Tried to be a little less ambitious than usual, still too demanding somehow. The good news is I’ve identified some steps to make it easier.
When you go to the svg w3schools page, the first thing they show you how to make is a circle. Based on that first circle I knew I would want two more smaller circles. For the most part it was playing with the x and y values of the inner circles. Once I found the y value I wanted I knew that was going to be the same for both circles, because I wanted the eyes to be on the same level. As far as the x goes I’m thinking now that I can just pay attention to the radius of the bigger circle to figure out good starting points.
As I was a bit ambitious with this logo creation I was looking at some other elements to add to this logo. Quadratic graph? Wrong a mouth. I won’t even pretend to understand why I needed all those numbers for the path line I used to make the mouth, but just playing with it a bit worked well enough for now. Finally there was a bit of a snag putting it into the app, but nothing a quick google search couldn’t fix.
I made my first logo and in the end I like how it came out. I liked that I went out and attempted to learn this foreign thing which might involve math when done properly.
My finished logo?
Tryit Editor v3.6
If you click the save button, your code will be saved, and you get a URL you can share with others.
Adding Images, Fonts, and Files | Create React App
With webpack, using static assets like images and fonts works similarly to CSS. You can import a file right in a…