Creating a ‘New’ spiky label with 24 or above point burst

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>

Leave a Comment