Another week of learning again thanks to an opportunity in line with my job search.
So what is this blog about? Well, I recently encountered a take home exercise where we have to use pure HTML/CSS. A figma design was given and there was a good chunk of elements that are indicated as polygon, rectangle, & ellipse. Never got use them beforehand, and if you haven't either, here's us trying it out together!
SVG or Scalable Vector Graphics is a unique type of element that shares some attributes with CSS. My favorite about SVGs is that you don't lose quality whether zoomed in or resized. I got to see its potential when I helped built Makegotchi during bootcamp.
Another good thing about SVGs is you can customize each point reference to make a shape! You can check out Boxy SVG and try to play around with SVG shapes and designs!
Further info on shared CSS attributes, check out CSS Tricks for a detailed list!
Polygon on html is made out of pairs of points that makes a shape. Try and play around with the code below.
stroke- is the line color of the polygon
stroke-width- corresponds to the line-weight
fill- for background-color
points- are the pair of points that make up each side of the shape.
You can definitely just also use a div to create this square/rectangle, but for learning purposes I used
<rect> for more specificity.
Yes! Ellipse like a circle! In this case, we can make ovals, egg shapes, teardrops, and other round-like shapes! Ellipse is also an SVG element and has a few attributes.
As per W3 schools here are each
- cx - the x coordinate of the center of the ellipse.
- cy - the y coordinate of the center of the ellipse.
- rx - horizontal radius.
- ry - vertical radius.
There are so much more potential shapes to make using SVGs /polygons! There are elements like polyline, path and/or elements that are parallelogram in shape that used CSS & SVG element attributes.
If you ask me, what else can you make using these elements? Check out this gallery of SVG, see their original file and inspect using your console.
And that's a few I've learned to use as of recent! I hope I get to help you learn something new today!
Until the next!