ScrollTrigger实现滚动日落日出动画效果代码
代码语言：html
所属分类：动画
代码描述：ScrollTrigger实现滚动日落日出动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
/*
========================================
BEST VIEWED IN FULL-SCREEN
codepen.io/AbubakerSaeed/full/rNMpLJb
========================================
*/
/* FONT */
/* Redressed by Astigmatic — Cute font ...<3 it */
/* -------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Redressed&display=swap');
/* DEFAULT */
/* -------------------------------------------------------- */
body {
--th: 2200px;
margin: 0;
padding: 0;
height: var(--th);
font-family: "Redressed", cursive;
color: hsl(0, 0%, 100%);
}
a {
color: inherit;
}
/* SCENE */
/* -------------------------------------------------------- */
#scene {
width: 100%;
height: 100vh;
min-height: 635px;
position: fixed;
overflow: hidden;
}
/* TOP */
/* -------------------------------------------------------- */
.top {
height: 60%;
background-color: hsl(229, 20%, 16%);
background-image: linear-gradient(to bottom,
transparent,
hsl(39, 100%, 50%) 60%,
hsl(60, 100%, 50%),
hsl(180, 40%, 80%) 84%);
background-size: 100% var(--th);
background-position: 0 100%;
position: relative;
}
/* STARS */
.stars {
opacity: 0;
}
.stars__svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60%;
}
/* CLOUDS */
.clouds-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
.clouds {
position: inherit;
width: inherit;
height: inherit;
}
.cloud {
border-radius: 1000px;
position: absolute;
background: hsla(0 0% 100% / .4);
}
/* SUN & MOON */
.sun-and-moon {
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(-400px);
}
.sun,
.moon {
width: 140px;
height: 140px;
border-radius: 140px;
}
.moon {
background: radial-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%), hsl(0, 0%, 100%), hsl(0, 0%, 80%));
box-shadow: 0 0 20px 2px hsl(0, 0%, 100%), 0 0 90px 40px hsla(0, 0%, 100%, .4);
}
.sun {
margin-top: 320px;
background: radial-gradient(hsl(50, 100%, 50%) 20%, hsl(39, 100%, 50%));
box-shadow: 0 0 20px 2px hsl(39, 100%, 80%), 0 0 90px 40px hsla(39, 100%, 90%, .4);
}
/* BOTTOM */
/* -------------------------------------------------------- */
.bottom {
height: 40%;
background: hsl(60, 58%, 10%);
position: relative;
}
/* MOUNTAINS */
.mountains {
position: relative;
}
.mountains--1 {
--width: 220px;
--height: 130px;
height: var(--height);
transform: translateY(-100%);
}
.mountains--2 {
--width: 330px;
--height: 200px;
height: var(--height);
transform: translateY(-280px);
}
.mountains--3 {
--width: 270px;
--height: 160px;
height: var(--height);
transform: translateY(-360px);
z-index: 10;
}
.mountain {
-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
position: absolute;
box-shadow: inset 10px -20px 30px hsla(0, 0%, 0%, .2);
}
.mountain--1 {
width: var(--width);
height: var(--height);
top: 1px;
background: hsl(200, 0%, 50%);
transform-origin: bottom center;
}
.mountain--2 {
width: var(--width);
height: var(--height);
background: hsl(240, 3%, 54%);
}
.mountain--3 {
width: var(--width);
height: var(--height);
background: hsl(244, 9%, 30%);
transform-origin: top center;
}
/* TREES */
.trees-container {
position: absolute;
top: 0;
left: 0;
}
.trees {
position: absolute;
}
.trees--1 {
z-index: 2;
}
.trees--1 {
z-index: 1;
}
.tree {
-webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
position: absolute;
background: hsl(130, 95%, 25%);
box-shadow: inset 10px -20px 20px hsla(136, 83%, 16%, .2);
}
.tree--1 {
width: 54px;
height: 80px;
}
.tree--2 {
width: 50px;
height: 64px;
}
.tree--3 {
width: 30px;
height: 44px;
}
/* INFO */
/* -------------------------------------------------------- */
.info {
position: fixed;
bottom: top;
left: 0;
box-sizing: border-box;
padding: 18px 30px 20px;
width: 100%;
height: 100%;
opacity: .8;
}
@media screen and (max-width: 768px) {
.info {
text-align: center;
}
}
.info__heading {
display: inline-block;
font-size: 32px;
margin: 0;
text-align: center;
font-weight: normal;
}
.info__heading small {
font-size: 18px;
transform: translateY(-6px);
display: inline-block;
}
.info__scroll {
position: absolute;
left: 0;
bottom: 30px;
width: 100%;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<!-- SCENE -->
<div id="scene">
<!-- TOP -->
<!-- -------------------------------------------------------- -->
<div class="top">
<!-- STARS -->
<!-- I've taken this SVG straight from my previous pen — Animated Night Scene (Figma Scene) https://codepen.io/AbubakerSaeed/full/JjRJBZO 🤗 -->
<div class="stars">
<svg class="stars__svg" style="transform: translate(0, 0) scale(2)" fill="none" viewBox="0 0 1920 1080">
<defs>
<filter id="a" width="30" height="30" x="115" y="73" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="b" width="30" height="30" x="1090" y="168" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="c" width="30" height="30" x="709" y="176" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="d" width="30" height="30" x="1405" y="69" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="e" width="30" height="30" x="81" y="249" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="f" width="30" height="30" x="1441" y="283" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="g" width="30" height="30" x="802" y="363" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="h" width="30" height="30" x="1808" y="65" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="i" width="30" height="30" x="1222" y="405" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="j" width="30" height="30" x="371" y="324" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="k" width="30" height="30" x="522" y="71" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="l" width="30" height="30" x="891" y="77" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="m" width="30" height="30" x="1766" y="263" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="n" width="30" height="30" x="1567" y="172" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
<g data-svg-origin="130 86" filter="url(#a)" transform="translate(-1.417 -.937) scale(1.0109)" style="transform-origin:0 0">
<circle cx="130" cy="86" r="2" fill="#fff" />
</g>
<g data-svg-origin="1105 181" filter="url(#b)" transform="translate(-216.911 -35.53) scale(1.1963)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1105 181)" />
</g>
<g data-svg-origin="724 189" filter="url(#c)" transform="translate(-31.204 -8.146) scale(1.0431)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 724 189)" />
</g>
<g data-svg-origin="1420 82" filter="url(#d)" transform="matrix(1.1 0 0 1.1 -142 -8.2)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1420 82)" />
</g>
<g data-svg-origin="96 262" filter="url(#e)" transform="translate(-18.394 -50.2) scale(1.1916)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 96 262)" />
</g>
<g data-svg-origin="1456 296" filter="url(#f)" transform="translate(189.862 38.598) scale(.8696)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1456 296)" />
</g>
<g data-svg-origin="817 376" filter="url(#g)" transform="translate(-46.896 -21.582) scale(1.0574)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 817 376)" />
</g>
<g data-svg-origin="1823 78" filter="url(#h)" transform="translate(306.082 13.096) scale(.8321)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1823 78)" />
</g>
<g data-svg-origin="1237 418" filter="url(#i)" transform="translate(-194.951 -65.877) scale(1.1576)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1237 418)" />
</g>
<g data-svg-origin="386 337" filter="url(#j)" transform="translate(-76.39 -66.692) scale(1.1979)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 386 337)" />
</g>
<g data-svg-origin="537 84" filter="url(#k)" transform="translate(-75.986 -11.886) scale(1.1415)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 537 84)" />
</g>
<g data-svg-origin="906 90" filter="url(#l)" transform="translate(-25.187 -2.502) scale(1.0278)" style="transform-origin:0 0">
<circle cx="906" cy="90" r="2" fill="#fff" />
</g>
<g data-svg-origin="1781 276" filter="url(#m)" transform="translate(-340.883 -52.826) scale(1.1914)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1781 276)" />
</g>
<g data-svg-origin="1582 185" filter="url(#n)" transform="translate(-277.957 -32.505) scale(1.1757)" style="transform-origin:0 0">
<circle cx="1582" cy="185" r="2" fill="#fff" />
</g>
</svg>
<svg class="stars__svg" style="transform: translate(-30%, 10%) scale(3)" fill="none" viewBox="0 0 1920 1080">
<defs>
<filter id="a" width="30" height="30" x="115" y="73" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="b" width="30" height="30" x="1090" y="168" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="c" width="30" height="30" x="709" y="176" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="d" width="30" height="30" x="1405" y="69" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="e" width="30" height="30" x="81" y="249" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="f" width="30" height="30" x="1441" y="283" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="g" width="30" height="30" x="802" y="363" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="h" width="30" height="30" x="1808" y="65" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="i" width="30" height="30" x="1222" y="405" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="j" width="30" height="30" x="371" y="324" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="k" width="30" height="30" x="522" y="71" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="l" width="30" height="30" x="891" y="77" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="m" width="30" height="30" x="1766" y="263" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="n" width="30" height="30" x="1567" y="172" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
<g data-svg-origin="130 86" filter="url(#a)" transform="translate(-1.417 -.937) scale(1.0109)" style="transform-origin:0 0">
<circle cx="130" cy="86" r="2" fill="#fff" />
</g>
<g data-svg-origin="1105 181" filter="url(#b)" transform="translate(-216.911 -35.53) scale(1.1963)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1105 181)" />
</g>
<g data-svg-origin="724 189" filter="url(#c)" transform="translate(-31.204 -8.146) scale(1.0431)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 724 189)" />
</g>
<g data-svg-origin="1420 82" filter="url(#d)" transform="matrix(1.1 0 0 1.1 -142 -8.2)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1420 82)" />
</g>
<g data-svg-origin="96 262" filter="url(#e)" transform="translate(-18.394 -50.2) scale(1.1916)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 96 262)" />
</g>
<g data-svg-origin="1456 296" filter="url(#f)" transform="translate(189.862 38.598) scale(.8696)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1456 296)" />
</g>
<g data-svg-origin="817 376" filter="url(#g)" transform="translate(-46.896 -21.582) scale(1.0574)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 817 376)" />
</g>
<g data-svg-origin="1823 78" filter="url(#h)" transform="translate(306.082 13.096) scale(.8321)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1823 78)" />
</g>
<g data-svg-origin="1237 418" filter="url(#i)" transform="translate(-194.951 -65.877) scale(1.1576)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1237 418)" />
</g>
<g data-svg-origin="386 337" filter="url(#j)" transform="translate(-76.39 -66.692) scale(1.1979)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 386 337)" />
</g>
<g data-svg-origin="537 84" filter="url(#k)" transform="translate(-75.986 -11.886) scale(1.1415)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 537 84)" />
</g>
<g data-svg-origin="906 90" filter="url(#l)" transform="translate(-25.187 -2.502) scale(1.0278)" style="transform-origin:0 0">
<circle cx="906" cy="90" r="2" fill="#fff" />
</g>
<g data-svg-origin="1781 276" filter="url(#m)" transform="translate(-340.883 -52.826) scale(1.1914)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1781 276)" />
</g>
<g data-svg-origin="1582 185" filter="url(#n)" transform="translate(-277.957 -32.505) scale(1.1757)" style="transform-origin:0 0">
<circle cx="1582" cy="185" r="2" fill="#fff" />
</g>
</svg>
<svg class="stars__svg" style="transform: translate(30%, 4%) scale(1.5)" fill="none" viewBox="0 0 1920 1080">
<defs>
<filter id="a" width="30" height="30" x="115" y="73" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="b" width="30" height="30" x="1090" y="168" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="c" width="30" height="30" x="709" y="176" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="d" width="30" height="30" x="1405" y="69" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="e" width="30" height="30" x="81" y="249" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="f" width="30" height="30" x="1441" y="283" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="g" width="30" height="30" x="802" y="363" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="h" width="30" height="30" x="1808" y="65" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="i" width="30" height="30" x="1222" y="405" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="j" width="30" height="30" x="371" y="324" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="k" width="30" height="30" x="522" y="71" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="l" width="30" height="30" x="891" y="77" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="m" width="30" height="30" x="1766" y="263" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="n" width="30" height="30" x="1567" y="172" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
<g data-svg-origin="130 86" filter="url(#a)" transform="translate(-1.417 -.937) scale(1.0109)" style="transform-origin:0 0">
<circle cx="130" cy="86" r="2" fill="#fff" />
</g>
<g data-svg-origin="1105 181" filter="url(#b)" transform="translate(-216.911 -35.53) scale(1.1963)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1105 181)" />
</g>
<g data-svg-origin="724 189" filter="url(#c)" transform="translate(-31.204 -8.146) scale(1.0431)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 724 189)" />
</g>
<g data-svg-origin="1420 82" filter="url(#d)" transform="matrix(1.1 0 0 1.1 -142 -8.2)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1420 82)" />
</g>
<g data-svg-origin="96 262" filter="url(#e)" transform="translate(-18.394 -50.2) scale(1.1916)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 96 262)" />
</g>
<g data-svg-origin="1456 296" filter="url(#f)" transform="translate(189.862 38.598) scale(.8696)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1456 296)" />
</g>
<g data-svg-origin="817 376" filter="url(#g)" transform="translate(-46.896 -21.582) scale(1.0574)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 817 376)" />
</g>
<g data-svg-origin="1823 78" filter="url(#h)" transform="translate(306.082 13.096) scale(.8321)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1823 78)" />
</g>
<g data-svg-origin="1237 418" filter="url(#i)" transform="translate(-194.951 -65.877) scale(1.1576)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1237 418)" />
</g>
<g data-svg-origin="386 337" filter="url(#j)" transform="translate(-76.39 -66.692) scale(1.1979)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 386 337)" />
</g>
<g data-svg-origin="537 84" filter="url(#k)" transform="translate(-75.986 -11.886) scale(1.1415)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 537 84)" />
</g>
<g data-svg-origin="906 90" filter="url(#l)" transform="translate(-25.187 -2.502) scale(1.0278)" style="transform-origin:0 0">
<circle cx="906" cy="90" r="2" fill="#fff" />
</g>
<g data-svg-origin="1781 276" filter="url(#m)" transform="translate(-340.883 -52.826) scale(1.1914)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1781 276)" />
</g>
<g data-svg-origin="1582 185" filter="url(#n)" transform="translate(-277.957 -32.505) scale(1.1757)" style="transform-origin:0 0">
<circle cx="1582" cy="185" r="2" fill="#fff" />
</g>
</svg>
<svg class="stars__svg" style="transform: translate(-60%, 4%) scale(2)" fill="none" viewBox="0 0 1920 1080">
<defs>
<filter id="a" width="30" height="30" x="115" y="73" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="b" width="30" height="30" x="1090" y="168" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="c" width="30" height="30" x="709" y="176" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="d" width="30" height="30" x="1405" y="69" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="e" width="30" height="30" x="81" y="249" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="f" width="30" height="30" x="1441" y="283" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="g" width="30" height="30" x="802" y="363" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="h" width="30" height="30" x="1808" y="65" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="i" width="30" height="30" x="1222" y="405" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="j" width="30" height="30" x="371" y="324" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="k" width="30" height="30" x="522" y="71" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="l" width="30" height="30" x="891" y="77" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="m" width="30" height="30" x="1766" y="263" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="n" width="30" height="30" x="1567" y="172" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
<g data-svg-origin="130 86" filter="url(#a)" transform="translate(-1.417 -.937) scale(1.0109)" style="transform-origin:0 0">
<circle cx="130" cy="86" r="2" fill="#fff" />
</g>
<g data-svg-origin="1105 181" filter="url(#b)" transform="translate(-216.911 -35.53) scale(1.1963)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1105 181)" />
</g>
<g data-svg-origin="724 189" filter="url(#c)" transform="translate(-31.204 -8.146) scale(1.0431)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 724 189)" />
</g>
<g data-svg-origin="1420 82" filter="url(#d)" transform="matrix(1.1 0 0 1.1 -142 -8.2)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1420 82)" />
</g>
<g data-svg-origin="96 262" filter="url(#e)" transform="translate(-18.394 -50.2) scale(1.1916)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 96 262)" />
</g>
<g data-svg-origin="1456 296" filter="url(#f)" transform="translate(189.862 38.598) scale(.8696)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1456 296)" />
</g>
<g data-svg-origin="817 376" filter="url(#g)" transform="translate(-46.896 -21.582) scale(1.0574)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 817 376)" />
</g>
<g data-svg-origin="1823 78" filter="url(#h)" transform="translate(306.082 13.096) scale(.8321)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1823 78)" />
</g>
<g data-svg-origin="1237 418" filter="url(#i)" transform="translate(-194.951 -65.877) scale(1.1576)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1237 418)" />
</g>
<g data-svg-origin="386 337" filter="url(#j)" transform="translate(-76.39 -66.692) scale(1.1979)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 386 337)" />
</g>
<g data-svg-origin="537 84" filter="url(#k)" transform="translate(-75.986 -11.886) scale(1.1415)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 537 84)" />
</g>
<g data-svg-origin="906 90" filter="url(#l)" transform="translate(-25.187 -2.502) scale(1.0278)" style="transform-origin:0 0">
<circle cx="906" cy="90" r="2" fill="#fff" />
</g>
<g data-svg-origin="1781 276" filter="url(#m)" transform="translate(-340.883 -52.826) scale(1.1914)" style="transform-origin:0 0">
<circle r="2" fill="#fff" transform="matrix(1 0 0 -1 1781 276)" />
</g>
<g data-svg-origin="1582 185" filter="url(#n)" transform="translate(-277.957 -32.505) scale(1.1757)" style="transform-origin:0 0">
<circle cx="1582" cy="185" r="2" fill="#fff" />
</g>
</svg>
<svg class="stars__svg" style="transform: translate(-10%, 40%) scale(3)" fill="none" viewBox="0 0 1920 1080">
<defs>
<filter id="a" width="30" height="30" x="115" y="73" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="b" width="30" height="30" x="1090" y="168" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feMorphology in="SourceAlpha" operator="dilate" radius="2" result="effect1_dropShadow" />
<feOffset dy="2" />
<feGaussianBlur stdDeviation="5.5" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
<filter id="c" width="30" height="30" x="709" y="176" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0