First of all thank you for this component and for the nice medium post :) Very interesting to read.
However I didn't understand why you wrote a star drawing algorithm instead of using the "static" svg resized. From your blog post:
Once done with building the logic I realized it was not possible to alter the star’s width/height dynamically due to it’s hard-coded values — I had to draw the star programmatically in order to achieve a more dynamic star with width & height that are easily adjustable.
Indeed it is, I mean the S of SVG stands for scalable 😅
You could just put viewBox="0 0 200 200" on your svg tag, and use the initial polygon <polygon points="100,10 40,198 190,78 10,78 160,198">, and voilà. The polygon is drawn in the viewBox, and is then scaled to fit the svg width/height.
Hello,
First of all thank you for this component and for the nice medium post :) Very interesting to read.
However I didn't understand why you wrote a star drawing algorithm instead of using the "static" svg resized. From your blog post:
Indeed it is, I mean the S of SVG stands for scalable 😅
I managed to do pretty much what your component does using the viewBox svg property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
You could just put
viewBox="0 0 200 200"on your svg tag, and use the initial polygon<polygon points="100,10 40,198 190,78 10,78 160,198">, and voilà. The polygon is drawn in the viewBox, and is then scaled to fit the svg width/height.Thanks again,