I am trying to make a point burst thing like the image below:
Currently, I have tried this using pseudo elements, however, I was only able to generate a 12 point burst and does not reflect that which is displayed within the image.
Is there anyway to create a point burst with only a few elements?
Below is the code I have used to attempt this solution:
div{
width:100px;
height:100px;
background:grey;
transform:rotate(45deg);
margin:50px;
}
div:after{
position:absolute;
content:"";
background:grey;
width:100px;
height:100px;
transform:rotate(135deg);
}
div:before{
position:absolute;
content:"";
background:grey;
width:100px;
height:100px;
transform:rotate(250deg);
}<div></div>
Canvas Approach
You can also achieve this using Canvas. The commands for drawing on Canvas are pretty much the same as in SVG. The approach, on a very high level, would be to find points on two circles (one with radius as x and another with a slightly smaller radius) and then connect them together to form a path. When the path is filled, it gives the appearance of a n-point burst.
In the below diagram, the green circle is the bigger circle with radius as x and the blue circle is the smaller inner circle. By plotting points on the circles and connecting them (with
lineTocommands), we get the path which is in red. When this path is filled we get the burst appearance. (Note: The inner and outer circles are only for illustration and are not drawn in the actual diagram).Calculation Logic
Advanced Demo
Check out this CodePen for an advanced demo with features like path creation animation, shadows, control over all the features etc.
Usage Advice
If you want a fixed size image somewhere in the page then Canvas is as good as SVG. However, if you would need an image that can be scaled to any size, Canvas is not the right choice because Canvas is raster based and becomes pixelated or blurred when scaled.
If your shape would need a dynamic number of bursts and/or text, Canvas would be more preferable over SVG and CSS because you don't have to perform any DOM manipulations.