Creating a 'New' spiky label with 24 or above point burst
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>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>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.