Blog post: How to draw any regular shape with just one JavaScript function

[dipikabh]

Please leave your feedback and comments related to https://developer.mozilla.org/en-US/blog/javascript-shape-drawing-function/ here

[primeagen-rustaceans]

There is a typo in the article. Instead of 'Let's begin where I did with the hexagon and we'll take it from there.', I think it should be 'Let's begin with what I did with the hexagon and we'll take it from there.'. I wanted to rectify it by contributing to the same. But I am not able to find the article in the GitHub Repo.

[dipikabh]

Thanks for flagging the typo! This should get fixed shortly 👍

Unfortunately, we are not accepting pull requests or issues for the blog (see this announcement). You're welcome to leave your thoughts and feedback in this discussion thread.

[mhsrio]

Thanks a ton for the wonderful blog. I really enjoyed reading and trying it on my own

[dmackerman]

Cool article. How about the source code that generated the image at the bottom? Would be good to use for inspiration.

[9am]

Nice one! Thanks for sharing : )
Check out my CSS version with @container: https://codepen.io/9am/pen/bGQZpBp

@container style(--side) {
    div {
        --r: 50%;
        --sl: calc(1turn / var(--side));
        clip-path: polygon(
            calc(var(--r) * (1 + cos(var(--sl) * 0))) calc(var(--r) * (1 + sin(var(--sl) * 0))),
            calc(var(--r) * (1 + cos(var(--sl) * 1))) calc(var(--r) * (1 + sin(var(--sl) * 1))),
            calc(var(--r) * (1 + cos(var(--sl) * 2))) calc(var(--r) * (1 + sin(var(--sl) * 2))),
            calc(var(--r) * (1 + cos(var(--sl) * 3))) calc(var(--r) * (1 + sin(var(--sl) * 3))),
            calc(var(--r) * (1 + cos(var(--sl) * 4))) calc(var(--r) * (1 + sin(var(--sl) * 4))),
            calc(var(--r) * (1 + cos(var(--sl) * 5))) calc(var(--r) * (1 + sin(var(--sl) * 5))),
            calc(var(--r) * (1 + cos(var(--sl) * 6))) calc(var(--r) * (1 + sin(var(--sl) * 6))),
            calc(var(--r) * (1 + cos(var(--sl) * 7))) calc(var(--r) * (1 + sin(var(--sl) * 7))),
            calc(var(--r) * (1 + cos(var(--sl) * 8))) calc(var(--r) * (1 + sin(var(--sl) * 8))),
            calc(var(--r) * (1 + cos(var(--sl) * 9))) calc(var(--r) * (1 + sin(var(--sl) * 9)))
        );
    }
}

[bsmth]

Thanks for the discussion and feedback, everyone! I'm closing this now for housekeeping, but you're very welcome to join our discord if you'd like to chat with us more about it in sync!

Thank you :)