Look for (SVG) mask. <https//css-tricks.com/clipping-masking-css/>

writen by Benedikt

In Affinity designer you use a star, choose the point count, then round the inside points and round the outside points. Code is a whole different ballgame.

writen by LaLa Artica

João Amaro made this with figma LaLa Artica. But transforming that to code is another story haha

writen by Tiago Ferreira

Thanks <@U02NH9BN5FY>. I tried using clip but could not figure out to to get this result… But João Amaro found a website. What was it João Amaro?

writen by Tiago Ferreira

https://thenounproject.com/icon/rounded-corner-star-3280841/

writen by WBE User

Then fill with your color

writen by WBE User

and place top: 0 right: 0

• translate x & y by =50% for perfect positioning at the edge

writen by WBE User

Thanks for the suggestion WBE User Looks good now

writen by Tiago Ferreira

perfect!

writen by WBE User

Tiago Ferreira if you have the shape in Figma, and João Amaro used the Figma vectors, you can just right click on the shape, Copy > Copy as SVG

Paste the copied text into a file in your project, like StarShape.svg or use it as the returned JSX of a StarShape.tsx React component.

writen by Luca Restagno (ikoichi on Twitter)

Thanks Luca Restagno (ikoichi on Twitter). that’s what I endup doing and it worked really well

writen by Tiago Ferreira