SVG Stars Animation

Size
3,088 Kb
Views
24,288

How do I make an svg stars animation?

What is a svg stars animation? How do you make a svg stars animation? This script and codes were developed by Aaron Cuddeback on 03 November 2022, Thursday.

SVG Stars Animation Previews

SVG Stars Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Stars 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> <html>
<head>	<title>SVG Animation</title>	<link rel="stylesheet" href="css/style.css">
</head>
<body>	<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="218.8 226.8 258.4 258.3">	<clippath id="bg">	<circle cx="348" cy="356" r="129.2"/>	</clippath>	<g class="stars" clip-path="url(#bg)">	<circle class="stars-bg" fill="#3079AB" stroke="#95C7E8" stroke-width="6" stroke-linecap="round" cx="348" cy="356" r="129.2"/>	<path class="star" opacity="0.75" fill="#FFFFFF" d="M409.7,337.4c-1.2-1-2.2-1.2-8.4-1c-3,0-6.9,0.2-11.9,0.5c-5.7,0.2-11.4,0.7-14.6,1	c-1.2-2.5-3.7-6.9-6.4-11.6c-6.9-11.6-9.9-15.3-11.6-17.1c-1.5-2-3.2-1.7-3.7-1.7h-0.2h-0.2c-0.5,0-2.5,0.5-3.2,2.7	c-1.2,2-3,6.4-6.2,19.5c-1.2,5.2-2.2,10.1-3,12.9c-3,0.7-8.7,2-14.1,3.2c-4.7,1.2-8.7,2.2-11.6,3c-5.7,1.5-6.9,2.2-7.7,3.5	c-0.7,1-1,2.2-0.5,3.5c0.5,2,2,4.9,15.6,13.4c4.5,2.7,8.7,5.4,11.4,6.9c-0.5,3.2-1.5,9.4-2.5,15.6c-0.7,5.4-1.5,9.6-1.7,12.9	c-0.7,5.9-0.7,7.9,1.2,9.4c0.7,0.5,1.7,1,3.7,0.7c1.2-0.2,4.5-0.7,18.6-10.9c5.4-4,10.4-7.9,13.1-10.1c3.2,1.2,9.2,3.7,15.3,5.9	c16.3,5.9,19.5,5.4,20.8,5.2c1.7-0.2,2.7-1.2,3.2-1.7c1.5-2,0.7-4-1.5-9.4c-1.2-3-3-6.9-5.2-11.6c-2.7-5.7-5.4-11.4-6.9-14.3	c2-2.2,5.4-5.9,8.9-9.9c10.6-12.1,11.4-15.3,11.1-17.3C411.5,339.4,410.7,338.4,409.7,337.4z"/>	<path class="star" opacity="0.6" fill="#FFFFFF" d="M310.3,334.7c-0.5-0.7-1-1.2-4-2.5c-1.5-0.7-3.5-1.5-6.2-2.5	c-3-1.2-5.9-2.2-7.7-3c0-1.5-0.2-4.5-0.7-7.4c-0.7-7.4-1.5-10.1-2-11.1c-0.2-1.2-1.2-1.7-1.5-1.7c0,0,0,0-0.2,0c0,0,0,0-0.2,0	c-0.2,0-1.2-0.2-2.2,0.7c-1,0.7-3,2.5-7.7,8.4c-1.5,2.5-3,4.7-4,5.9c-1.7-0.2-4.7-1-7.9-1.5c-2.7-0.5-4.9-1-6.4-1.2	c-3.5-0.5-4-0.5-4.7,0c-0.7,0.2-1,1-1.2,1.5c-0.2,1.2,0,3,4.9,10.4c1.5,2.5,3.2,4.7,4.2,6.2c-1,1.5-3,4.5-4.7,7.4	c-1.7,2.5-3,4.5-3.7,6.2c-1.7,3-2.2,4-1.5,5.2c0.2,0.5,0.7,1,1.7,1.2c0.7,0.2,2.5,0.7,11.9-1.2c3.7-0.7,7.2-1.7,8.9-2.2	c1.2,1.5,3.7,4,6.4,6.4c6.9,6.7,8.7,7.2,9.4,7.4c1,0.2,1.7,0,2-0.2c1.2-0.7,1.2-1.7,1.5-5.2c0-1.7,0-4.2,0-7.2	c0-3.5-0.2-6.9-0.2-8.9c1.5-0.7,4.2-1.7,6.7-3c8.2-3.7,9.2-5.2,9.6-6.2C310.5,336.2,310.5,335.5,310.3,334.7z"/>	<path class="star" opacity="0.4" fill="#FFFFFF" d="M446.1,360.4c-0.5-0.2-0.7-0.2-3-0.2c-1,0-2.5,0.2-4.2,0.5	c-2,0.2-4,0.5-4.9,0.7c-0.5-0.7-1.5-2.2-2.5-3.7c-2.7-4-3.7-4.9-4.5-5.4c-0.5-0.7-1.2-0.5-1.5-0.5l0,0l0,0c-0.2,0-0.7,0.2-1,1	c-0.2,0.7-1,2.2-1.7,6.9c-0.2,1.7-0.5,3.5-0.7,4.5c-1,0.2-3,1-4.7,1.5c-1.7,0.5-3,1-4,1.2c-2,0.7-2.2,1-2.5,1.5	c-0.2,0.2-0.2,0.7,0,1.2c0.2,0.7,0.7,1.5,5.7,4.2c1.5,0.7,3.2,1.7,4,2c0,1.2-0.2,3.2-0.5,5.4c-0.2,1.7-0.2,3.5-0.2,4.5	c0,2,0,2.7,0.7,3.2c0.2,0.2,0.7,0.2,1.2,0.2c0.5,0,1.5-0.2,6.2-4.2c1.7-1.5,3.5-3,4.2-3.7c1.2,0.2,3.2,1,5.4,1.7	c5.7,1.5,6.9,1.2,7.2,1.2c0.5-0.2,1-0.5,1-0.7c0.5-0.7,0.2-1.2-0.7-3.2c-0.5-1-1.2-2.2-2.2-4c-1-2-2.2-3.7-2.7-4.7	c0.7-0.7,1.7-2.2,2.7-3.7c3.2-4.5,3.5-5.4,3.5-6.2C446.6,361.2,446.3,360.7,446.1,360.4z"/>	</g>	</svg>
</body>
</html>
</body>
</html>

