Creating a 'New' spiky label with 24 or above point burst

I am trying to make a point burst thing like the image below:

enter image description here

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>

With svg it is possible with a simple loop. I am using Snap as it makes it simple.

enter image description here

First of all create a circle using snap then using a loop find the points we need from the circle i referenced this question for finding the points. After finding the points simply give the lines these points.By changing the number in the loop and rad value points of any value can be created

24 point burst

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
for (var num = 0; num < 24; num++) {
    var rad1 = num * 15 * (Math.PI / 180);
    var rad2 = (num+1) * 15 * (Math.PI / 180);
    var rad3=(num+.5) * 15 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})
div{
  width:100vw;
  height:100vh;
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
  </div>

36 points burst

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
for (var num = 0; num < 36; num++) {
    var rad1 = num * 10 * (Math.PI / 180);
    var rad2 = (num+1) * 10 * (Math.PI / 180);
    var rad3=(num+.5) * 10 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})
div{
    width:100vw;
    height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>

60 points burst

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
for (var num = 0; num < 60; num++) {
    var rad1 = num * 6 * (Math.PI / 180);
    var rad2 = (num+1) * 6 * (Math.PI / 180);
    var rad3=(num+.5) * 6 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})
div{
    width:100vw;
    height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>

This can also be animated

var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
    fill:'tomato',
    stroke:'tomato'
})
var g=s.g();
for (var num = 0; num < 60; num++) {
    var rad1 = num * 6 * (Math.PI / 180);
    var rad2 = (num+1) * 6 * (Math.PI / 180);
    var rad3=(num+.5) * 6 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50)
    var y1 = (30 * (Math.sin(rad1)) + 50)
    var x2 = (40 * (Math.cos(rad3)) + 50)
    var y2 = (40 * (Math.sin(rad3)) + 50)
    var x3 = (30 * (Math.cos(rad2)) + 50)
    var y3 = (30 * (Math.sin(rad2)) + 50)
    var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
        'fill':'tomato'
    })
    g.add(line);
    }
var text=s.text(35,50,'New').attr({
    fill:'white'
})
function anim(){
g.animate({
    transform:'rotate(360 50,50)'
},8000,function(){
   g.animate({
    transform:'rotate(0 50,50)'   
   },0,function(){
       anim()
   })
})
}
anim()
div{
    width:100vw;
    height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>

Note I have used vw and vh units for responsiveness

This can also be made with a single polyline element

var s=Snap('svg');
var array=[];
for (var num = 0; num < 24; num++) {
    var rad1 = num * 15 * (Math.PI / 180);
    var rad2 = (num+1) * 15 * (Math.PI / 180);
    var rad3=(num+.5) * 15 * (Math.PI / 180);
    var x1 = (30 * (Math.cos(rad1)) + 50);
    var y1 = (30 * (Math.sin(rad1)) + 50);
    var x2 = (40 * (Math.cos(rad3)) + 50);
    var y2 = (40 * (Math.sin(rad3)) + 50);
    var x3 = (30 * (Math.cos(rad2)) + 50);
    var y3 = (30 * (Math.sin(rad2)) + 50);
      array.push(x1+','+y1+' '+x2+','+y2+' '+x3+','+' '+y3);
    }
var line=s.polyline(array).attr({
        'fill':'tomato'
    })
var text=s.text(35,50,'New').attr({
    fill:'white'
})
div{
  width:100vw;
  height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
  </div>

This is possible with CSS but after 12 points, requires more than one div.

I have previously used the 12 point burst within projects for alerts and for sale promotion style elements.

12 Point Burst

div {
  background: red;
  width: 80px;
  height: 80px;
  position: absolute;
  text-align: center;
  top: 20px;
  left: 20px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
div:before {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
div:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
<div></div>

24 Point Burst

div {
    background: red;
    width: 80px;
    height: 80px;
    position: absolute;
    text-align: center;
  top: 20px;
  left: 20px;
}
div:before, div:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
div:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
div:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

div:nth-child(2) {
  transform: rotate(15deg)
}
<div></div>
<div></div>

36 Point Burst

div {
    background: red;
    width: 80px;
    height: 80px;
    position: absolute;
    text-align: center;
  top: 20px;
  left: 20px;
}
div:before, div:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
div:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
div:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

div:nth-child(2) {
  transform: rotate(10deg)
}
div:nth-child(3) {
  transform: rotate(20deg)
}
<div></div>
<div></div>
<div></div>

48 Point Burst

div {
  background: red;
  width: 80px;
  height: 80px;
  position: absolute;
  text-align: center;
  top: 20px;
  left: 20px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: red;
}
div:before {
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
}
div:after {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
}
div:nth-child(2) {
  transform: rotate(7.5deg)
}
div:nth-child(3) {
  transform: rotate(15deg)
}
div:nth-child(4) {
  transform: rotate(22.5deg)
}
<div></div>
<div></div>
<div></div>
<div></div>

For anything above 12 points, i would have to seriously suggest using an image or SVG as the above answer shows due to only requiring one element.