bg.svg

<svg fill="none" viewBox="0 0 800 300" width="800" height="300" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>
				.container {
					height: 300px;
					display: flex;
					align-items: center;
					justify-content: center;
					padding-bottom: 80px;
<!-- 				  	background: radial-gradient(ellipse at top, #110c1e 0%, rgba(0,0,0,0) 100%);
  					animation: nightSkyAnimation 150s linear infinite; -->
				}

<!-- 				@keyframes nightSkyAnimation {
					0% {
						background-position: 0% 0%;
					}
					100% {
						background-position: 100% 100%;
					}
				} -->
				
			        #stars {
					width: 1px;
					height: 1px;
					background: transparent;
					box-shadow: 483px 450px #FFF, 1995px 525px #FFF, 755px 1459px #FFF, 610px 1246px #FFF, 764px 1850px #FFF, 1274px 1697px #FFF, 1227px 37px #FFF, 1090px 506px #FFF, 341px 1005px #FFF, 1002px 755px #FFF, 693px 1497px #FFF, 1797px 1626px #FFF, 1838px 793px #FFF, 802px 881px #FFF, 1117px 1983px #FFF, 352px 1465px #FFF, 1526px 852px #FFF, 1559px 526px #FFF, 517px 516px #FFF, 1380px 244px #FFF, 662px 1531px #FFF, 1544px 518px #FFF, 253px 879px #FFF, 774px 1629px #FFF, 752px 994px #FFF, 1129px 726px #FFF, 232px 1050px #FFF, 1766px 290px #FFF, 1976px 842px #FFF, 662px 1535px #FFF, 257px 1016px #FFF, 665px 708px #FFF, 1476px 1772px #FFF, 261px 498px #FFF, 719px 1459px #FFF, 469px 438px #FFF, 994px 474px #FFF, 744px 808px #FFF, 1609px 1741px #FFF, 898px 260px #FFF, 1978px 1436px #FFF, 904px 1244px #FFF, 123px 773px #FFF, 6px 923px #FFF, 1973px 1778px #FFF, 1470px 1861px #FFF, 1037px 156px #FFF, 554px 1905px #FFF, 1508px 849px #FFF, 1213px 1603px #FFF, 87px 1907px #FFF, 492px 527px #FFF, 91px 213px #FFF, 492px 15px #FFF, 1357px 1157px #FFF, 637px 240px #FFF, 1515px 281px #FFF, 1757px 682px #FFF, 1035px 1298px #FFF, 1019px 1233px #FFF, 25px 162px #FFF, 262px 884px #FFF, 1328px 965px #FFF, 984px 879px #FFF, 1213px 689px #FFF, 623px 1091px #FFF, 1227px 422px #FFF, 1977px 1025px #FFF, 620px 474px #FFF, 528px 1525px #FFF;
					animation: animStar 50s linear infinite;
			        }
			        
			        #stars:after {
					content: " ";
					position: absolute;
					top: 2000px;
					width: 1px;
					height: 1px;
					background: transparent;
					box-shadow: 483px 450px #FFF, 1995px 525px #FFF, 755px 1459px #FFF, 610px 1246px #FFF, 764px 1850px #FFF, 1274px 1697px #FFF, 1227px 37px #FFF, 1090px 506px #FFF, 341px 1005px #FFF, 1002px 755px #FFF, 693px 1497px #FFF, 1797px 1626px #FFF, 1838px 793px #FFF, 802px 881px #FFF, 1117px 1983px #FFF, 352px 1465px #FFF, 1526px 852px #FFF, 1559px 526px #FFF, 517px 516px #FFF, 1380px 244px #FFF, 662px 1531px #FFF, 1544px 518px #FFF, 253px 879px #FFF, 774px 1629px #FFF, 752px 994px #FFF, 1129px 726px #FFF, 232px 1050px #FFF, 1766px 290px #FFF, 1976px 842px #FFF, 662px 1535px #FFF, 257px 1016px #FFF, 665px 708px #FFF, 1476px 1772px #FFF, 261px 498px #FFF, 719px 1459px #FFF, 469px 438px #FFF, 994px 474px #FFF, 744px 808px #FFF, 1609px 1741px #FFF, 898px 260px #FFF, 1978px 1436px #FFF, 904px 1244px #FFF, 123px 773px #FFF, 6px 923px #FFF, 1973px 1778px #FFF, 1470px 1861px #FFF, 1037px 156px #FFF, 554px 1905px #FFF, 1508px 849px #FFF, 1213px 1603px #FFF, 87px 1907px #FFF, 492px 527px #FFF, 91px 213px #FFF, 492px 15px #FFF, 1357px 1157px #FFF, 637px 240px #FFF, 1515px 281px #FFF, 1757px 682px #FFF, 1035px 1298px #FFF, 1019px 1233px #FFF, 25px 162px #FFF, 262px 884px #FFF, 1328px 965px #FFF, 984px 879px #FFF, 1213px 689px #FFF, 623px 1091px #FFF, 1227px 422px #FFF, 1977px 1025px #FFF, 620px 474px #FFF, 528px 1525px #FFF;
			        }
			        
			        #stars2 {
					width: 2px;
					height: 2px;
					background: transparent;
					box-shadow: 1585px 315px #FFF, 1750px 858px #FFF, 502px 1184px #FFF, 1482px 150px #FFF, 870px 93px #FFF, 1401px 1976px #FFF, 494px 1549px #FFF, 1607px 1894px #FFF, 1029px 1466px #FFF, 1931px 1390px #FFF, 819px 1431px #FFF, 521px 1062px #FFF, 1754px 574px #FFF, 577px 943px #FFF, 850px 1377px #FFF, 445px 1835px #FFF, 1658px 1675px #FFF, 521px 1144px #FFF, 560px 1624px #FFF, 1329px 1778px #FFF;
					animation: animStar 100s linear infinite;
			        }
			        
			        #stars2:after {
					content: " ";
					position: absolute;
					top: 2000px;
					width: 2px;
					height: 2px;
					background: transparent;
					box-shadow: 1585px 315px #FFF, 1750px 858px #FFF, 502px 1184px #FFF, 1482px 150px #FFF, 870px 93px #FFF, 1401px 1976px #FFF, 494px 1549px #FFF, 1607px 1894px #FFF, 1029px 1466px #FFF, 1931px 1390px #FFF, 819px 1431px #FFF, 521px 1062px #FFF, 1754px 574px #FFF, 577px 943px #FFF, 850px 1377px #FFF, 445px 1835px #FFF, 1658px 1675px #FFF, 521px 1144px #FFF, 560px 1624px #FFF, 1329px 1778px #FFF;
			        }
			        
			        #stars3 {
					width: 3px;
					height: 3px;
					background: transparent;
					box-shadow: 91px 409px #FFF, 1886px 728px #FFF, 1294px 970px #FFF, 720px 1215px #FFF, 796px 1431px #FFF, 834px 1217px #FFF, 1926px 1164px #FFF, 1803px 310px #FFF, 1532px 1421px #FFF, 1680px 232px #FFF;
					animation: animStar 150s linear infinite;
			        }
			        
			        #stars3:after {
					content: " ";
					position: absolute;
					top: 2000px;
					width: 3px;
					height: 3px;
					background: transparent;
					box-shadow: 91px 409px #FFF, 1886px 728px #FFF, 1294px 970px #FFF, 720px 1215px #FFF, 796px 1431px #FFF, 834px 1217px #FFF, 1926px 1164px #FFF, 1803px 310px #FFF, 1532px 1421px #FFF, 1680px 232px #FFF;
			        }
			        
			        .moon {
					font-size: 15px;
					top: 220vh;
					left: 30%;
					position: absolute;
					animation: animMoon 90s linear infinite;
			        }
			        
			        .planet1 {
					font-size: 20px;
					top: 175vh;
					left: 75%;
					position: absolute;
					animation: animPlanet 50s linear infinite;
			        }
			        
			        .planet2 {
					font-size: 20px;
					top: 110vh;
					left: 40%;
					position: absolute;
					animation: animMoon 60s linear infinite;
			        }
			        
			        .spaceship {
					font-size: 25px;
					top: 58vh;
					left: -10%;
					position: absolute;
					animation: animShip 5s linear 1 10s
			        }
			        
			        .spaceship2 {
					font-size: 25px;
					top: 55vh;
					right: -10%;
					position: absolute;
					animation: animShip2 5s linear 1 22s
			        }
			        
			        .spaceship3 {
					font-size: 25px;
					top: 90vh;
					right: -10%;
					position: absolute;
					animation: animShip3 5s linear 1 35s;
			        }
			        
			        .satelite {
					font-size: 23px;
					top: 260vh;
					left: 90%;
					position: absolute;
					animation: animSat 90s linear infinite;
			        }
			        
			        @keyframes animShip {
			            from {
			                transform: translate(0px, 0px);
			            }
			        
			            to {
			                transform: translate(110vw, -250px);
			            }
			        }
			        
			        @keyframes animShip2 {
			            from {
			                transform: translate(0px, 0px);
			            }
			        
			            to {
			                transform: translate(-110vw, 300px);
			            }
			        }
			        
			        @keyframes animShip3 {
			            from {
			                transform: translate(0px, 0px) rotate(40deg);
			            }
			        
			            to {
			                transform: translate(-110vw, -80vh) rotate(40deg);
			            }
			        }
			        
			        @keyframes animPlanet {
			            from {
			                transform: translate(0px, 0px) rotate(0deg);
			            }
			        
			            to {
			                transform: translate(-400px, -2000px) rotate(360deg);
			            }
			        }
			        
			        @keyframes animMoon {
			            from {
			                transform: translate(0px, 0px) rotate(0deg);
			            }
			        
			            to {
			                transform: translate(300px, -3000px) rotate(360deg);
			            }
			        }
			        
			        @keyframes animSat {
			            from {
			                transform: translate(0px, 0px);
			            }
			        
			            to {
			                transform: translate(-550px, -3000px);
			            }
			        }
			        
			        @keyframes animStar {
			            from {
			                transform: translateY(0px);
			            }
			        
			            to {
			                transform: translateY(-2000px);
			            }
			        }

				.typing-demo {
					width: 13ch;
					animation: typing 2s steps(13), blink .5s step-end infinite alternate;
					white-space: nowrap;
					overflow: hidden;
					border-right: 3px solid;
					font-family: monospace;
					font-size: 2em;
					color: rgb(31, 111, 235)
				}
<!-- 
				@media (prefers-color-scheme: dark) {
					.typing-demo {
						color: #fff;
					}	
				} -->
				
				@keyframes typing {
					from {
						width: 0
					}
				}
				    
				@keyframes blink {
					50% {
						border-color: transparent
					}
				}
			</style>
			<div class="container">
				<div id="stars"></div>
			      	<div id="stars2"></div>
				<div id="stars3"></div>
				<div class="moon">🌖</div>
				<div class="planet1">🪐</div>
				<div class="planet2">🌎</div>
				<div class="satelite">🛰️</div>
				<div class="spaceship">🛸</div>
				<div class="spaceship2">🛸</div>
				<div class="spaceship3">🛸</div>
				<div class="typing-demo">Hey There! 👋 </div>
			</div>
		</div>
	</foreignObject>
</svg>