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
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
Polygon on html is made out of pairs of points that makes a shape. Try and play around with the code below.
Attributes:
-
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.
Rectangle
Similar with the polygon, but simpler. You can definitely use polygon to make a rectangle or a square, you can also use <rect> to make a rectangle. All you need is width and the height! Check out my CodePen below to try it out!
You can definitely just also use a div to create this square/rectangle, but for learning purposes I used <rect> for more specificity.
Ellipse
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 attr's roles:
- 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!
References:
Top comments (0)