SVG Firework Animation

Developer
Matt Litherland
Size
3,306 Kb
Views
153,824
  1. SVG Firework Animation Previews
  2. SVG Firework Animation HTML Codes
  3. SVG Firework Animation CSS Codes

How do I make an svg firework animation?

A quick firework style animation using css animations and SVG.. What is a svg firework animation? How do you make a svg firework animation? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

SVG Firework Animation Previews
IQ Test

SVG Firework Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Firework Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="svg"><svg xmlns="http://www.w3.org/2000/svg" id="firework-slide2" class="firework-icon injected-svg img-firework inject-svg" data-name="Calque 1" viewBox="0 0 157 156">	<defs>	<style>	.cls-1,.cls-2,.cls-3{	fill:#e41656;	opacity:0;	}	</style>	</defs>	<title>icon_firework_1</title>	<path class="cls-3" d="M80.52,106.92a0.65,0.65,0,0,1-.65-0.65v-10a0.65,0.65,0,0,1,1.3,0v10A0.65,0.65,0,0,1,80.52,106.92Z"></path>	<path class="cls-3" d="M97.72,100.91a0.65,0.65,0,0,1-.52-0.26l-6-8a0.65,0.65,0,0,1,1-.78l6,8A0.65,0.65,0,0,1,97.72,100.91Z"></path>	<path class="cls-3" d="M108.32,85.95a0.61,0.61,0,0,1-.19,0l-9.55-3A0.65,0.65,0,1,1,99,81.69l9.55,3A0.65,0.65,0,0,1,108.32,85.95Z"></path>	<path class="cls-3" d="M98.77,71a0.65,0.65,0,0,1-.2-1.27l9.55-3a0.65,0.65,0,1,1,.39,1.24L99,71A0.66,0.66,0,0,1,98.77,71Z"></path>	<path class="cls-3" d="M91.7,61a0.65,0.65,0,0,1-.52-1l6-8a0.65,0.65,0,0,1,1,.78l-6,8A0.65,0.65,0,0,1,91.7,61Z"></path>	<path class="cls-3" d="M80.52,57a0.65,0.65,0,0,1-.65-0.65v-10a0.65,0.65,0,0,1,1.3,0v10A0.65,0.65,0,0,1,80.52,57Z"></path>	<path class="cls-3" d="M67.64,61a0.65,0.65,0,0,1-.52-0.26l-6-8a0.65,0.65,0,0,1,1-.78l6,8A0.65,0.65,0,0,1,67.64,61Z"></path>	<path class="cls-3" d="M60.57,71a0.66,0.66,0,0,1-.2,0l-9.55-3a0.65,0.65,0,1,1,.39-1.24l9.55,3A0.65,0.65,0,0,1,60.57,71Z"></path>	<path class="cls-3" d="M51,85.95a0.65,0.65,0,0,1-.19-1.27l9.55-3a0.65,0.65,0,1,1,.39,1.24l-9.55,3A0.61,0.61,0,0,1,51,85.95Z"></path>	<path class="cls-3" d="M61.62,100.91a0.65,0.65,0,0,1-.52-1l6-8a0.65,0.65,0,0,1,1,.78l-6,8A0.65,0.65,0,0,1,61.62,100.91Z"></path>	<path class="cls-2" d="M80.52,126.88a0.65,0.65,0,0,1-.65-0.65v-10a0.65,0.65,0,0,1,1.3,0v10A0.65,0.65,0,0,1,80.52,126.88Z"></path>	<path class="cls-2" d="M109.74,116.86a0.65,0.65,0,0,1-.52-0.26l-6-8a0.65,0.65,0,0,1,1-.78l6,8A0.65,0.65,0,0,1,109.74,116.86Z"></path>	<path class="cls-2" d="M127.42,91.92a0.61,0.61,0,0,1-.19,0l-9.55-3a0.65,0.65,0,1,1,.39-1.24l9.55,3A0.65,0.65,0,0,1,127.42,91.92Z"></path>	<path class="cls-2" d="M117.86,65a0.65,0.65,0,0,1-.2-1.27l9.55-3a0.65,0.65,0,1,1,.39,1.24l-9.55,3A0.66,0.66,0,0,1,117.86,65Z"></path>	<path class="cls-2" d="M103.73,45.08a0.65,0.65,0,0,1-.52-1l6-8a0.65,0.65,0,0,1,1,.78l-6,8A0.65,0.65,0,0,1,103.73,45.08Z"></path>	<path class="cls-2" d="M80.52,37.07a0.65,0.65,0,0,1-.65-0.65v-10a0.65,0.65,0,0,1,1.3,0v10A0.65,0.65,0,0,1,80.52,37.07Z"></path>	<path class="cls-2" d="M55.61,45.08a0.65,0.65,0,0,1-.52-0.26l-6-8a0.65,0.65,0,0,1,1-.78l6,8A0.65,0.65,0,0,1,55.61,45.08Z"></path>	<path class="cls-2" d="M41.47,65a0.62,0.62,0,0,1-.2,0l-9.55-3a0.65,0.65,0,1,1,.39-1.24l9.55,3A0.65,0.65,0,0,1,41.47,65Z"></path>	<path class="cls-2" d="M31.92,91.93a0.65,0.65,0,0,1-.19-1.27l9.55-3a0.65,0.65,0,1,1,.39,1.24l-9.55,3A0.61,0.61,0,0,1,31.92,91.93Z"></path>	<path class="cls-2" d="M49.59,116.86a0.65,0.65,0,0,1-.52-1l6-8a0.65,0.65,0,0,1,1,.78l-6,8A0.65,0.65,0,0,1,49.59,116.86Z"></path>	<path class="cls-1" d="M80.52,146.83a0.65,0.65,0,0,1-.65-0.65v-10a0.65,0.65,0,0,1,1.3,0v10A0.65,0.65,0,0,1,80.52,146.83Z"></path>	<path class="cls-1" d="M121.77,132.82a0.65,0.65,0,0,1-.52-0.26l-6-8a0.65,0.65,0,0,1,1-.78l6,8A0.65,0.65,0,0,1,121.77,132.82Z"></path>	<path class="cls-1" d="M146.52,97.9a0.61,0.61,0,0,1-.19,0l-9.55-3a0.65,0.65,0,1,1,.39-1.24l9.55,3A0.65,0.65,0,0,1,146.52,97.9Z"></path>	<path class="cls-1" d="M137,59a0.65,0.65,0,0,1-.2-1.27l9.55-3A0.65,0.65,0,1,1,146.7,56l-9.55,3A0.66,0.66,0,0,1,137,59Z"></path>	<path class="cls-1" d="M115.76,29.12a0.65,0.65,0,0,1-.52-1l6-8a0.65,0.65,0,0,1,1,.78l-6,8A0.65,0.65,0,0,1,115.76,29.12Z"></path>	<path class="cls-1" d="M80.52,17.11a0.65,0.65,0,0,1-.65-0.65v-10a0.65,0.65,0,0,1,1.3,0v10A0.65,0.65,0,0,1,80.52,17.11Z"></path>	<path class="cls-1" d="M22.37,59a0.62,0.62,0,0,1-.2,0l-9.55-3A0.65,0.65,0,1,1,13,54.77l9.55,3A0.65,0.65,0,0,1,22.37,59Z"></path>	<path class="cls-1" d="M12.82,97.9a0.65,0.65,0,0,1-.19-1.27l9.55-3a0.65,0.65,0,1,1,.39,1.24l-9.55,3A0.61,0.61,0,0,1,12.82,97.9Z"></path>	<path class="cls-1" d="M43.58,29.12a0.65,0.65,0,0,1-.52-0.26l-6-8a0.65,0.65,0,0,1,1-.78l6,8A0.65,0.65,0,0,1,43.58,29.12Z"></path>	<path class="cls-1" d="M37.56,132.82a0.65,0.65,0,0,1-.52-1l6-8a0.65,0.65,0,0,1,.91-0.13,0.65,0.65,0,0,1,.13.91l-6,8A0.65,0.65,0,0,1,37.56,132.82Z"></path>
</svg><h1>Firework</h1></span>
</body>
</html>

SVG Firework Animation - Script Codes CSS Codes

* { box-sizing: border-box;
}
html { background: #16141e;
}
span.svg { display: block; margin: auto; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center;
}
span.svg svg { width: 200px; height: 200px; max-width: 200px; margin: auto;
}
@keyframes fireworkone { 0% { opacity: 0; } 25% { opacity: .15; } 50% { opacity: .3; } 75% { opacity: .15; } 100% { opacity: 0; }
}
@keyframes fireworktwo { 0% { opacity: 0; } 25% { opacity: .45; } 50% { opacity: .8; } 75% { opacity: .45; } 100% { opacity: 0; }
}
@keyframes fireworthree { 0% { opacity: 0; } 25% { opacity: .55; } 50% { opacity: 1; } 75% { opacity: .55; } 100% { opacity: 0; }
}
.firework-icon .cls-1, .firework-icon .cls-2, .firework-icon .cls-3 { opacity: 0; animation-duration: 1s; animation-iteration-count: infinite;
}
.firework-icon .cls-3 { animation-name: fireworthree; animation-delay: .11s;
}
.firework-icon .cls-2 { animation-name: fireworktwo; animation-delay: .41s;
}
.firework-icon .cls-1 { animation-name: fireworkone; animation-delay: .71s;
}
@keyframes elastic-pulse { 0% { transform: scale(0.2); } 100% { transform: scale(1); }
}
.img-firework { animation-duration: 1s; animation-iteration-count: infinite; animation-name: elastic-pulse; animation-delay: 0s;
}
h1 { position: absolute; top: calc(50% - 15px); color: #fff; margin: 0; line-height: 1; font-size: 30px;
}
SVG Firework Animation - Script Codes
SVG Firework Animation - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 3,306 Kb
Views 153,824
Do you need developer help for SVG Firework Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Litherland (mattsince87) Script Codes
Name
Wishlist Toggle Button
Slick Two Part Form
Ultimate Pop-Out Menu
Vertical Align Images - Explained
Flat Origami Article
Smooth Anchor Scrolling
Subtle CSS3 Heart Beat
Responsive Flat UI Kit
Gradient over Google Maps
SCSS Social Icons Flat
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!