SVG Stars Animation - Script Codes CSS Codes

/* -------------------------- Base
--------------------------- */
body { padding-top: 60px;	background: #0f4e7a;
}
svg {	margin: auto; display: block;	width: 28%;
}
/* -------------------------- Keyframes
--------------------------- */
@-webkit-keyframes slide { 50% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0); } 80% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}
@keyframes slide { 50% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0); } 80% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}
@-webkit-keyframes grow { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15) rotate(-5deg); transform: scale(1.15) rotate(-5deg); opacity: 1; fill: #fdf097; } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes grow { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15) rotate(-5deg); transform: scale(1.15) rotate(-5deg); opacity: 1; fill: #fdf097; } 100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes offset { 60% { stroke-opacity: 1; } 100% { stroke-dashoffset: 0; }
}
@keyframes offset { 60% { stroke-opacity: 1; } 100% { stroke-dashoffset: 0; }
}
/* -------------------------- SVG Styles
--------------------------- */
.stars * { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
.stars-bg { stroke-opacity: 0; stroke-dasharray: 815; stroke-dashoffset: 815; -webkit-animation: offset .8s 2.2s linear forwards; animation: offset .8s 2.2s linear forwards;
}
.star { -webkit-transform: translate3d(0, 180px, 0); transform: translate3d(0, 180px, 0); -webkit-animation: slide .5s forwards, grow .6s ease-out forwards; animation: slide .5s forwards, grow .6s ease-out forwards;
}
.star:nth-of-type(1) { -webkit-animation-delay: .5s, 1.8s; animation-delay: .5s, 1.8s; }
.star:nth-of-type(2) { -webkit-animation-delay: 0s, 1.5s; animation-delay: 0s, 1.5s; }
.star:nth-of-type(3) { -webkit-animation-delay: .8s, 2s; animation-delay: .8s, 2s; }
SVG Stars Animation - Script Codes
SVG Stars Animation - Script Codes
Home Page Home
Developer Aaron Cuddeback
Username gymratpacks
Uploaded November 03, 2022
Rating 3
Size 3,088 Kb
Views 24,288
Do you need developer help for SVG Stars 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!

Aaron Cuddeback (gymratpacks) Script Codes
Create amazing web content 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!