With svg it is possible with a simple loop. I am using Snap as it makes it simple.
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>