css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Demo created for my Tight Fitting SVG Shapes, the Present and Future article on CSS Tricks. Visual explanation of how to construct a regular convex polygon with n vertices (and of course also n edges). Still a rough version, but tested & works in Firefox 39, Chrome 43, IE 11 on Windows 8.

In the case of regular polygons, all the vertices are on a circle called the circumcircle. Since the polygon is regular, all edges are equal, which means that the radii connecting the central point to the vertices of the polygon split the circle into equal slices. The angle of each such slice is 360°/n, because a full circle is 360°.

So we can construct this regular convex polygon of n vertices by placing points on the circle at every 360°/n and then connecting these points.


  1. I wonder if this kind of exercises could be turned into a nice and cute children's book of math.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.