svg+css打造山林间流星雨夜色日出效果代码
代码语言:html
所属分类:动画
代码描述:svg+css打造山林间流星雨夜色日出效果代码,美轮美奂的景色
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:300); /* Global Styles ---------------------------------------------- */ html {font-family: 'Open Sans', sans-serif; background: #0D133A; height:100%; font-size: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-smoothing: antialiased;overflow: hidden;position: relative;} body {height:100%;overflow: hidden; margin: 0; font-size: 1em; line-height: 1.4; position: relative;} img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } a{color: white;text-decoration: none;} /* Animation globals ---------------------------------------------- */ #landscape, .land, #bottom, .stags,.stag, .counter:before, #lensFlare, .sunMask{ animation-duration: 60s; animation-iteration-count: infinite; animation-timing-function: linear; } /* Background gradients ---------------------------------------------- */ #sky{ height: 60%; margin-bottom: -6px; position: absolute; top: 0px; z-index: 2; } #sky-rect{height:100%;} #reflection, #sunMask{ height: 40%; position: absolute; top: 60%; z-index: 4; } #reflection-rect{height:100%;} #sunMask{ background: #0D133A; height: 40%; position: absolute; top: 60%; width: 100%; } /* Stag ---------------------------------------------- */ #stag{ position: absolute; bottom: 15.3%; width: 6.3%; left: 38%; z-index: 5; } .stag{ width:100%; position: absolute; bottom: 0px; } .stags{ animation-name: stags; animation-delay:1s; } @keyframes stags{ 0% { fill:#0D141E;} 4% { fill:#101522;} 8% { fill:#121726;} 12% { fill:#141829;} 16% { fill:#1C1E3C;} 20% { fill:#22214F;} 24% { fill:#262262;} 28% { fill:#1D4065;} 32% { fill:#125768;} 36% { fill:#1E4553;} 40% { fill:#1E404E;} 44% { fill:#1E3B49;} 48% { fill:#1D3643;} 52% { fill:#1C313E;} 56% { fill:#1C3344;} 60% { fill:#1C3449;} 64% { fill:#1B344F;} 68% { fill:#183454;} 72% { fill:#242B4A;} 76% { fill:#2B2241;} 80% { fill:#24203C;} 84% { fill:#1D1D37;} 88% { fill:#151A32;} 92% { fill:#14192C;} 96% { fill:#111725;} 100% { fill:#0D141E;} } #stag1{ animation-name: stag_one; width: 108%; left: -20%; } @keyframes stag_one{ 0% {opacity:1.0;} 15% {opacity:1.0;} 20% {opacity:0.0;} 90% {opacity:0.0;} 95% {opacity:1.0;} 100% {opacity:1.0;} } #stag2{ animation-name: stag_two; } @keyframes stag_two{ 0% {opacity:0.0;} 17% {opacity:0.0;} 20% {opacity:1.0;} 40% {opacity:1.0;} 45% {opacity:0.0;} 65% {opacity:0.0;} 70% {opacity:1.0;} 90% {opacity:1.0;} 95% {opacity:0.0;} 100% {opacity:0.0;} } #stag3{ animation-name: stag_three; width: 144%; left: -10%; bottom: -3%; } @keyframes stag_three{ 0% {opacity:0.0;} 15% {opacity:0.0;} 20% {opacity:0.0;} 40% {opacity:0.0;} 45% {opacity:1.0;} 65% {opacity:1.0;} 70% {opacity:0.0;} 100% {opacity:0.0;} } /* Sun ---------------------------------------------- */ .sunMask{ position:absolute; width:100%; height:100%; -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); z-index: 4; mix-blend-mode: screen; animation-name: sunFocus; } @keyframes sunFocus{ 0% { filter: blur(10px);opacity:0;} 16% {filter: blur(10px);} 20% {filter: blur(10px);} 25% {filter: blur(5px);opacity:0;} 30% {filter: blur(0px);opacity:1;} 80% {filter: blur(0px);opacity:1;} 88% {filter: blur(5px);opacity:0;} 100% {filter: blur(10px);opacity:0;} } .sun{ width: 100%; padding-bottom: 100%; position:absolute; right: -51%; top: -330%; } .sun div{ background: transparent url(//repo.bfw.wiki/bfwrepo/svg/sun.svg); position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .suncrane{ animation: suncrane 60s linear infinite; position:absolute; width: 21%; height: 4%; background: transparent; margin: auto; top: 57%; left: 0; right: 0; } @keyframes suncrane{ 0% {transform:rotate(90deg);} 100% {transform:rotate(-270deg);} } .sun:before{ display:block; content:' '; animation: glare 60s linear infinite; position:absolute; width: 120%; height: 120%; background: url(//repo.bfw.wiki/bfwrepo/svg/glare.svg) no-repeat scroll center; top: -10%; left: -10%; background-size: 100%; } @keyframes glare{ from {transform:rotate(90deg);opacity:0.0;} 30%{opacity:0.0;} 36%{opacity:1.0;} 68%{opacity:1.0;} 74%{opacity:0.0;} to {transform:rotate(450deg);opacity:0.0;} } .sun:after{display: block; content:' '; position:absolute;background: white;width: 10%;height: 10%;top: 45%;border-radius: 100%;margin: auto;left: 0;right: 0;box-shadow: 0px 0px 80px 30px white;} /* Clouds ---------------------------------------------- */ .clouds{ position: absolute; width: 100%; z-index: 4; mix-blend-mode: screen; height: 100%; } .clouds svg{ width: 60%; position: absolute; top: 51%; filter: blur(2px); opacity: 0.4; left: -60%; animation-duration: 60s; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: clouds; } @keyframes clouds{ 0% {transform: translate3d(110%, 0px, 0px);opacity: 0.0;} 19%{opacity: 0.0;filter: blur(5px);} 25%{opacity: 0.3;filter: blur(2px);} 50%{opacity: 0.6;} 75%{opacity: 0.2;} 90%{opacity: 0.0;} 100% {transform: translate3d(150%, 0px, 0px);opacity: 0.0} } /* Lens flare ---------------------------------------------- */ .lighting{ width: 100%; height: 100%; position: absolute; z-index: 8; opacity: 0.3; -webkit-mask-image: gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1))); mix-blend-mode: screen; pointer-events: none; filter: blur(3px); } .lighting .suncrane{ width: 100%; } #lensFlare{ transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); animation-name: flaring; } @keyframes flaring{ 0% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0;} 28% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } 35% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 1.0; } 70% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 1.0; } 78% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } 100% { transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1); opacity: 0.0; } } /* Sun on lake twinkles ---------------------------------------------- */ .twinkleWrap{ position: absolute; z-index: 4; width:100%; height:100%; top:0; opacity: 0.55; } .twinkles{ width: 2.3%; position: absolute; right: 49.2%; top: 72.5%; animation: twinkles 60s linear infinite; } @keyframes twinkles{ 0% {transform: translate(450%, 0%);opacity:0.0;} 32%{opacity:0.0;} 34%{opacity:1.0;} 36.5% {transform: translate(450%, 0%);} 54% {transform: translate(0%, 0%);} 72% {transform: translate(-450%, 0%);opacity:1.0;} 78%{opacity:0.0;} 100% {transform: translate(-450%, 0%);opacity:0.0;} } .twinkles:before{ content:' '; display: none; position:absolute; height: 600px; width:3px; background:red; top: -600px; left: 50%; } .twinkles svg{ width: 100%; position: absolute; top: 0; } #twinkle1{ animation: twinkle1 2s linear infinite; } @keyframes twinkle1{ 0% {opacity:1.0;} 33.33% {opacity:0.0;} 66.66% {opacity:0.0;} 99.99% {opacity:1.0;} 100% {opacity:1.0;} } #twinkle2{ animation: twinkle2 2s linear infinite; } @keyframes twinkle2{ 0% {opacity:0.0;} 33.33% {opacity:1.0;} 66.66% {opacity:0.0;} 99.99% {opacity:0.0;} 100% {opacity:0.0;} } #twinkle3{ animation: twinkle3 2s linear infinite; } @keyframes twinkle3{ 0% {opacity:0.0;} 33.33% {opacity:0.0;} 66.66% {opacity:1.0;} 99.99% {opacity:0.0;} 100% {opacity:0.0;} } /* Vignette ---------------------------------------------- */ .vignette{ background: radial-gradient(transparent 60%, rgb(1, 14, 39) 130%); background-size: cover; height: 100%; z-index: 9; position: absolute; width: 100%; pointer-events: none; } /* Stars ---------------------------------------------- */ .stars{ height: 100%; z-index: 2; position: absolute; width: 100%; overflow: hidden; } .starWrap{ height: 60%; width: 100%; position:relative; } .starProject{ overflow: hidden; } .starReflect{ overflow: hidden; height: 40%; opacity: 0.9; top: 1%; } #stars{ position: absolute; width: 120%; border-radius: 100%; margin: auto; left: -10%; right: 0; animation: stars 120s linear infinite; transform: rotate(0deg); top: -35%; } @keyframes stars{ 100% {transform: rotate(-360deg);} } #starReflection{ position: absolute; width: 120%; border-radius: 100%; margin: auto; left: -10%; right: 0; animation: starsReflect 120s linear infinite; transform: rotate(0deg); top:initial; bottom: -102%; } @keyframes starsReflect{ 100% {transform: rotate(360deg);} } /* Sprites ----------------------------------------------- */ .spriteWrap{ height: 100%; width: 100%; position: absolute; z-index: 13; animation: sprites 60s linear infinite; pointer-events: none; } @keyframes sprites{ 0% {opacity:0.8;} 20% {opacity:0.8;} 25%{opacity:0.0;} 73% {opacity:0.0;} 90% {opacity:0.8;} 100% {opacity:0.8;} } #sprites{ height: 100%; width: 100%; } /* Controls ---------------------------------------------- */ .controls{ position:absolute; top:0px; width 20%; z-index: 10; background: rgba(0, 0, 0, 0.16); height: 100%; width: 380px; padding: 23px; transform: translate3d(-250px, 0px, 0px); -moz-transform: translate3d(-250px, 0px, 0px); -o-transform: translate3d(-250px, 0px, 0px); -ms-transform: translate3d(-250px, 0px, 0px); transform: translate3d(-250px, 0px, 0px); opacity: 0; } .controls, .controls *{ box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .controls:hover{ transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); opacity: 1.0; } .controls ul{ margin: 0px; padding: 0px; list-style: none; } .controls ul li{ border-bottom: 1px solid rgba(255, 255, 255, 0.09); color: white; } .controls ul li span.title{ display: inline-block; padding: 10px 0px; } .controls ul li a{ display: block; padding: 10px 0px; } .controls ul li a:hover{ padding-left: 10px; } .controls ul li a.active{} .controls ul li a.active:after{content: 'on';float: right;} .controls audio{ width: 100%; opacity: 0.2; position: relative; width: 80%; display: inline-block; top: 8px; float: right; } .controls audio:hover{opacity:1.0;} .noise{ width:100%; height:100%; background:transparent; opacity:0.03; z-index: 9; position: absolute; top: 0; pointer-events: none; } .noise.active{ background: transparent url(//repo.bfw.wiki/bfwrepo/icon/5fe566a638afc.gif); opacity: 0.015; background-size: 620px; } .counter{ color: rgba(255, 255, 255, 0.12); position: absolute; width: calc(100% - 46px); bottom: 21px; text-align:justify; font-size: 0px; } .counter:before{ content: ':'; display:inline-block; position: absolute; animation-name: timer; background: rgba(255, 255, 255, 0.03); text-align: right; left:0px; bottom: 0px; color: transparent; border-right: 1px solid rgba(255, 255, 255, 0.13); line-height: 34px; } @keyframes timer{ 0% { width:0%; } 100% { width:100%; } } /* Landscape ---------------------------------------------- */ #landscape{ width: 100.02%; position: absolute; bottom: 11%; z-index: 5; animation-name: focus; } @keyframes focus{ 0% { filter: blur(5px);} 16% {filter: blur(2px);} 20% {filter: blur(0px);} 80% {filter: blur(0px);} 88% {filter: blur(2px);} 100% {filter: blur(5px);} } #bottom{ animation-name: bottomFill; height: 100%; position: absolute; top: 88%; width: 100%; z-index: 5; animation-delay:1s; } @keyframes bottomFill{ 0% { background:#0D141E; } 4% { background:#101522; } 8% { background:#121726; } 12% { background:#141829; } 16% { background:#1C1E3C; } 20% { background:#22214F; } 24% { background:#262262; } 28% { background:#1D4065; } 32% { background:#125768; } 36% { background:#1E4553; } 40% { background:#1E404E; } 44% { background:#1E3B49; } 48% { background:#1D3643; } 52% { background:#1C313E; } 56% { background:#1C3344; } 60% { background:#1C3449; } 64% { background:#1B344F; } 68% { background:#183454; } 72% { background:#242B4A; } 76% { background:#2B2241; } 80% { background:#24203C; } 84% { background:#1D1D37; } 88% { background:#151A32; } 92% { background:#14192C; } 96% { background:#111725; } 100% { background:#0D141E; } } /* Land - layer 1 animation */ #landscape .layer1 { fill:#F1F2F2; animation-name: layer1; animation-delay:1s; } @keyframes layer1{ 0% { fill:#244154; } 4% { fill:#344358; } 8% { fill:#42465D; } 12% { fill:#4F4761; } 16% { fill:#7E5773; } 20% { fill:#A3517F; } 24% { fill:#F3829F; } 28% { fill:#D4B2AF; } 32% { fill:#AEDABB; } 36% { fill:#A1D6D6; } 40% { fill:#9ED5DD; } 44% { fill:#9AD4E4; } 48% { fill:#97D3EA; } 52% { fill:#92D3F4; } 56% { fill:#95C8DA; } 60% { fill:#96BDC5; } 64% { fill:#96B3B2; } 68% { fill:#96AA9E; } 72% { fill:#AF866A; } 76% { fill:#C0633B; } 80% { fill:#9D5E51; } 84% { fill:#7B5960; } 88% { fill:#59546D; } 92% { fill:#484E64; } 96% { fill:#37475C; } 100% { fill:#244154; } } /* Land - layer 2 animation */ #landscape .layer2 { fill:#E6E7E8; animation-name: layer2; animation-delay:1s; } @keyframes layer2{ 0% { fill:#0F2B46; } 4% { fill:#1C2D4A; } 8% { fill:#272E4E; } 12% { fill:#302F52; } 16% { fill:#663966; } 20% { fill:#913776; } 24% { fill:#D94A93; } 28% { fill:#BB94AD; } 32% { fill:#76CCCE; } 36% { fill:#6BAEC9; } 40% { fill:#62A7CA; } 44% { fill:#59A0CB; } 48% { fill:#5099CC; } 52% { fill:#4692CF; } 56% { fill:#4D8FBD; } 60% { fill:#518CAF; } 64% { fill:#548AA1; } 68% { fill:#578793; } 72% { fill:#7E6768; } 76% { fill:#8F4244; } 80% { fill:#74404D; } 84% { fill:#593D55; } 88% { fill:#393B5D; } 92% { fill:#2C3655; } 96% { fill:#1F304E; } 100% { fill:#0F2B46; } } /* Land - layer 3 animation */ #landscape .layer3 { fill:#D1D3D4; animation-name: layer3; animation-delay:1s; } @keyframes layer3{ 0% { fill:#0F2944; } 4% { fill:#1B2B47; } 8% { fill:#252C4B; } 12% { fill:#2E2D4E; } 16% { fill:#5F3663; } 20% { fill:#863572; } 24% { fill:#C8458D; } 28% { fill:#A48BAB; } 32% { fill:#68BFC7; } 36% { fill:#54A4C8; } 40% { fill:#4F9EC8; } 44% { fill:#4B98C7; } 48% { fill:#4691C7; } 52% { fill:#408BC8; } 56% { fill:#4688B7; } 60% { fill:#4984A9; } 64% { fill:#4C819C; } 68% { fill:#4E7E8F; } 72% { fill:#776167; } 76% { fill:#893E45; } 80% { fill:#6F3C4C; } 84% { fill:#543A52; } 88% { fill:#353758; } 92% { fill:#2A3351; } 96% { fill:#1E2E4A; } 100% { fill:#0F2944; } } /* Land - layer 4 animation */ #landscape .layer4 { fill:#BCBEC0; animation-name: layer4; animation-delay:1s; } @keyframes layer4{ 0% { fill:#0F2841; } 4% { fill:#1A2945; } 8% { fill:#232A48; } 12% { fill:#2B2A4B; } 16% { fill:#59335F; } 20% { fill:#7C336D; } 24% { fill:#B84089; } 28% { fill:#9683A5; } 32% { fill:#57B5C1; } 36% { fill:#4798BD; } 40% { fill:#4391BC; } 44% { fill:#408BBB; } 48% { fill:#3D85BA; } 52% { fill:#397FBA; } 56% { fill:#3E7DAC; } 60% { fill:#407AA1; } 64% { fill:#427896; } 68% { fill:#44768B; } 72% { fill:#705B66; } 76% { fill:#823B46; } 80% { fill:#69394B; } 84% { fill:#503650; } 88% { fill:#323454; } 92% { fill:#27304D; } 96% { fill:#1C2C47; } 100% { fill:#0F2841; } } /* Land - layer 5 animation */ #landscape .layer5 { fill:#A7A9AC; animation-name: layer5; animation-delay:1s; } @keyframes layer5{ 0% { fill:#0E263F; } 4% { fill:#192742; } 8% { fill:#212745; } 12% { fill:#292848; } 16% { fill:#51305B; } 20% { fill:#6E3068; } 24% { fill:#A23B82; } 28% { fill:#84799F; } 32% { fill:#44AABC; } 36% { fill:#3A8DB3; } 40% { fill:#3887B1; } 44% { fill:#3680AF; } 48% { fill:#347AAD; } 52% { fill:#3273AB; } 56% { fill:#3672A1; } 60% { fill:#387198; } 64% { fill:#396F90; } 68% { fill:#3A6E87; } 72% { fill:#695565; } 76% { fill:#7C3747; } 80% { fill:#64354A; } 84% { fill:#4B334D; } 88% { fill:#2E314F; } 92% { fill:#252D4A; } 96% { fill:#1B2A44; } 100% { fill:#0E263F; } } /* Land - layer 6 animation */ #landscape .layer6 { fill:#939598; animation-name: layer6; animation-delay:1s; } @keyframes layer6{ 0% { fill:#0E243C; } 4% { fill:#18253F; } 8% { fill:#202542; } 12% { fill:#262544; } 16% { fill:#482C56; } 20% { fill:#612D63; } 24% { fill:#8D357C; } 28% { fill:#6F719B; } 32% { fill:#00A1BC; } 36% { fill:#2583A8; } 40% { fill:#287CA3; } 44% { fill:#2A759F; } 48% { fill:#2D6F9A; } 52% { fill:#2E6895; } 56% { fill:#2F6891; } 60% { fill:#30678D; } 64% { fill:#306788; } 68% { fill:#306683; } 72% { fill:#625064; } 76% { fill:#753347; } 80% { fill:#5E3249; } 84% { fill:#47304A; } 88% { fill:#2B2E4B; } 92% { fill:#222A46; } 96% { fill:#192741; } 100% { fill:#0E243C; } } /* Land - layer 7 animation */ #landscape .layer7 { fill:#808285; animation-name: layer7; animation-delay:1s; } @keyframes layer7{ 0% { fill:#102237; } 4% { fill:#18223A; } 8% { fill:#1E233D; } 12% { fill:#242340; } 16% { fill:#402952; } 20% { fill:#542A5E; } 24% { fill:#793177; } 28% { fill:#5F668F; } 32% { fill:#0A8FA7; } 36% { fill:#237595; } 40% { fill:#256F90; } 44% { fill:#27698C; } 48% { fill:#286387; } 52% { fill:#285D82; } 56% { fill:#285E82; } 60% { fill:#285F81; } 64% { fill:#275F81; } 68% { fill:#255F7F; } 72% { fill:#574A63; } 76% { fill:#683148; } 80% { fill:#542F48; } 84% { fill:#3F2D47; } 88% { fill:#242742; } 92% { fill:#202841; } 96% { fill:#19253C; } 100% { fill:#102237; } } /* Land - layer 8 animation */ #landscape .layer8 { fill:#6D6E71; animation-name: layer8; animation-delay:1s; } @keyframes layer8{ 0% { fill:#111F31; } 4% { fill:#172034; } 8% { fill:#1C2037; } 12% { fill:#20213B; } 16% { fill:#37274C; } 20% { fill:#472759; } 24% { fill:#662C71; } 28% { fill:#4F5C83; } 32% { fill:#118095; } 36% { fill:#206983; } 40% { fill:#21637E; } 44% { fill:#225D7A; } 48% { fill:#225775; } 52% { fill:#225270; } 56% { fill:#235372; } 60% { fill:#235574; } 64% { fill:#235675; } 68% { fill:#235676; } 72% { fill:#4C445F; } 76% { fill:#5B2F49; } 80% { fill:#4A2C47; } 84% { fill:#382A44; } 88% { fill:#242742; } 92% { fill:#1E253D; } 96% { fill:#182338; } 100% { fill:#111F31; } } /* Land - layer 9 animation */ #landscape .layer9 { fill:#58595B; animation-name: layer9; animation-delay:1s; } @keyframes layer9{ 0% { fill:#111C2B; } 4% { fill:#151D2E; } 8% { fill:#191E32; } 12% { fill:#1D1E35; } 16% { fill:#2F2447; } 20% { fill:#3A2454; } 24% { fill:#52296C; } 28% { fill:#405279; } 32% { fill:#137185; } 36% { fill:#1C5C72; } 40% { fill:#1C576E; } 44% { fill:#1C5269; } 48% { fill:#1B4C64; } 52% { fill:#1A475F; } 56% { fill:#1C4A63; } 60% { fill:#1E4B67; } 64% { fill:#1F4D6A; } 68% { fill:#204E6D; } 72% { fill:#413E5A; } 76% { fill:#4E2D49; } 80% { fill:#402A45; } 84% { fill:#312742; } 88% { fill:#20243E; } 92% { fill:#1B2238; } 96% { fill:#171F32; } 100% { fill:#111C2B; } } /* Land - layer 10 animation */ #landscape .layer10 { fill:#414042; animation-name: layer10; animation-delay:1s; } @keyframes layer10{ 0% { fill:#101825; } 4% { fill:#131928; } 8% { fill:#161A2C; } 12% { fill:#181B2F; } 16% { fill:#262141; } 20% { fill:#2C214F; } 24% { fill:#3D2567; } 28% { fill:#30486F; } 32% { fill:#136476; } 36% { fill:#165163; } 40% { fill:#154C5E; } 44% { fill:#144759; } 48% { fill:#134254; } 52% { fill:#113D4F; } 56% { fill:#154055; } 60% { fill:#19425A; } 64% { fill:#1B445F; } 68% { fill:#1E4564; } 72% { fill:#363856; } 76% { fill:#412A49; } 80% { fill:#352744; } 84% { fill:#29243F; } 88% { fill:#1C203A; } 92% { fill:#191F33; } 96% { fill:#151C2C; } 100% { fill:#101825; } } /* Land - layer 11 animation */ #landscape .layer11 { fill:#232323; animation-name: layer11; animation-delay:1s; } @keyframes layer11{ 0% { fill:#0D141E; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 4% { fill:#101522; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} 8% { fill:#121726; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 12% { fill:#141829; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} 16% { fill:#1C1E3C; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 20% { fill:#22214F; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} 24% { fill:#262262; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 28% { fill:#1D4065; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} 32% { fill:#125768; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 36% { fill:#1E4553; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} 40% { fill:#1E404E; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 44% { fill:#1E3B49; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} 48% { fill:#1D3643; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 52% { fill:#1C313E; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} 56% { fill:#1C3344; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 60% { fill:#1C3449; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} 64% { fill:#1B344F; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 68% { fill:#183454; transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);} 72% { fill:#242B4A; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 76% { fill:#2B2241; transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);} 80% { fill:#24203C; transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);} 84% { fill:#1D1D37; } 88% { fill:#151A32; } 92% { fill:#14192C; } 96% { fill:#111725; } 100% { fill:#0D141E; } } /* Aspect ratio media queries ---------------------------------------------- */ /* 3/2 and 6/1 -- out of range*/ @media screen and (min-aspect-ratio: 3/1) and (max-aspect-ratio: 6/1){ body{background: rgb(31, 60, 80);} body:before{content:'放大窗口预览效果';color: white;text-align: center;width: 100%;height: 100%;display: block;position: absolute;top: 50%;} #sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap,.spriteWrap{display: none;} } /* 14/5 and 3/1 */ @media screen and (min-aspect-ratio: 14/5) and (max-aspect-ratio: 7/2){ .twinkles{} #reflection, #sunMask{height: 42%;} #landscape{bottom: -3%;} #bottom{top: 101%;} #stag{bottom: 3%;} .sun{top: -570%;} .twinkles{top: 77%;} } /* 5/2 and 14/5 */ @media screen and (min-aspect-ratio: 5/2) and (max-aspect-ratio: 14/5){ .twinkles{top: 75%;} #reflection, #sunMask{} #landscape{bottom: 1%;} #bottom{top: 98%;} #stag{bottom: 7%;} .sun{top: -532%;} } /* 9/4 and 5/2 */ @media screen and (min-aspect-ratio: 9/4) and (max-aspect-ratio: 5/2){ .twinkles{top: 75%;} #reflection, #sunMask{height: 40%;} #landscape{bottom: 5%;} #bottom{top: 94%;} #stag{bottom: 10%;} .sun{top: -452%;} } /* 11/5 and 9/4 */ @media screen and (min-aspect-ratio: 11/5) and (max-aspect-ratio: 9/4){ .twinkles{} #reflection, #sunMask{} #landscape{bottom: 6%;} #bottom{top: 93%;} #stag{ bottom: 11%;} .sun{top: -410%;} } /* 13/6 and 11/5 */ @media screen and (min-aspect-ratio: 13/6) and (max-aspect-ratio: 11/5){ .twinkles{} #reflection, #sunMask{height: 37%;} #landscape{bottom: 6%;} #bottom{top: 93%;} #stag{bottom: 11%;} .sun{} } /* 15/7 and 13/6 */ @media screen and (min-aspect-ratio: 15/7) and (max-aspect-ratio: 13/6){ .twinkles{} #reflection, #sunMask{height: 31%;} #landscape{bottom: 7%;} #bottom{top: 92%;} #stag{bottom: 12%;} .sun{} } /* 2/1 and 15/7 */ @media screen and (min-aspect-ratio: 2/1) and (max-aspect-ratio: 15/7){ .twinkles{} #reflection, #sunMask{height: 31%;} #landscape{bottom: 8%;} #bottom{top: 91%;} #stag{bottom: 12%;} .sun{top: -370%;} } @media screen and (min-aspect-ratio: 15/8) and (max-aspect-ratio: 2/1){ .twinkles{} #reflection, #sunMask{height: 30%;} #landscape{} #bottom{} #stag{bottom: 15%;} .sun{} } /* 7/4 and 15/8 */ @media screen and (min-aspect-ratio: 7/4) and (max-aspect-ratio: 15/8){ .twinkles{top: 71%;} #reflection, #sunMask{height: 28%;} #landscape{bottom: 13%;} #bottom{top: 86%;} #stag{bottom: 17%;} .sun{top: -300%;} } /* 11/7 and 7/4 */ @media screen and (min-aspect-ratio: 11/7) and (max-aspect-ratio: 7/4){ .twinkles{top: 69%;} #reflection, #sunMask{height: 24%;} #landscape{bottom: 16%;} #bottom{top: 83%;} #stag{bottom: 20%;} .sun{top: -270%;} } /* 13/9 and 11/7 */ @media screen and (min-aspect-ratio: 13/9) and (max-aspect-ratio: 11/7){ .twinkles{top: 68%;} #reflection, #sunMask{height: 22%;} #landscape{bottom: 18%;} #bottom{top: 81%;} #stag{bottom: 21.6%;} .sun{top: -240%;} } /* 4/3 and 13/9 */ @media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 13/9){ .twinkles{top: 66%;} #reflection, #sunMask{height: 19%;} #landscape{bottom: 22%;} #bottom{top: 77%;} #stag{bottom: 25%;} .sun{top: -230%;} } /* 8/7 and 4/3 */ @media screen and (min-aspect-ratio: 8/7) and (max-aspect-ratio: 4/3){ .twinkles{top: 65%;} #reflection, #sunMask{height: 18%;} #landscape{bottom: 23%;} #bottom{top: 76%;} #stag{bottom: 25.3%;} .sun{top: -180%;} } /* 14/15 and 8/7 */ @media screen and (min-aspect-ratio: 14/15) and (max-aspect-ratio: 8/7){ .twinkles{top: 63%;width: 3%;} #reflection, #sunMask{height: 17%;} #landscape{bottom: 26%;} #bottom{top: 73.8%;} #stag{bottom: 28.3%;} .sun{top: -140%;} } /* 5/6 and 14/15 */ @media screen and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 14/15){ .twinkles{top: 63%; width: 3%;} #reflection, #sunMask{height: 13%;} #landscape{bottom: 28%;} #bottom{top: 71.5%;} #stag{bottom: 30%;} .sun{top: -110%;} } /* 7/10 and 5/6 */ @media screen and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 5/6){ .twinkles{top: 62%; width: 3%;} #reflection, #sunMask{height: 11%;} #landscape{bottom: 30%;} #bottom{top: 69.6%;} #stag{bottom: 31.8%;} .sun{top: -70%;} } /* 5/9 and 7/10 */ @media screen and (min-aspect-ratio: 5/9) and (max-aspect-ratio: 7/10){ .twinkles{top: 62%; width: 3%;} #reflection, #sunMask{height: 8%;} #landscape{bottom: 32%;} #bottom{top: 67.5%;} #stag{bottom: 33.5%;} .sun{top: -55%;} } /* 1/10 and 5/9 --- out of range*/ @media screen and (min-aspect-ratio: 1/10) and (max-aspect-ratio: 5/9){ body{background: rgb(31, 60, 80);} body:before{content:'放大窗口预览效果';color: white;text-align: center;width: 100%;height: 100%;display: block;position: absolute;top: 50%;} #sky, #reflection, #sunMask, #landscape, #bottom, #stag, .controls, .stars, .sunMask, .clouds, .lighting, .vignette, .twinkleWrap,.spriteWrap{display: none;} } </style> </head> <body > <!-- Stars --> <div class="stars"> <div class="starWrap starProject"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 599.456 593.71" enable-background="new 0 0 599.456 593.71" xml:space="preserve" id="stars"> <circle fill="#FFFFFF" cx="287.793" cy="0.398" r="0.398"/> <circle fill="#FFFFFF" cx="300.965" cy="15.945" r="0.398"/> <circle fill="#FFFFFF" cx="306.237" cy="22.961" r="0.398"/> <circle fill="#FFFFFF" cx="282.496" cy="16.214" r="0.398"/> <circle fill="#FFFFFF" cx="257.775" cy="32.352" r="0.398"/> <circle fill="#FFFFFF" cx="287.624" cy="62.283" r="0.398"/> <circle fill="#FFFFFF" cx="240.963" cy="68.985" r="0.398"/> <circle fill="#FFFFFF" cx="183.157" cy="79.314" r="0.398"/> <circle fill="#FFFFFF" cx="146.147" cy="75.118" r="0.398"/> <circle fill="#FFFFFF" cx="104.511" cy="75.817" r="0.398"/> <circle fill="#FFFFFF" cx="256.101" cy="75.548" r="0.398"/> <circle fill="#FFFFFF" cx="238.941" cy="85.554" r="0.398"/> <circle fill="#FFFFFF" cx="199.887" cy="82.994" r="0.398"/> <circle fill="#FFFFFF" cx="176.917" cy="65.08" r="0.878"/> <circle fill="#FFFFFF" cx="198.757" cy="44.455" r="0.398"/> <circle fill="#FFFFFF" cx="133.344" cy="62.638" r="0.398"/> <circle fill="#FFFFFF" cx="161.909" cy="57.85" r="0.398"/> <circle fill="#FFFFFF" cx="157.283" cy="29.393" r="0.398"/> <circle fill="#FFFFFF" cx="173.604" cy="58.872" r="0.398"/> <circle fill="#FFFFFF" cx="251.83" cy="18.15" r="0.398"/> <circle fill="#FFFFFF" cx="233.537" cy="26.273" r="0.398"/> <circle fill="#FFFFFF" cx="264.063" cy="103.144" r="0.398"/> <circle fill="#FFFFFF" cx="265.408" cy="108.308" r="0.398"/> <circle fill="#FFFFFF" cx="269.012" cy="124.984" r="0.398"/> <circle fill="#FFFFFF" cx="290.991" cy="154.549" r="0.398"/> <circle fill="#FFFFFF" cx="255.079" cy="145.534" r="0.398"/> <circle fill="#FFFFFF" cx="245.988" cy="116.754" r="0.398"/> <circle fill="#FFFFFF" cx="231.55" cy="113.419" r="0.398"/> <circle fill="#FFFFFF" cx="224.202" cy="123.209" r="0.398"/> <circle fill="#FFFFFF" cx="229.581" cy="131.709" r="0.398"/> <circle fill="#FFFFFF" cx="238.134" cy="141.607" r="0.398"/> <circle fill="#FFFFFF" cx="230.872" cy="153.925" r="0.398"/> <circle fill="#FFFFFF" cx="180.414" cy="170.709" r="0.398"/> <circle fill="#FFFFFF" cx="256.317" cy="191.334" r="0.398"/> <circle fill="#FFFFFF" cx="235.714" cy="193.948" r="0.398"/> <circle fill="#FFFFFF" cx="224.094" cy="193.948" r="0.398"/> <circle fill="#FFFFFF" cx="244.321" cy="208.795" r="0.398"/> <circle fill="#FFFFFF" cx="266.936" cy="221.759" r="0.398"/> <circle fill="#FFFFFF" cx="291.444" cy="227.999" r="0.398"/> <circle fill="#FFFFFF" cx="259.652" cy="242.362" r="0.398"/> <circle fill="#FFFFFF" cx="247.979" cy="240.103" r="0.398"/> <circle fill="#FFFFFF" cx="239.802" cy="230.958" r="0.398"/> <circle fill="#FFFFFF" cx="245.127" cy="225.009" r="0.398"/> <circle fill="#FFFFFF" cx="233.669" cy="241.071" r="0.398"/> <circle fill="#FFFFFF" cx="221.566" cy="236.983" r="0.398"/> <circle fill="#FFFFFF" cx="189.881" cy="228.613" r="0.398"/> <circle fill="#FFFFFF" cx="171.452" cy="204.922" r="0.398"/> <circle fill="#FFFFFF" cx="199.403" cy="193.41" r="0.398"/> <circle fill="#FFFFFF" cx="130.515" cy="219.123" r="0.398"/> <circle fill="#FFFFFF" cx="112.849" cy="204.523" r="0.878"/> <circle fill="#FFFFFF" cx="101.176" cy="199.865" r="0.398"/> <circle fill="#FFFFFF" cx="105.372" cy="210.678" r="0.398"/> <circle fill="#FFFFFF" cx="104.318" cy="220.522" r="0.398"/> <circle fill="#FFFFFF" cx="74.656" cy="232.572" r="0.398"/> <circle fill="#FFFFFF" cx="107.846" cy="235.638" r="0.398"/> <circle fill="#FFFFFF" cx="84.338" cy="218.294" r="0.398"/> <circle fill="#FFFFFF" cx="66.264" cy="214.551" r="0.398"/> <circle fill="#FFFFFF" cx="10.964" cy="203.577" r="0.398"/> <circle fill="#FFFFFF" cx="46.005" cy="194.593" r="0.398"/> <circle fill="#FFFFFF" cx="40.389" cy="177.702" r="0.878"/> <circle fill="#FFFFFF" cx="74.225" cy="144.296" r="0.398"/> <circle fill="#FFFFFF" cx="125.19" cy="146.018" r="0.398"/> <circle fill="#FFFFFF" cx="145.556" cy="159.896" r="0.398"/> <circle fill="#FFFFFF" cx="183.857" cy="160.295" r="0.398"/> <circle fill="#FFFFFF" cx="185.255" cy="181.844" r="0.398"/> <circle fill="#FFFFFF" cx="117.475" cy="137.734" r="0.398"/> <circle fill="#FFFFFF" cx="163.523" cy="116.862" r="0.398"/> <circle fill="#FFFFFF" cx="164.814" cy="129.449" r="0.398"/> <circle fill="#FFFFFF" cx="186.062" cy="113.871" r="0.398"/> <circle fill="#FFFFFF" cx="202.093" cy="94.914" r="0.398"/> <circle fill="#FFFFFF" cx="89.395" cy="106.587" r="0.398"/> <circle fill="#FFFFFF" cx="89.686" cy="109.815" r="0.398"/> <circle fill="#FFFFFF" cx="79.013" cy="106.587" r="0.398"/> <circle fill="#FFFFFF" cx="56.742" cy="196.853" r="0.398"/> <circle fill="#FFFFFF" cx="45.715" cy="147.201" r="0.398"/> <circle fill="#FFFFFF" cx="75.022" cy="110.675" r="0.398"/> <circle fill="#FFFFFF" cx="80.067" cy="116.862" r="0.398"/> <circle fill="#FFFFFF" cx="112.203" cy="112.472" r="0.398"/> <circle fill="#FFFFFF" cx="115.7" cy="254.197" r="0.398"/> <circle fill="#FFFFFF" cx="96.227" cy="283.568" r="0.398"/> <circle fill="#FFFFFF" cx="72.611" cy="282.492" r="0.398"/> <circle fill="#FFFFFF" cx="50.986" cy="284.267" r="0.398"/> <circle fill="#FFFFFF" cx="46.253" cy="288.947" r="0.398"/> <circle fill="#FFFFFF" cx="21.723" cy="303.418" r="0.878"/> <circle fill="#FFFFFF" cx="18.71" cy="333.488" r="0.398"/> <circle fill="#FFFFFF" cx="54.913" cy="351.993" r="0.398"/> <circle fill="#FFFFFF" cx="6.876" cy="342.902" r="0.398"/> <circle fill="#FFFFFF" cx="12.632" cy="356.781" r="0.398"/> <circle fill="#FFFFFF" cx="10.318" cy="339.513" r="0.398"/> <circle fill="#FFFFFF" cx="0.398" cy="348.26" r="0.398"/> <circle fill="#FFFFFF" cx="11.771" cy="323.989" r="0.398"/> <circle fill="#FFFFFF" cx="31.965" cy="326.549" r="0.398"/> <circle fill="#FFFFFF" cx="64.65" cy="303.095" r="0.398"/> <circle fill="#FFFFFF" cx="64.22" cy="293.358" r="0.398"/> <circle fill="#FFFFFF" cx="74.709" cy="293.358" r="0.398"/> <circle fill="#FFFFFF" cx="84.199" cy="299.276" r="0.398"/> <circle fill="#FFFFFF" cx="89.556" cy="303.418" r="0.398"/> <circle fill="#FFFFFF" cx="106.286" cy="320.47" r="0.398"/> <circle fill="#FFFFFF" cx="127.987" cy="303.019" r="0.398"/> <circle fill="#FFFFFF" cx="128.611" cy="305.753" r="0.398"/> <circle fill="#FFFFFF" cx="151.311" cy="297.285" r="0.398"/> <circle fill="#FFFFFF" cx="179.445" cy="297.684" r="0.398"/> <circle fill="#FFFFFF" cx="184.233" cy="299.814" r="0.398"/> <circle fill="#FFFFFF" cx="203.384" cy="321.708" r="0.398"/> <circle fill="#FFFFFF" cx="296.393" cy="309.335" r="0.398"/> <circle fill="#FFFFFF" cx="260.997" cy="332.574" r="0.398"/> <circle fill="#FFFFFF" cx="246.849" cy="331.014" r="0.398"/> <circle fill="#FFFFFF" cx="269.604" cy="348.228" r="0.398"/> <circle fill="#FFFFFF" cx="267.344" cy="352.8" r="0.398"/> <circle fill="#FFFFFF" cx="253.842" cy="358.018" r="0.398"/> <circle fill="#FFFFFF" cx="237.166" cy="350.057" r="0.398"/> <circle fill="#FFFFFF" cx="230.496" cy="341.773" r="0.398"/> <circle fill="#FFFFFF" cx="221.942" cy="343.655" r="0.398"/> <circle fill="#FFFFFF" cx="219.898" cy="359.471" r="0.398"/> <circle fill="#FFFFFF" cx="216.724" cy="361.246" r="0.398"/> <circle fill="#FFFFFF" cx="221.996" cy="382.01" r="0.398"/> <circle fill="#FFFFFF" cx="179.069" cy="354.791" r="0.398"/> <circle fill="#FFFFFF" cx="182.189" cy="361.246" r="0.398"/> <circle fill="#FFFFFF" cx="174.227" cy="359.525" r="0.398"/> <circle fill="#FFFFFF" cx="166.589" cy="358.449" r="0.398"/> <circle fill="#FFFFFF" cx="173.829" cy="364.043" r="0.398"/> <circle fill="#FFFFFF" cx="146.309" cy="355.759" r="0.398"/> <circle fill="#FFFFFF" cx="150.236" cy="371.305" r="0.398"/> <circle fill="#FFFFFF" cx="141.951" cy="389.649" r="0.398"/> <circle fill="#FFFFFF" cx="138.347" cy="406.11" r="0.398"/> <circle fill="#FFFFFF" cx="156.669" cy="419.182" r="0.398"/> <circle fill="#FFFFFF" cx="173.851" cy="411.543" r="0.398"/> <circle fill="#FFFFFF" cx="175.25" cy="416.653" r="0.398"/> <circle fill="#FFFFFF" cx="180.629" cy="417.675" r="0.398"/> <circle fill="#FFFFFF" cx="166.589" cy="386.045" r="0.398"/> <circle fill="#FFFFFF" cx="185.847" cy="379.751" r="0.398"/> <circle fill="#FFFFFF" cx="187.299" cy="383.754" r="0.398"/> <circle fill="#FFFFFF" cx="192.141" cy="380.719" r="0.398"/> <circle fill="#FFFFFF" cx="190.85" cy="382.732" r="0.398"/> <circle fill="#FFFFFF" cx="199.887" cy="390.047" r="0.398"/> <circle fill="#FFFFFF" cx="213.152" cy="388.466" r="0.398"/> <circle fill="#FFFFFF" cx="209.624" cy="400.515" r="0.398"/> <circle fill="#FFFFFF" cx="220.544" cy="404.904" r="0.398"/> <circle fill="#FFFFFF" cx="242.223" cy="416.761" r="0.398"/> <circle fill="#FFFFFF" cx="242.223" cy="424.292" r="0.398"/> <circle fill="#FFFFFF" cx="257.123" cy="435.051" r="0.398"/> <circle fill="#FFFFFF" cx="272.939" cy="435.449" r="0.398"/> <circle fill="#FFFFFF" cx="264.493" cy="458.612" r="0.398"/> <circle fill="#FFFFFF" cx="257.554" cy="465.821" r="0.398"/> <circle fill="#FFFFFF" cx="287.355" cy="470.07" r="0.398"/> <circle fill="#FFFFFF" cx="269.711" cy="484.81" r="0.398"/> <circle fill="#FFFFFF" cx="265.708" cy="499.334" r="0.398"/> <circle fill="#FFFFFF" cx="254.757" cy="514.303" r="0.398"/> <circle fill="#FFFFFF" cx="285.257" cy="532.762" r="0.398"/> <circle fill="#FFFFFF" cx="301.525" cy="577.313" r="0.398"/> <circle fill="#FFFFFF" cx="241.577" cy="569.104" r="0.398"/> <circle fill="#FFFFFF" cx="225.116" cy="563.886" r="0.398"/> <circle fill="#FFFFFF" cx="302.31" cy="515.956" r="0.398"/> <circle fill="#FFFFFF" cx="244.643" cy="515.149" r="0.398"/> <circle fill="#FFFFFF" cx="230.388" cy="506.758" r="0.398"/> <circle fill="#FFFFFF" cx="228.236" cy="496.483" r="0.398"/> <circle fill="#FFFFFF" cx="237.973" cy="489.813" r="0.398"/> <circle fill="#FFFFFF" cx="228.774" cy="519.015" r="0.398"/> <circle fill="#FFFFFF" cx="266.107" cy="493.955" r="0.398"/> <circle fill="#FFFFFF" cx="285.957" cy="476.31" r="0.398"/> <circle fill="#FFFFFF" cx="275.79" cy="428.671" r="0.398"/> <circle fill="#FFFFFF" cx="280.233" cy="417.277" r="0.398"/> <circle fill="#FFFFFF" cx="283.644" cy="415.846" r="0.398"/> <circle fill="#FFFFFF" cx="302.74" cy="406.917" r="0.398"/> <circle fill="#FFFFFF" cx="300.589" cy="412.834" r="0.398"/> <circle fill="#FFFFFF" cx="300.987" cy="427.681" r="0.398"/> <circle fill="#FFFFFF" cx="264.17" cy="409.391" r="0.398"/> <circle fill="#FFFFFF" cx="276.973" cy="403.474" r="0.398"/> <circle fill="#FFFFFF" cx="274.306" cy="397.579" r="0.398"/> <circle fill="#FFFFFF" cx="258.522" cy="392.5" r="0.398"/> <circle fill="#FFFFFF" cx="277.372" cy="392.124" r="0.398"/> <circle fill="#FFFFFF" cx="286.925" cy="387.712" r="0.398"/> <circle fill="#FFFFFF" cx="187.698" cy="400.515" r="0.398"/> <circle fill="#FFFFFF" cx="223.556" cy="320.04" r="0.398"/> <circle fill="#FFFFFF" cx="182.189" cy="330.476" r="0.398"/> <circle fill="#FFFFFF" cx="111.988" cy="332.036" r="0.398"/> <circle fill="#FFFFFF" cx="134.313" cy="327.195" r="0.398"/> <circle fill="#FFFFFF" cx="129.633" cy="332.435" r="0.398"/> <circle fill="#FFFFFF" cx="139.961" cy="338.437" r="0.398"/> <circle fill="#FFFFFF" cx="149.213" cy="336.447" r="0.398"/> <circle fill="#FFFFFF" cx="153.947" cy="325.742" r="0.878"/> <circle fill="#FFFFFF" cx="52.869" cy="317.458" r="0.398"/> <circle fill="#FFFFFF" cx="29.039" cy="294.596" r="0.398"/> <circle fill="#FFFFFF" cx="39.206" cy="309.626" r="0.398"/> <circle fill="#FFFFFF" cx="60.831" cy="326.549" r="0.398"/> <circle fill="#FFFFFF" cx="55.559" cy="357.588" r="0.398"/> <circle fill="#FFFFFF" cx="51.502" cy="368.132" r="0.398"/> <circle fill="#FFFFFF" cx="76.216" cy="354.091" r="0.398"/> <circle fill="#FFFFFF" cx="41.465" cy="372.865" r="0.398"/> <circle fill="#FFFFFF" cx="39.029" cy="378.998" r="0.398"/> <circle fill="#FFFFFF" cx="28.339" cy="381.827" r="0.398"/> <circle fill="#FFFFFF" cx="17.312" cy="381.03" r="0.398"/> <circle fill="#FFFFFF" cx="13.438" cy="376.147" r="0.398"/> <circle fill="#FFFFFF" cx="55.16" cy="388.896" r="0.398"/> <circle fill="#FFFFFF" cx="65.479" cy="383.678" r="0.398"/> <circle fill="#FFFFFF" cx="68.631" cy="386.583" r="0.878"/> <circle fill="#FFFFFF" cx="64.112" cy="390.51" r="0.398"/> <circle fill="#FFFFFF" cx="99.185" cy="407.885" r="0.398"/> <circle fill="#FFFFFF" cx="112.526" cy="417.675" r="0.398"/> <circle fill="#FFFFFF" cx="116.722" cy="420.15" r="0.398"/> <circle fill="#FFFFFF" cx="113.817" cy="420.096" r="0.398"/> <circle fill="#FFFFFF" cx="115.431" cy="421.28" r="0.398"/> <circle fill="#FFFFFF" cx="115.431" cy="419.827" r="0.398"/> <circle fill="#FFFFFF" cx="72.99" cy="427.412" r="0.398"/> <circle fill="#FFFFFF" cx="54.375" cy="418.074" r="0.398"/> <circle fill="#FFFFFF" cx="52.815" cy="435.589" r="0.398"/> <circle fill="#FFFFFF" cx="93.268" cy="454.847" r="0.398"/> <circle fill="#FFFFFF" cx="87.405" cy="464.96" r="0.398"/> <circle fill="#FFFFFF" cx="87.243" cy="468.51" r="0.398"/> <circle fill="#FFFFFF" cx="55.828" cy="473.567" r="0.398"/> <circle fill="#FFFFFF" cx="107.276" cy="491.05" r="0.398"/> <circle fill="#FFFFFF" cx="122.586" cy="500.141" r="0.398"/> <circle fill="#FFFFFF" cx="108.976" cy="518.323" r="0.398"/> <circle fill="#FFFFFF" cx="106.932" cy="528.759" r="0.398"/> <circle fill="#FFFFFF" cx="134.366" cy="516.925" r="0.398"/> <circle fill="#FFFFFF" cx="150.02" cy="526.285" r="0.398"/> <circle fill="#FFFFFF" cx="124.038" cy="456.245" r="0.398"/> <circle fill="#FFFFFF" cx="136.841" cy="461.786" r="0.398"/> <circle fill="#FFFFFF" cx="157.067" cy="453.448" r="0.398"/> <circle fill="#FFFFFF" cx="162.608" cy="449.844" r="0.398"/> <circle fill="#FFFFFF" cx="193.324" cy="454.245" r="0.398"/> <circle fill="#FFFFFF" cx="206.45" cy="446.401" r="0.398"/> <circle fill="#FFFFFF" cx="229.151" cy="448.392" r="0.398"/> <circle fill="#FFFFFF" cx="232.809" cy="446.939" r="0.398"/> <circle fill="#FFFFFF" cx="203.2" cy="477.408" r="0.398"/> <circle fill="#FFFFFF" cx="189.992" cy="492.449" r="0.398"/> <circle fill="#FFFFFF" cx="186.654" cy="507.156" r="0.398"/> <circle fill="#FFFFFF" cx="202.254" cy="529.614" r="0.398"/> <circle fill="#FFFFFF" cx="179.177" cy="541.912" r="0.398"/> <circle fill="#FFFFFF" cx="178.208" cy="554.688" r="0.398"/> <circle fill="#FFFFFF" cx="160.757" cy="554.688" r="0.398"/> <circle fill="#FFFFFF" cx="150.989" cy="550.836" r="0.398"/> <circle fill="#FFFFFF" cx="187.622" cy="507.694" r="0.398"/> <circle fill="#FFFFFF" cx="173.389" cy="433.276" r="0.398"/> <circle fill="#FFFFFF" cx="181.974" cy="425.745" r="0.398"/> <circle fill="#FFFFFF" cx="142.328" cy="429.402" r="0.398"/> <circle fill="#FFFFFF" cx="162.608" cy="456.407" r="0.398"/> <circle fill="#FFFFFF" cx="69.814" cy="392.177" r="0.398"/> <circle fill="#FFFFFF" cx="77.076" cy="394.544" r="0.398"/> <circle fill="#FFFFFF" cx="75.624" cy="396.427" r="0.398"/> <circle fill="#FFFFFF" cx="77.076" cy="398.041" r="0.398"/> <circle fill="#FFFFFF" cx="79.712" cy="390.295" r="0.398"/> <circle fill="#FFFFFF" cx="90.686" cy="389.057" r="0.398"/> <circle fill="#FFFFFF" cx="92.085" cy="387.39" r="0.398"/> <circle fill="#FFFFFF" cx="88.911" cy="399.009" r="0.398"/> <circle fill="#FFFFFF" cx="86.705" cy="372.65" r="0.398"/> <circle fill="#FFFFFF" cx="72.592" cy="403.743" r="0.398"/> <circle fill="#FFFFFF" cx="69.76" cy="397.256" r="0.398"/> <circle fill="#FFFFFF" cx="69.76" cy="394.921" r="0.398"/> <circle fill="#FFFFFF" cx="69.029" cy="394.146" r="0.398"/> <circle fill="#FFFFFF" cx="66.748" cy="398.041" r="0.398"/> <circle fill="#FFFFFF" cx="48.781" cy="394.383" r="0.398"/> <circle fill="#FFFFFF" cx="72.558" cy="329.669" r="0.398"/> <circle fill="#FFFFFF" cx="29.039" cy="324.559" r="0.398"/> <circle fill="#FFFFFF" cx="30.007" cy="327.571" r="0.398"/> <circle fill="#FFFFFF" cx="66.318" cy="267.591" r="0.398"/> <circle fill="#FFFFFF" cx="47.651" cy="269.151" r="0.398"/> <circle fill="#FFFFFF" cx="34.095" cy="249.323" r="0.398"/> <circle fill="#FFFFFF" cx="48.404" cy="236.036" r="0.398"/> <circle fill="#FFFFFF" cx="11.847" cy="236.176" r="0.398"/> <circle fill="#FFFFFF" cx="45.607" cy="247.957" r="0.398"/> <circle fill="#FFFFFF" cx="23.52" cy="257.478" r="0.398"/> <circle fill="#FFFFFF" cx="13.654" cy="267.591" r="0.398"/> <circle fill="#FFFFFF" cx="44.24" cy="284.267" r="0.398"/> <circle fill="#FFFFFF" cx="114.248" cy="207.795" r="0.398"/> <circle fill="#FFFFFF" cx="196.767" cy="270.927" r="0.398"/> <circle fill="#FFFFFF" cx="153.087" cy="259.63" r="0.398"/> <circle fill="#FFFFFF" cx="171.452" cy="251.238" r="0.398"/> <circle fill="#FFFFFF" cx="172.022" cy="246.343" r="0.398"/> <circle fill="#FFFFFF" cx="117.776" cy="222.835" r="0.398"/> <circle fill="#FFFFFF" cx="199.026" cy="276.629" r="0.398"/> <circle fill="#FFFFFF" cx="282.944" cy="273.509" r="0.398"/> <circle fill="#FFFFFF" cx="257.608" cy="285.774" r="0.398"/> <circle fill="#FFFFFF" cx="195.508" cy="288.302" r="0.398"/> <circle fill="#FFFFFF" cx="230.496" cy="291.96" r="0.398"/> <circle fill="#FFFFFF" cx="220.221" cy="205.513" r="0.398"/> <circle fill="#FFFFFF" cx="211.991" cy="202.017" r="0.398"/> <circle fill="#FFFFFF" cx="212.744" cy="134.129" r="0.398"/> <circle fill="#FFFFFF" cx="192.517" cy="151.558" r="0.398"/> <circle fill="#FFFFFF" cx="370.09" cy="13.901" r="0.398"/> <circle fill="#FFFFFF" cx="321.999" cy="54.353" r="0.398"/> <circle fill="#FFFFFF" cx="334.479" cy="72.321" r="0.398"/> <circle fill="#FFFFFF" cx="373.533" cy="63.821" r="0.398"/> <circle fill="#FFFFFF" cx="416.137" cy="30.2" r="0.398"/> <circle fill="#FFFFFF" cx="450.673" cy="40.26" r="0.398"/> <circle fill="#FFFFFF" cx="433.351" cy="98.626" r="0.878"/> <circle fill="#FFFFFF" cx="418.181" cy="112.311" r="0.398"/> <circle fill="#FFFFFF" cx="466.381" cy="100.777" r="0.398"/> <circle fill="#FFFFFF" cx="462.723" cy="121.595" r="0.398"/> <circle fill="#FFFFFF" cx="456.59" cy="143.328" r="0.398"/> <circle fill="#FFFFFF" cx="516.086" cy="138.67" r="0.398"/> <circle fill="#FFFFFF" cx="532.87" cy="143.597" r="0.398"/> <circle fill="#FFFFFF" cx="543.79" cy="142.93" r="0.398"/> <circle fill="#FFFFFF" cx="572.569" cy="173.022" r="0.398"/> <circle fill="#FFFFFF" cx="574.291" cy="184.588" r="0.398"/> <circle fill="#FFFFFF" cx="545.995" cy="198.359" r="0.398"/> <circle fill="#FFFFFF" cx="517.646" cy="197.96" r="0.398"/> <circle fill="#FFFFFF" cx="558.314" cy="220.576" r="0.398"/> <circle fill="#FFFFFF" cx="553.472" cy="235.477" r="0.398"/> <circle fill="#FFFFFF" cx="550.245" cy="246.935" r="0.398"/> <circle fill="#FFFFFF" cx="586.502" cy="255.004" r="0.398"/> <circle fill="#FFFFFF" cx="593.71" cy="281.524" r="0.398"/> <circle fill="#FFFFFF" cx="598.39" cy="239.941" r="0.398"/> <circle fill="#FFFFFF" cx="535.021" cy="194.217" r="0.398"/> <circle fill="#FFFFFF" cx="510.061" cy="158.175" r="0.398"/> <circle fill="#FFFFFF" cx="515.44" cy="168.181" r="0.398"/> <circle fill="#FFFFFF" cx="503.584" cy="165.652" r="0.398"/> <circle fill="#FFFFFF" cx="495.429" cy="162.21" r="0.398"/> <circle fill="#FFFFFF" cx="497.258" cy="173.022" r="0.398"/> <circle fill="#FFFFFF" cx="477.623" cy="175.873" r="0.398"/> <circle fill="#FFFFFF" cx="481.981" cy="180.768" r="0.398"/> <circle fill="#FFFFFF" cx="497.688" cy="185.61" r="0.398"/> <circle fill="#FFFFFF" cx="461.969" cy="170.332" r="0.398"/> <circle fill="#FFFFFF" cx="458.634" cy="178.908" r="0.398"/> <circle fill="#FFFFFF" cx="444.271" cy="171.301" r="0.398"/> <circle fill="#FFFFFF" cx="419.128" cy="179.854" r="0.398"/> <circle fill="#FFFFFF" cx="438.408" cy="185.61" r="0.398"/> <circle fill="#FFFFFF" cx="436.364" cy="212.453" r="0.398"/> <circle fill="#FFFFFF" cx="455.353" cy="199.327" r="0.398"/> <circle fill="#FFFFFF" cx="460.033" cy="212.851" r="0.398"/> <circle fill="#FFFFFF" cx="481.582" cy="214.443" r="0.398"/> <circle fill="#FFFFFF" cx="476.494" cy="196.691" r="0.398"/> <circle fill="#FFFFFF" cx="483.433" cy="188.622" r="0.398"/> <circle fill="#FFFFFF" cx="453.363" cy="149.913" r="0.398"/> <circle fill="#FFFFFF" cx="440.237" cy="135.044" r="0.398"/> <circle fill="#FFFFFF" cx="423.937" cy="138.67" r="0.398"/> <circle fill="#FFFFFF" cx="427.111" cy="138.271" r="0.398"/> <circle fill="#FFFFFF" cx="404.249" cy="145.426" r="0.398"/> <circle fill="#FFFFFF" cx="383.216" cy="174.421" r="0.398"/> <circle fill="#FFFFFF" cx="373.102" cy="189.268" r="0.398"/> <circle fill="#FFFFFF" cx="371.004" cy="189.322" r="0.398"/> <circle fill="#FFFFFF" cx="376.222" cy="193.302" r="0.398"/> <circle fill="#FFFFFF" cx="402.797" cy="197.713" r="0.398"/> <circle fill="#FFFFFF" cx="381.419" cy="232.496" r="0.398"/> <circle fill="#FFFFFF" cx="344.699" cy="222.674" r="0.398"/> <circle fill="#FFFFFF" cx="339.966" cy="221.705" r="0.398"/> <circle fill="#FFFFFF" cx="309.949" cy="229.452" r="0.398"/> <circle fill="#FFFFFF" cx="329.099" cy="258.608" r="0.398"/> <circle fill="#FFFFFF" cx="334.263" cy="274.132" r="0.398"/> <circle fill="#FFFFFF" cx="325.71" cy="288.732" r="0.398"/> <circle fill="#FFFFFF" cx="311.687" cy="295.779" r="0.398"/> <circle fill="#FFFFFF" cx="360.138" cy="292.39" r="0.398"/> <circle fill="#FFFFFF" cx="358.255" cy="302.557" r="0.398"/> <circle fill="#FFFFFF" cx="362.882" cy="302.956" r="0.398"/> <circle fill="#FFFFFF" cx="361.483" cy="312.025" r="0.398"/> <circle fill="#FFFFFF" cx="353.253" cy="315.306" r="0.398"/> <circle fill="#FFFFFF" cx="335.232" cy="319.233" r="0.398"/> <circle fill="#FFFFFF" cx="359.654" cy="327.571" r="0.398"/> <circle fill="#FFFFFF" cx="363.28" cy="324.075" r="0.398"/> <circle fill="#FFFFFF" cx="377.482" cy="325.419" r="0.398"/> <circle fill="#FFFFFF" cx="364.334" cy="335.21" r="0.398"/> <circle fill="#FFFFFF" cx="357.825" cy="238.812" r="0.398"/> <circle fill="#FFFFFF" cx="392.414" cy="244.837" r="0.398"/> <circle fill="#FFFFFF" cx="406.347" cy="261.19" r="0.398"/> <circle fill="#FFFFFF" cx="380.849" cy="274.047" r="0.398"/> <circle fill="#FFFFFF" cx="371.435" cy="289.969" r="0.398"/> <circle fill="#FFFFFF" cx="429.478" cy="224.556" r="0.398"/> <circle fill="#FFFFFF" cx="434.75" cy="226.224" r="0.398"/> <circle fill="#FFFFFF" cx="433.674" cy="234.616" r="0.398"/> <circle fill="#FFFFFF" cx="449.543" cy="238.22" r="0.398"/> <circle fill="#FFFFFF" cx="441.635" cy="251.991" r="0.398"/> <circle fill="#FFFFFF" cx="462.83" cy="240.663" r="0.398"/> <circle fill="#FFFFFF" cx="475.31" cy="264.471" r="0.398"/> <circle fill="#FFFFFF" cx="476.494" cy="268.99" r="0.398"/> <circle fill="#FFFFFF" cx="488.974" cy="261.513" r="0.398"/> <circle fill="#FFFFFF" cx="492.847" cy="245.697" r="0.398"/> <circle fill="#FFFFFF" cx="447.983" cy="283.891" r="0.398"/> <circle fill="#FFFFFF" cx="478.269" cy="294.273" r="0.398"/> <circle fill="#FFFFFF" cx="481.55" cy="312.832" r="0.398"/> <circle fill="#FFFFFF" cx="470.953" cy="324.989" r="0.878"/> <circle fill="#FFFFFF" cx="467.08" cy="330.046" r="0.398"/> <circle fill="#FFFFFF" cx="473.804" cy="331.444" r="0.398"/> <circle fill="#FFFFFF" cx="451.103" cy="334.278" r="0.398"/> <circle fill="#FFFFFF" cx="474.396" cy="339.298" r="0.398"/> <circle fill="#FFFFFF" cx="465.681" cy="354.468" r="0.398"/> <circle fill="#FFFFFF" cx="486.93" cy="338.545" r="0.398"/> <circle fill="#FFFFFF" cx="462.992" cy="351.402" r="0.398"/> <circle fill="#FFFFFF" cx="472.89" cy="370.229" r="0.398"/> <circle fill="#FFFFFF" cx="483.541" cy="381.957" r="0.398"/> <circle fill="#FFFFFF" cx="470.953" cy="386.529" r="0.398"/> <circle fill="#FFFFFF" cx="462.238" cy="387.174" r="0.398"/> <circle fill="#FFFFFF" cx="452.394" cy="381.365" r="0.398"/> <circle fill="#FFFFFF" cx="451.996" cy="393.253" r="0.398"/> <circle fill="#FFFFFF" cx="444.863" cy="396.481" r="0.398"/> <circle fill="#FFFFFF" cx="517.377" cy="392.231" r="0.398"/> <circle fill="#FFFFFF" cx="411.888" cy="294.004" r="0.398"/> <circle fill="#FFFFFF" cx="404.948" cy="308.098" r="0.398"/> <circle fill="#FFFFFF" cx="400.914" cy="320.385" r="0.398"/> <circle fill="#FFFFFF" cx="416.944" cy="338.115" r="0.398"/> <circle fill="#FFFFFF" cx="419.526" cy="346.507" r="0.398"/> <circle fill="#FFFFFF" cx="422.7" cy="352.047" r="0.398"/> <circle fill="#FFFFFF" cx="410.973" cy="358.449" r="0.398"/> <circle fill="#FFFFFF" cx="394.405" cy="359.256" r="0.398"/> <circle fill="#FFFFFF" cx="372.672" cy="352.585" r="0.398"/> <circle fill="#FFFFFF" cx="382.409" cy="369.476" r="0.398"/> <circle fill="#FFFFFF" cx="371.489" cy="360.063" r="0.398"/> <circle fill="#FFFFFF" cx="359.224" cy="384.485" r="0.398"/> <circle fill="#FFFFFF" cx="352.231" cy="413.587" r="0.398"/> <circle fill="#FFFFFF" cx="345.883" cy="418.644" r="0.398"/> <circle fill="#FFFFFF" cx="350.832" cy="421.441" r="0.398"/> <circle fill="#FFFFFF" cx="355.512" cy="422.302" r="0.398"/> <circle fill="#FFFFFF" cx="354.866" cy="428.972" r="0.398"/> <circle fill="#FFFFFF" cx="361.537" cy="430.478" r="0.398"/> <circle fill="#FFFFFF" cx="332.703" cy="427.95" r="0.398"/> <circle fill="#FFFFFF" cx="314.898" cy="443.604" r="0.398"/> <circle fill="#FFFFFF" cx="312.961" cy="450.92" r="0.398"/> <circle fill="#FFFFFF" cx="315.167" cy="454.416" r="0.398"/> <circle fill="#FFFFFF" cx="340.902" cy="453.125" r="0.398"/> <circle fill="#FFFFFF" cx="352.629" cy="442.367" r="0.398"/> <circle fill="#FFFFFF" cx="360.407" cy="443.604" r="0.398"/> <circle fill="#FFFFFF" cx="359.6" cy="458.043" r="0.398"/> <circle fill="#FFFFFF" cx="377.621" cy="455.815" r="0.398"/> <circle fill="#FFFFFF" cx="387.089" cy="485.8" r="0.398"/> <circle fill="#FFFFFF" cx="369.197" cy="490.297" r="0.398"/> <circle fill="#FFFFFF" cx="366.992" cy="507.78" r="0.398"/> <circle fill="#FFFFFF" cx="333.995" cy="519.851" r="0.398"/> <circle fill="#FFFFFF" cx="338.406" cy="517.624" r="0.398"/> <circle fill="#FFFFFF" cx="370.843" cy="510.039" r="0.398"/> <circle fill="#FFFFFF" cx="382.839" cy="546.457" r="0.398"/> <circle fill="#FFFFFF" cx="390.047" cy="548.77" r="0.398"/> <circle fill="#FFFFFF" cx="409.467" cy="535.806" r="0.398"/> <circle fill="#FFFFFF" cx="430.554" cy="547.695" r="0.398"/> <circle fill="#FFFFFF" cx="437.278" cy="548.663" r="0.398"/> <circle fill="#FFFFFF" cx="412.856" cy="561.842" r="0.398"/> <circle fill="#FFFFFF" cx="420.118" cy="570.342" r="0.398"/> <circle fill="#FFFFFF" cx="417.375" cy="576.313" r="0.398"/> <circle fill="#FFFFFF" cx="409.068" cy="579.433" r="0.398"/> <circle fill="#FFFFFF" cx="370.445" cy="579.002" r="0.398"/> <circle fill="#FFFFFF" cx="362.613" cy="562.241" r="0.398"/> <circle fill="#FFFFFF" cx="335.178" cy="555.441" r="0.398"/> <circle fill="#FFFFFF" cx="325.065" cy="580.616" r="0.398"/> <circle fill="#FFFFFF" cx="339.535" cy="576.313" r="0.398"/> <circle fill="#FFFFFF" cx="354.597" cy="584.382" r="0.398"/> <circle fill="#FFFFFF" cx="343.247" cy="592.666" r="0.398"/> <circle fill="#FFFFFF" cx="322.827" cy="593.312" r="0.398"/> <circle fill="#FFFFFF" cx="403.442" cy="489.275" r="0.398"/> <circle fill="#FFFFFF" cx="415.707" cy="468.779" r="0.398"/> <circle fill="#FFFFFF" cx="421.248" cy="477.655" r="0.398"/> <circle fill="#FFFFFF" cx="436.633" cy="474.858" r="0.398"/> <circle fill="#FFFFFF" cx="450.942" cy="480.528" r="0.398"/> <circle fill="#FFFFFF" cx="436.955" cy="500.84" r="0.398"/> <circle fill="#FFFFFF" cx="482.035" cy="496.053" r="0.398"/> <circle fill="#FFFFFF" cx="478.699" cy="499.603" r="0.398"/> <circle fill="#FFFFFF" cx="487.898" cy="512.567" r="0.398"/> <circle fill="#FFFFFF" cx="388.81" cy="467.327" r="0.398"/> <circle fill="#FFFFFF" cx="328.4" cy="431.285" r="0.398"/> <circle fill="#FFFFFF" cx="354.221" cy="378.352" r="0.398"/> <circle fill="#FFFFFF" cx="345.883" cy="373.672" r="0.398"/> <circle fill="#FFFFFF" cx="335.77" cy="349.25" r="0.398"/> <circle fill="#FFFFFF" cx="311.186" cy="345.215" r="0.398"/> <circle fill="#FFFFFF" cx="324.473" cy="373.887" r="0.398"/> <circle fill="#FFFFFF" cx="324.075" cy="397.579" r="0.398"/> <circle fill="#FFFFFF" cx="313.929" cy="402.022" r="0.398"/> <circle fill="#FFFFFF" cx="341.396" cy="395.566" r="0.398"/> <circle fill="#FFFFFF" cx="349.142" cy="392.554" r="0.398"/> <circle fill="#FFFFFF" cx="349.433" cy="396.965" r="0.398"/> <circle fill="#FFFFFF" cx="313.445" cy="369.875" r="0.398"/> <circle fill="#FFFFFF" cx="354.866" cy="373.887" r="0.398"/> <circle fill="#FFFFFF" cx="341.795" cy="372.435" r="0.398"/> <circle fill="#FFFFFF" cx="514.149" cy="269.388" r="0.398"/> <circle fill="#FFFFFF" cx="510.115" cy="284.289" r="0.398"/> <circle fill="#FFFFFF" cx="505.22" cy="295.026" r="0.398"/> <circle fill="#FFFFFF" cx="502.1" cy="295.833" r="0.398"/> <circle fill="#FFFFFF" cx="506.833" cy="303.902" r="0.398"/> <circle fill="#FFFFFF" cx="533.623" cy="305.946" r="0.398"/> <circle fill="#FFFFFF" cx="547.448" cy="297.178" r="0.398"/> <circle fill="#FFFFFF" cx="571.386" cy="305.677" r="0.398"/> <circle fill="#FFFFFF" cx="573.721" cy="305.785" r="0.398"/> <circle fill="#FFFFFF" cx="589.213" cy="297.339" r="0.398"/> <circle fill="#FFFFFF" cx="593.312" cy="297.738" r="0.398"/> <circle fill="#FFFFFF" cx="599.058" cy="299.383" r="0.398"/> <circle fill="#FFFFFF" cx="590.751" cy="323.644" r="0.398"/> <circle fill="#FFFFFF" cx="594.947" cy="304.117" r="0.398"/> <circle fill="#FFFFFF" cx="529.319" cy="320.901" r="0.398"/> <circle fill="#FFFFFF" cx="509.738" cy="339.944" r="0.398"/> <circle fill="#FFFFFF" cx="530.018" cy="343.44" r="0.398"/> <circle fill="#FFFFFF" cx="537.603" cy="346.56" r="0.398"/> <circle fill="#FFFFFF" cx="521.035" cy="350.864" r="0.398"/> <circle fill="#FFFFFF" cx="500.884" cy="373.242" r="0.398"/> <circle fill="#FFFFFF" cx="490.48" cy="370.229" r="0.398"/> <circle fill="#FFFFFF" cx="544.489" cy="362.214" r="0.398"/> <circle fill="#FFFFFF" cx="519.152" cy="372.704" r="0.398"/> <circle fill="#FFFFFF" cx="504.359" cy="380.343" r="0.398"/> <circle fill="#FFFFFF" cx="520.389" cy="399.87" r="0.398"/> <circle fill="#FFFFFF" cx="521.573" cy="401.645" r="0.398"/> <circle fill="#FFFFFF" cx="501.508" cy="403.044" r="0.398"/> <circle fill="#FFFFFF" cx="496.021" cy="402.775" r="0.398"/> <circle fill="#FFFFFF" cx="481.658" cy="403.044" r="0.398"/> <circle fill="#FFFFFF" cx="474.342" cy="414.34" r="0.398"/> <circle fill="#FFFFFF" cx="458.15" cy="411.704" r="0.398"/> <circle fill="#FFFFFF" cx="460.356" cy="419.289" r="0.398"/> <circle fill="#FFFFFF" cx="444.863" cy="412.135" r="0.398"/> <circle fill="#FFFFFF" cx="434.804" cy="417.837" r="0.398"/> <circle fill="#FFFFFF" cx="411.296" cy="426.874" r="0.398"/> <circle fill="#FFFFFF" cx="407.692" cy="409.553" r="0.398"/> <circle fill="#FFFFFF" cx="412.264" cy="403.044" r="0.398"/> <circle fill="#FFFFFF" cx="415.137" cy="395.244" r="0.878"/> <circle fill="#FFFFFF" cx="410.22" cy="396.804" r="0.398"/> <circle fill="#FFFFFF" cx="401.721" cy="398.525" r="0.398"/> <circle fill="#FFFFFF" cx="398.385" cy="401.161" r="0.398"/> <circle fill="#FFFFFF" cx="389.294" cy="417.622" r="0.398"/> <circle fill="#FFFFFF" cx="375.523" cy="412.135" r="0.398"/> <circle fill="#FFFFFF" cx="374.393" cy="405.195" r="0.398"/> <circle fill="#FFFFFF" cx="375.922" cy="449.145" r="0.398"/> <circle fill="#FFFFFF" cx="409.822" cy="381.365" r="0.398"/> <circle fill="#FFFFFF" cx="418.688" cy="376.685" r="0.398"/> <circle fill="#FFFFFF" cx="422.108" cy="378.03" r="0.398"/> <circle fill="#FFFFFF" cx="421.033" cy="438.31" r="0.398"/> <circle fill="#FFFFFF" cx="416.084" cy="429.026" r="0.398"/> <circle fill="#FFFFFF" cx="418.289" cy="412.35" r="0.398"/> <circle fill="#FFFFFF" cx="450.242" cy="429.671" r="0.398"/> <circle fill="#FFFFFF" cx="455.46" cy="442.442" r="0.398"/> <circle fill="#FFFFFF" cx="479.076" cy="445.218" r="0.398"/> <circle fill="#FFFFFF" cx="492.04" cy="457.214" r="0.398"/> <circle fill="#FFFFFF" cx="486.553" cy="462.808" r="0.398"/> <circle fill="#FFFFFF" cx="491.502" cy="462.539" r="0.398"/> <circle fill="#FFFFFF" cx="496.989" cy="458.666" r="0.398"/> <circle fill="#FFFFFF" cx="498.334" cy="456.138" r="0.398"/> <circle fill="#FFFFFF" cx="508.555" cy="461.84" r="0.398"/> <circle fill="#FFFFFF" cx="480.69" cy="418.106" r="0.398"/> <circle fill="#FFFFFF" cx="515.494" cy="406.11" r="0.398"/> <circle fill="#FFFFFF" cx="542.768" cy="424.96" r="0.878"/> <circle fill="#FFFFFF" cx="547.232" cy="433.007" r="0.398"/> <circle fill="#FFFFFF" cx="564.285" cy="438.278" r="0.398"/> <circle fill="#FFFFFF" cx="555.786" cy="408.315" r="0.398"/> <circle fill="#FFFFFF" cx="541.799" cy="428.596" r="0.398"/> <circle fill="#FFFFFF" cx="580.315" cy="408.315" r="0.398"/> <circle fill="#FFFFFF" cx="507.048" cy="415.362" r="0.398"/> <circle fill="#FFFFFF" cx="580.746" cy="367.325" r="0.398"/> <circle fill="#FFFFFF" cx="350.832" cy="189.268" r="0.398"/> <circle fill="#FFFFFF" cx="342.44" cy="186.471" r="0.398"/> <circle fill="#FFFFFF" cx="343.086" cy="187.008" r="0.398"/> <circle fill="#FFFFFF" cx="329.852" cy="187.546" r="0.398"/> <circle fill="#FFFFFF" cx="460.194" cy="107.286" r="0.398"/> <circle fill="#FFFFFF" cx="462.723" cy="111.913" r="0.398"/> <circle fill="#FFFFFF" cx="496.828" cy="75.14" r="0.398"/> <circle fill="#FFFFFF" cx="461.001" cy="49.835" r="0.398"/> <circle fill="#FFFFFF" cx="511.944" cy="90.341" r="0.398"/> <circle fill="#FFFFFF" cx="415.169" cy="74.741" r="0.398"/> <circle fill="#FFFFFF" cx="410.381" cy="78.561" r="0.398"/> <circle fill="#FFFFFF" cx="360.891" cy="95.506" r="0.398"/> <circle fill="#FFFFFF" cx="365.163" cy="97.657" r="0.398"/> <circle fill="#FFFFFF" cx="324.473" cy="90.18" r="0.398"/> <circle fill="#FFFFFF" cx="355.351" cy="139.67" r="0.398"/> <circle fill="#FFFFFF" cx="355.404" cy="170.279" r="0.398"/> <circle fill="#FFFFFF" cx="374.931" cy="131.924" r="0.398"/> <circle fill="#FFFFFF" cx="324.473" cy="134.667" r="0.398"/> <circle fill="#FFFFFF" cx="321.6" cy="81.573" r="0.398"/> </div> <div class="starWrap starReflect"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 599.456 593.71" enable-background="new 0 0 599.456 593.71" xml:space="preserve" id="starReflection"> <circle fill="#FFFFFF" cx="287.793" cy="593.312" r="0.398"/> <circle fill="#FFFFFF" cx="300.965" cy="577.765" r="0.398"/> <circle fill="#FFFFFF" cx="306.237" cy="570.749" r="0.398"/> <circle fill="#FFFFFF" cx="282.496" cy="577.496" r="0.398"/> <circle fill="#FFFFFF" cx="257.775" cy="561.358" r="0.398"/> <circle fill="#FFFFFF" cx="287.624" cy="531.427" r="0.398"/> <circle fill="#FFFFFF" cx="240.963" cy="524.725" r="0.398"/> <circle fill="#FFFFFF" cx="183.157" cy="514.396" r="0.398"/> <circle fill="#FFFFFF" cx="146.147" cy="518.592" r="0.398"/> <circle fill="#FFFFFF" cx="104.511" cy="517.893" r="0.398"/> <circle fill="#FFFFFF" cx="256.101" cy="518.162" r="0.398"/> <circle fill="#FFFFFF" cx="238.941" cy="508.156" r="0.398"/> <circle fill="#FFFFFF" cx="199.887" cy="510.716" r="0.398"/> <circle fill="#FFFFFF" cx="176.917" cy="528.63" r="0.878"/> <circle fill="#FFFFFF" cx="198.757" cy="549.255" r="0.398"/> <circle fill="#FFFFFF" cx="133.344" cy="531.072" r="0.398"/> <circle fill="#FFFFFF" cx="161.909" cy="535.86" r="0.398"/> <circle fill="#FFFFFF" cx="157.283" cy="564.317" r="0.398"/> <circle fill="#FFFFFF" cx="173.604" cy="534.838" r="0.398"/> <circle fill="#FFFFFF" cx="251.83" cy="575.56" r="0.398"/> <circle fill="#FFFFFF" cx="233.537" cy="567.437" r="0.398"/> <circle fill="#FFFFFF" cx="264.063" cy="490.566" r="0.398"/> <circle fill="#FFFFFF" cx="265.408" cy="485.402" r="0.398"/> <circle fill="#FFFFFF" cx="269.012" cy="468.726" r="0.398"/> <circle fill="#FFFFFF" cx="290.991" cy="439.161" r="0.398"/> <circle fill="#FFFFFF" cx="255.079" cy="448.176" r="0.398"/> <circle fill="#FFFFFF" cx="245.988" cy="476.956" r="0.398"/> <circle fill="#FFFFFF" cx="231.55" cy="480.291" r="0.398"/> <circle fill="#FFFFFF" cx="224.202" cy="470.501" r="0.398"/> <circle fill="#FFFFFF" cx="229.581" cy="462.001" r="0.398"/> <circle fill="#FFFFFF" cx="238.134" cy="452.103" r="0.398"/> <circle fill="#FFFFFF" cx="230.872" cy="439.785" r="0.398"/> <circle fill="#FFFFFF" cx="180.414" cy="423.001" r="0.398"/> <circle fill="#FFFFFF" cx="256.317" cy="402.376" r="0.398"/> <circle fill="#FFFFFF" cx="235.714" cy="399.762" r="0.398"/> <circle fill="#FFFFFF" cx="224.094" cy="399.762" r="0.398"/> <circle fill="#FFFFFF" cx="244.321" cy="384.915" r="0.398"/> <circle fill="#FFFFFF" cx="266.936" cy="371.951" r="0.398"/> <circle fill="#FFFFFF" cx="291.444" cy="365.711" r="0.398"/> <circle fill="#FFFFFF" cx="259.652" cy="351.348" r="0.398"/> <circle fill="#FFFFFF" cx="247.979" cy="353.607" r="0.398"/> <circle fill="#FFFFFF" cx="239.802" cy="362.752" r="0.398"/> <circle fill="#FFFFFF" cx="245.127" cy="368.701" r="0.398"/> <circle fill="#FFFFFF" cx="233.669" cy="352.639" r="0.398"/> <circle fill="#FFFFFF" cx="221.566" cy="356.727" r="0.398"/> <circle fill="#FFFFFF" cx="189.881" cy="365.097" r="0.398"/> <circle fill="#FFFFFF" cx="171.452" cy="388.788" r="0.398"/> <circle fill="#FFFFFF" cx="199.403" cy="400.3" r="0.398"/> <circle fill="#FFFFFF" cx="130.515" cy="374.587" r="0.398"/> <circle fill="#FFFFFF" cx="112.849" cy="389.187" r="0.878"/> <circle fill="#FFFFFF" cx="101.176" cy="393.845" r="0.398"/> <circle fill="#FFFFFF" cx="105.372" cy="383.032" r="0.398"/> <circle fill="#FFFFFF" cx="104.318" cy="373.188" r="0.398"/> <circle fill="#FFFFFF" cx="74.656" cy="361.138" r="0.398"/> <circle fill="#FFFFFF" cx="107.846" cy="358.072" r="0.398"/> <circle fill="#FFFFFF" cx="84.338" cy="375.416" r="0.398"/> <circle fill="#FFFFFF" cx="66.264" cy="379.159" r="0.398"/> <circle fill="#FFFFFF" cx="10.964" cy="390.133" r="0.398"/> <circle fill="#FFFFFF" cx="46.005" cy="399.117" r="0.398"/> <circle fill="#FFFFFF" cx="40.389" cy="416.008" r="0.878"/> <circle fill="#FFFFFF" cx="74.225" cy="449.414" r="0.398"/> <circle fill="#FFFFFF" cx="125.19" cy="447.692" r="0.398"/> <circle fill="#FFFFFF" cx="145.556" cy="433.814" r="0.398"/> <circle fill="#FFFFFF" cx="183.857" cy="433.415" r="0.398"/> <circle fill="#FFFFFF" cx="185.255" cy="411.866" r="0.398"/> <circle fill="#FFFFFF" cx="117.475" cy="455.977" r="0.398"/> <circle fill="#FFFFFF" cx="163.523" cy="476.848" r="0.398"/> <circle fill="#FFFFFF" cx="164.814" cy="464.261" r="0.398"/> <circle fill="#FFFFFF" cx="186.062" cy="479.839" r="0.398"/> <circle fill="#FFFFFF" cx="202.093" cy="498.796" r="0.398"/> <circle fill="#FFFFFF" cx="89.395" cy="487.123" r="0.398"/> <circle fill="#FFFFFF" cx="89.686" cy="483.895" r="0.398"/> <circle fill="#FFFFFF" cx="79.013" cy="487.123" r="0.398"/> <circle fill="#FFFFFF" cx="56.742" cy="396.857" r="0.398"/> <circle fill="#FFFFFF" cx="45.715" cy="446.509" r="0.398"/> <circle fill="#FFFFFF" cx="75.022" cy="483.035" r="0.398"/> <circle fill="#FFFFFF" cx="80.067" cy="476.848" r="0.398"/> <circle fill="#FFFFFF" cx="112.203" cy="481.238" r="0.398"/> <circle fill="#FFFFFF" cx="115.7" cy="339.513" r="0.398"/> <circle fill="#FFFFFF" cx="96.227" cy="310.142" r="0.398"/> <circle fill="#FFFFFF" cx="72.611" cy="311.218" r="0.398"/> <circle fill="#FFFFFF" cx="50.986" cy="309.443" r="0.398"/> <circle fill="#FFFFFF" cx="46.253" cy="304.763" r="0.398"/> <circle fill="#FFFFFF" cx="21.723" cy="290.292" r="0.878"/> <circle fill="#FFFFFF" cx="18.71" cy="260.222" r="0.398"/> <circle fill="#FFFFFF" cx="54.913" cy="241.717" r="0.398"/> <circle fill="#FFFFFF" cx="6.876" cy="250.808" r="0.398"/> <circle fill="#FFFFFF" cx="12.632" cy="236.929" r="0.398"/> <circle fill="#FFFFFF" cx="10.318" cy="254.197" r="0.398"/> <circle fill="#FFFFFF" cx="0.398" cy="245.45" r="0.398"/> <circle fill="#FFFFFF" cx="11.771" cy="269.721" r="0.398"/> <circle fill="#FFFFFF" cx="31.965" cy="267.161" r="0.398"/> <circle fill="#FFFFFF" cx="64.65" cy="290.615" r="0.398"/> <circle fill="#FFFFFF" cx="64.22" cy="300.352" r="0.398"/> <circle fill="#FFFFFF" cx="74.709" cy="300.352" r="0.398"/> <circle fill="#FFFFFF" cx="84.199" cy="294.434" r="0.398"/> <circle fill="#FFFFFF" cx="89.556" cy="290.292" r="0.398"/> <circle fill="#FFFFFF" cx="106.286" cy="273.24" r="0.398"/> <circle fill="#FFFFFF" cx="127.987" cy="290.691" r="0.398"/> <circle fill="#FFFFFF" cx="128.611" cy="287.957" r="0.398"/> <circle fill="#FFFFFF" cx="151.311" cy="296.425" r="0.398"/> <circle fill="#FFFFFF" cx="179.445" cy="296.026" r="0.398"/> <circle fill="#FFFFFF" cx="184.233" cy="293.896" r="0.398"/> <circle fill="#FFFFFF" cx="203.384" cy="272.002" r="0.398"/> <circle fill="#FFFFFF" cx="296.393" cy="284.375" r="0.398"/> <circle fill="#FFFFFF" cx="260.997" cy="261.136" r="0.398"/> <circle fill="#FFFFFF" cx="246.849" cy="262.696" r="0.398"/> <circle fill="#FFFFFF" cx="269.604" cy="245.482" r="0.398"/> <circle fill="#FFFFFF" cx="267.344" cy="240.91" r="0.398"/> <circle fill="#FFFFFF" cx="253.842" cy="235.692" r="0.398"/> <circle fill="#FFFFFF" cx="237.166" cy="243.653" r="0.398"/> <circle fill="#FFFFFF" cx="230.496" cy="251.937" r="0.398"/> <circle fill="#FFFFFF" cx="221.942" cy="250.055" r="0.398"/> <circle fill="#FFFFFF" cx="219.898" cy="234.239" r="0.398"/> <circle fill="#FFFFFF" cx="216.724" cy="232.464" r="0.398"/> <circle fill="#FFFFFF" cx="221.996" cy="211.7" r="0.398"/> <circle fill="#FFFFFF" cx="179.069" cy="238.919" r="0.398"/> <circle fill="#FFFFFF" cx="182.189" cy="232.464" r="0.398"/> <circle fill="#FFFFFF" cx="174.227" cy="234.185" r="0.398"/> <circle fill="#FFFFFF" cx="166.589" cy="235.261" r="0.398"/> <circle fill="#FFFFFF" cx="173.829" cy="229.667" r="0.398"/> <circle fill="#FFFFFF" cx="146.309" cy="237.951" r="0.398"/> <circle fill="#FFFFFF" cx="150.236" cy="222.405" r="0.398"/> <circle fill="#FFFFFF" cx="141.951" cy="204.061" r="0.398"/> <circle fill="#FFFFFF" cx="138.347" cy="187.6" r="0.398"/> <circle fill="#FFFFFF" cx="156.669" cy="174.528" r="0.398"/> <circle fill="#FFFFFF" cx="173.851" cy="182.167" r="0.398"/> <circle fill="#FFFFFF" cx="175.25" cy="177.057" r="0.398"/> <circle fill="#FFFFFF" cx="180.629" cy="176.035" r="0.398"/> <circle fill="#FFFFFF" cx="166.589" cy="207.665" r="0.398"/> <circle fill="#FFFFFF" cx="185.847" cy="213.959" r="0.398"/> <circle fill="#FFFFFF" cx="187.299" cy="209.956" r="0.398"/> <circle fill="#FFFFFF" cx="192.141" cy="212.991" r="0.398"/> <circle fill="#FFFFFF" cx="190.85" cy="210.979" r="0.398"/> <circle fill="#FFFFFF" cx="199.887" cy="203.663" r="0.398"/> <circle fill="#FFFFFF" cx="213.152" cy="205.245" r="0.398"/> <circle fill="#FFFFFF" cx="209.624" cy="193.195" r="0.398"/> <circle fill="#FFFFFF" cx="220.544" cy="188.806" r="0.398"/> <circle fill="#FFFFFF" cx="242.223" cy="176.949" r="0.398"/> <circle fill="#FFFFFF" cx="242.223" cy="169.418" r="0.398"/> <circle fill="#FFFFFF" cx="257.123" cy="158.659" r="0.398"/> <circle fill="#FFFFFF" cx="272.939" cy="158.261" r="0.398"/> <circle fill="#FFFFFF" cx="264.493" cy="135.098" r="0.398"/> <circle fill="#FFFFFF" cx="257.554" cy="127.889" r="0.398"/> <circle fill="#FFFFFF" cx="287.355" cy="123.64" r="0.398"/> <circle fill="#FFFFFF" cx="269.711" cy="108.9" r="0.398"/> <circle fill="#FFFFFF" cx="265.708" cy="94.376" r="0.398"/> <circle fill="#FFFFFF" cx="254.757" cy="79.407" r="0.398"/> <circle fill="#FFFFFF" cx="285.257" cy="60.948" r="0.398"/> <circle fill="#FFFFFF" cx="301.525" cy="16.397" r="0.398"/> <circle fill="#FFFFFF" cx="241.577" cy="24.606" r="0.398"/> <circle fill="#FFFFFF" cx="225.116" cy="29.824" r="0.398"/> <circle fill="#FFFFFF" cx="302.31" cy="77.754" r="0.398"/> <circle fill="#FFFFFF" cx="244.643" cy="78.561" r="0.398"/> <circle fill="#FFFFFF" cx="230.388" cy="86.952" r="0.398"/> <circle fill="#FFFFFF" cx="228.236" cy="97.227" r="0.398"/> <circle fill="#FFFFFF" cx="237.973" cy="103.897" r="0.398"/> <circle fill="#FFFFFF" cx="228.774" cy="74.695" r="0.398"/> <circle fill="#FFFFFF" cx="266.107" cy="99.755" r="0.398"/> <circle fill="#FFFFFF" cx="285.957" cy="117.4" r="0.398"/> <circle fill="#FFFFFF" cx="275.79" cy="165.039" r="0.398"/> <circle fill="#FFFFFF" cx="280.233" cy="176.433" r="0.398"/> <circle fill="#FFFFFF" cx="283.644" cy="177.864" r="0.398"/> <circle fill="#FFFFFF" cx="302.74" cy="186.793" r="0.398"/> <circle fill="#FFFFFF" cx="300.589" cy="180.876" r="0.398"/> <circle fill="#FFFFFF" cx="300.987" cy="166.029" r="0.398"/> <circle fill="#FFFFFF" cx="264.17" cy="184.319" r="0.398"/> <circle fill="#FFFFFF" cx="276.973" cy="190.236" r="0.398"/> <circle fill="#FFFFFF" cx="274.306" cy="196.131" r="0.398"/> <circle fill="#FFFFFF" cx="258.522" cy="201.21" r="0.398"/> <circle fill="#FFFFFF" cx="277.372" cy="201.587" r="0.398"/> <circle fill="#FFFFFF" cx="286.925" cy="205.998" r="0.398"/> <circle fill="#FFFFFF" cx="187.698" cy="193.195" r="0.398"/> <circle fill="#FFFFFF" cx="223.556" cy="273.67" r="0.398"/> <circle fill="#FFFFFF" cx="182.189" cy="263.234" r="0.398"/> <circle fill="#FFFFFF" cx="111.988" cy="261.674" r="0.398"/> <circle fill="#FFFFFF" cx="134.313" cy="266.515" r="0.398"/> <circle fill="#FFFFFF" cx="129.633" cy="261.276" r="0.398"/> <circle fill="#FFFFFF" cx="139.961" cy="255.273" r="0.398"/> <circle fill="#FFFFFF" cx="149.213" cy="257.263" r="0.398"/> <circle fill="#FFFFFF" cx="153.947" cy="267.968" r="0.878"/> <circle fill="#FFFFFF" cx="52.869" cy="276.252" r="0.398"/> <circle fill="#FFFFFF" cx="29.039" cy="299.114" r="0.398"/> <circle fill="#FFFFFF" cx="39.206" cy="284.084" r="0.398"/> <circle fill="#FFFFFF" cx="60.831" cy="267.161" r="0.398"/> <circle fill="#FFFFFF" cx="55.559" cy="236.122" r="0.398"/> <circle fill="#FFFFFF" cx="51.502" cy="225.578" r="0.398"/> <circle fill="#FFFFFF" cx="76.216" cy="239.619" r="0.398"/> <circle fill="#FFFFFF" cx="41.465" cy="220.845" r="0.398"/> <circle fill="#FFFFFF" cx="39.029" cy="214.712" r="0.398"/> <circle fill="#FFFFFF" cx="28.339" cy="211.883" r="0.398"/> <circle fill="#FFFFFF" cx="17.312" cy="212.68" r="0.398"/> <circle fill="#FFFFFF" cx="13.438" cy="217.563" r="0.398"/> <circle fill="#FFFFFF" cx="55.16" cy="204.814" r="0.398"/> <circle fill="#FFFFFF" cx="65.479" cy="210.032" r="0.398"/> <circle fill="#FFFFFF" cx="68.631" cy="207.127" r="0.878"/> <circle fill="#FFFFFF" cx="64.112" cy="203.2" r="0.398"/> <circle fill="#FFFFFF" cx="99.185" cy="185.825" r="0.398"/> <circle fill="#FFFFFF" cx="112.526" cy="176.035" r="0.398"/> <circle fill="#FFFFFF" cx="116.722" cy="173.56" r="0.398"/> <circle fill="#FFFFFF" cx="113.817" cy="173.614" r="0.398"/> <circle fill="#FFFFFF" cx="115.431" cy="172.43" r="0.398"/> <circle fill="#FFFFFF" cx="115.431" cy="173.883" r="0.398"/> <circle fill="#FFFFFF" cx="72.99" cy="166.298" r="0.398"/> <circle fill="#FFFFFF" cx="54.375" cy="175.636" r="0.398"/> <circle fill="#FFFFFF" cx="52.815" cy="158.121" r="0.398"/> <circle fill="#FFFFFF" cx="93.268" cy="138.863" r="0.398"/> <circle fill="#FFFFFF" cx="87.405" cy="128.75" r="0.398"/> <circle fill="#FFFFFF" cx="87.243" cy="125.2" r="0.398"/> <circle fill="#FFFFFF" cx="55.828" cy="120.143" r="0.398"/> <circle fill="#FFFFFF" cx="107.276" cy="102.66" r="0.398"/> <circle fill="#FFFFFF" cx="122.586" cy="93.569" r="0.398"/> <circle fill="#FFFFFF" cx="108.976" cy="75.387" r="0.398"/> <circle fill="#FFFFFF" cx="106.932" cy="64.951" r="0.398"/> <circle fill="#FFFFFF" cx="134.366" cy="76.785" r="0.398"/> <circle fill="#FFFFFF" cx="150.02" cy="67.425" r="0.398"/> <circle fill="#FFFFFF" cx="124.038" cy="137.465" r="0.398"/> <circle fill="#FFFFFF" cx="136.841" cy="131.924" r="0.398"/> <circle fill="#FFFFFF" cx="157.067" cy="140.262" r="0.398"/> <circle fill="#FFFFFF" cx="162.608" cy="143.866" r="0.398"/> <circle fill="#FFFFFF" cx="193.324" cy="139.465" r="0.398"/> <circle fill="#FFFFFF" cx="206.45" cy="147.309" r="0.398"/> <circle fill="#FFFFFF" cx="229.151" cy="145.318" r="0.398"/> <circle fill="#FFFFFF" cx="232.809" cy="146.771" r="0.398"/> <circle fill="#FFFFFF" cx="203.2" cy="116.302" r="0.398"/> <circle fill="#FFFFFF" cx="189.992" cy="101.261" r="0.398"/> <circle fill="#FFFFFF" cx="186.654" cy="86.554" r="0.398"/> <circle fill="#FFFFFF" cx="202.254" cy="64.096" r="0.398"/> <circle fill="#FFFFFF" cx="179.177" cy="51.798" r="0.398"/> <circle fill="#FFFFFF" cx="178.208" cy="39.022" r="0.398"/> <circle fill="#FFFFFF" cx="160.757" cy="39.022" r="0.398"/> <circle fill="#FFFFFF" cx="150.989" cy="42.874" r="0.398"/> <circle fill="#FFFFFF" cx="187.622" cy="86.016" r="0.398"/> <circle fill="#FFFFFF" cx="173.389" cy="160.434" r="0.398"/> <circle fill="#FFFFFF" cx="181.974" cy="167.966" r="0.398"/> <circle fill="#FFFFFF" cx="142.328" cy="164.308" r="0.398"/> <circle fill="#FFFFFF" cx="162.608" cy="137.303" r="0.398"/> <circle fill="#FFFFFF" cx="69.814" cy="201.533" r="0.398"/> <circle fill="#FFFFFF" cx="77.076" cy="199.166" r="0.398"/> <circle fill="#FFFFFF" cx="75.624" cy="197.283" r="0.398"/> <circle fill="#FFFFFF" cx="77.076" cy="195.669" r="0.398"/> <circle fill="#FFFFFF" cx="79.712" cy="203.416" r="0.398"/> <circle fill="#FFFFFF" cx="90.686" cy="204.653" r="0.398"/> <circle fill="#FFFFFF" cx="92.085" cy="206.32" r="0.398"/> <circle fill="#FFFFFF" cx="88.911" cy="194.701" r="0.398"/> <circle fill="#FFFFFF" cx="86.705" cy="221.06" r="0.398"/> <circle fill="#FFFFFF" cx="72.592" cy="189.967" r="0.398"/> <circle fill="#FFFFFF" cx="69.76" cy="196.454" r="0.398"/> <circle fill="#FFFFFF" cx="69.76" cy="198.789" r="0.398"/> <circle fill="#FFFFFF" cx="69.029" cy="199.564" r="0.398"/> <circle fill="#FFFFFF" cx="66.748" cy="195.669" r="0.398"/> <circle fill="#FFFFFF" cx="48.781" cy="199.327" r="0.398"/> <circle fill="#FFFFFF" cx="72.558" cy="264.041" r="0.398"/> <circle fill="#FFFFFF" cx="29.039" cy="269.151" r="0.398"/> <circle fill="#FFFFFF" cx="30.007" cy="266.139" r="0.398"/> <circle fill="#FFFFFF" cx="66.318" cy="326.119" r="0.398"/> <circle fill="#FFFFFF" cx="47.651" cy="324.559" r="0.398"/> <circle fill="#FFFFFF" cx="34.095" cy="344.387" r="0.398"/> <circle fill="#FFFFFF" cx="48.404" cy="357.674" r="0.398"/> <circle fill="#FFFFFF" cx="11.847" cy="357.534" r="0.398"/> <circle fill="#FFFFFF" cx="45.607" cy="345.753" r="0.398"/> <circle fill="#FFFFFF" cx="23.52" cy="336.232" r="0.398"/> <circle fill="#FFFFFF" cx="13.654" cy="326.119" r="0.398"/> <circle fill="#FFFFFF" cx="44.24" cy="309.443" r="0.398"/> <circle fill="#FFFFFF" cx="114.248" cy="385.915" r="0.398"/> <circle fill="#FFFFFF" cx="196.767" cy="322.784" r="0.398"/> <circle fill="#FFFFFF" cx="153.087" cy="334.08" r="0.398"/> <circle fill="#FFFFFF" cx="171.452" cy="342.472" r="0.398"/> <circle fill="#FFFFFF" cx="172.022" cy="347.367" r="0.398"/> <circle fill="#FFFFFF" cx="117.776" cy="370.875" r="0.398"/> <circle fill="#FFFFFF" cx="199.026" cy="317.081" r="0.398"/> <circle fill="#FFFFFF" cx="282.944" cy="320.201" r="0.398"/> <circle fill="#FFFFFF" cx="257.608" cy="307.936" r="0.398"/> <circle fill="#FFFFFF" cx="195.508" cy="305.408" r="0.398"/> <circle fill="#FFFFFF" cx="230.496" cy="301.75" r="0.398"/> <circle fill="#FFFFFF" cx="220.221" cy="388.197" r="0.398"/> <circle fill="#FFFFFF" cx="211.991" cy="391.693" r="0.398"/> <circle fill="#FFFFFF" cx="212.744" cy="459.581" r="0.398"/> <circle fill="#FFFFFF" cx="192.517" cy="442.152" r="0.398"/> <circle fill="#FFFFFF" cx="370.09" cy="579.809" r="0.398"/> <circle fill="#FFFFFF" cx="321.999" cy="539.357" r="0.398"/> <circle fill="#FFFFFF" cx="334.479" cy="521.389" r="0.398"/> <circle fill="#FFFFFF" cx="373.533" cy="529.889" r="0.398"/> <circle fill="#FFFFFF" cx="416.137" cy="563.51" r="0.398"/> <circle fill="#FFFFFF" cx="450.673" cy="553.451" r="0.398"/> <circle fill="#FFFFFF" cx="433.351" cy="495.084" r="0.878"/> <circle fill="#FFFFFF" cx="418.181" cy="481.399" r="0.398"/> <circle fill="#FFFFFF" cx="466.381" cy="492.933" r="0.398"/> <circle fill="#FFFFFF" cx="462.723" cy="472.115" r="0.398"/> <circle fill="#FFFFFF" cx="456.59" cy="450.382" r="0.398"/> <circle fill="#FFFFFF" cx="516.086" cy="455.04" r="0.398"/> <circle fill="#FFFFFF" cx="532.87" cy="450.113" r="0.398"/> <circle fill="#FFFFFF" cx="543.79" cy="450.78" r="0.398"/> <circle fill="#FFFFFF" cx="572.569" cy="420.688" r="0.398"/> <circle fill="#FFFFFF" cx="574.291" cy="409.122" r="0.398"/> <circle fill="#FFFFFF" cx="545.995" cy="395.351" r="0.398"/> <circle fill="#FFFFFF" cx="517.646" cy="395.75" r="0.398"/> <circle fill="#FFFFFF" cx="558.314" cy="373.134" r="0.398"/> <circle fill="#FFFFFF" cx="553.472" cy="358.234" r="0.398"/> <circle fill="#FFFFFF" cx="550.245" cy="346.775" r="0.398"/> <circle fill="#FFFFFF" cx="586.502" cy="338.706" r="0.398"/> <circle fill="#FFFFFF" cx="593.71" cy="312.186" r="0.398"/> <circle fill="#FFFFFF" cx="598.39" cy="353.769" r="0.398"/> <circle fill="#FFFFFF" cx="535.021" cy="399.493" r="0.398"/> <circle fill="#FFFFFF" cx="510.061" cy="435.535" r="0.398"/> <circle fill="#FFFFFF" cx="515.44" cy="425.529" r="0.398"/> <circle fill="#FFFFFF" cx="503.584" cy="428.058" r="0.398"/> <circle fill="#FFFFFF" cx="495.429" cy="431.5" r="0.398"/> <circle fill="#FFFFFF" cx="497.258" cy="420.688" r="0.398"/> <circle fill="#FFFFFF" cx="477.623" cy="417.837" r="0.398"/> <circle fill="#FFFFFF" cx="481.981" cy="412.942" r="0.398"/> <circle fill="#FFFFFF" cx="497.688" cy="408.1" r="0.398"/> <circle fill="#FFFFFF" cx="461.969" cy="423.378" r="0.398"/> <circle fill="#FFFFFF" cx="458.634" cy="414.802" r="0.398"/> <circle fill="#FFFFFF" cx="444.271" cy="422.409" r="0.398"/> <circle fill="#FFFFFF" cx="419.128" cy="413.856" r="0.398"/> <circle fill="#FFFFFF" cx="438.408" cy="408.1" r="0.398"/> <circle fill="#FFFFFF" cx="436.364" cy="381.257" r="0.398"/> <circle fill="#FFFFFF" cx="455.353" cy="394.383" r="0.398"/> <circle fill="#FFFFFF" cx="460.033" cy="380.859" r="0.398"/> <circle fill="#FFFFFF" cx="481.582" cy="379.267" r="0.398"/> <circle fill="#FFFFFF" cx="476.494" cy="397.019" r="0.398"/> <circle fill="#FFFFFF" cx="483.433" cy="405.088" r="0.398"/> <circle fill="#FFFFFF" cx="453.363" cy="443.797" r="0.398"/> <circle fill="#FFFFFF" cx="440.237" cy="458.666" r="0.398"/> <circle fill="#FFFFFF" cx="423.937" cy="455.04" r="0.398"/> <circle fill="#FFFFFF" cx="427.111" cy="455.439" r="0.398"/> <circle fill="#FFFFFF" cx="404.249" cy="448.284" r="0.398"/> <circle fill="#FFFFFF" cx="383.216" cy="419.289" r="0.398"/> <circle fill="#FFFFFF" cx="373.102" cy="404.442" r="0.398"/> <circle fill="#FFFFFF" cx="371.004" cy="404.388" r="0.398"/> <circle fill="#FFFFFF" cx="376.222" cy="400.408" r="0.398"/> <circle fill="#FFFFFF" cx="402.797" cy="395.997" r="0.398"/> <circle fill="#FFFFFF" cx="381.419" cy="361.214" r="0.398"/> <circle fill="#FFFFFF" cx="344.699" cy="371.036" r="0.398"/> <circle fill="#FFFFFF" cx="339.966" cy="372.005" r="0.398"/> <circle fill="#FFFFFF" cx="309.949" cy="364.258" r="0.398"/> <circle fill="#FFFFFF" cx="329.099" cy="335.102" r="0.398"/> <circle fill="#FFFFFF" cx="334.263" cy="319.578" r="0.398"/> <circle fill="#FFFFFF" cx="325.71" cy="304.978" r="0.398"/> <circle fill="#FFFFFF" cx="311.687" cy="297.931" r="0.398"/> <circle fill="#FFFFFF" cx="360.138" cy="301.32" r="0.398"/> <circle fill="#FFFFFF" cx="358.255" cy="291.153" r="0.398"/> <circle fill="#FFFFFF" cx="362.882" cy="290.754" r="0.398"/> <circle fill="#FFFFFF" cx="361.483" cy="281.685" r="0.398"/> <circle fill="#FFFFFF" cx="353.253" cy="278.404" r="0.398"/> <circle fill="#FFFFFF" cx="335.232" cy="274.477" r="0.398"/> <circle fill="#FFFFFF" cx="359.654" cy="266.139" r="0.398"/> <circle fill="#FFFFFF" cx="363.28" cy="269.635" r="0.398"/> <circle fill="#FFFFFF" cx="377.482" cy="268.291" r="0.398"/> <circle fill="#FFFFFF" cx="364.334" cy="258.5" r="0.398"/> <circle fill="#FFFFFF" cx="357.825" cy="354.898" r="0.398"/> <circle fill="#FFFFFF" cx="392.414" cy="348.873" r="0.398"/> <circle fill="#FFFFFF" cx="406.347" cy="332.52" r="0.398"/> <circle fill="#FFFFFF" cx="380.849" cy="319.664" r="0.398"/> <circle fill="#FFFFFF" cx="371.435" cy="303.741" r="0.398"/> <circle fill="#FFFFFF" cx="429.478" cy="369.154" r="0.398"/> <circle fill="#FFFFFF" cx="434.75" cy="367.486" r="0.398"/> <circle fill="#FFFFFF" cx="433.674" cy="359.094" r="0.398"/> <circle fill="#FFFFFF" cx="449.543" cy="355.49" r="0.398"/> <circle fill="#FFFFFF" cx="441.635" cy="341.719" r="0.398"/> <circle fill="#FFFFFF" cx="462.83" cy="353.047" r="0.398"/> <circle fill="#FFFFFF" cx="475.31" cy="329.239" r="0.398"/> <circle fill="#FFFFFF" cx="476.494" cy="324.72" r="0.398"/> <circle fill="#FFFFFF" cx="488.974" cy="332.197" r="0.398"/> <circle fill="#FFFFFF" cx="492.847" cy="348.013" r="0.398"/> <circle fill="#FFFFFF" cx="447.983" cy="309.819" r="0.398"/> <circle fill="#FFFFFF" cx="478.269" cy="299.437" r="0.398"/> <circle fill="#FFFFFF" cx="481.55" cy="280.878" r="0.398"/> <circle fill="#FFFFFF" cx="470.953" cy="268.721" r="0.878"/> <circle fill="#FFFFFF" cx="467.08" cy="263.664" r="0.398"/> <circle fill="#FFFFFF" cx="473.804" cy="262.266" r="0.398"/> <circle fill="#FFFFFF" cx="451.103" cy="259.432" r="0.398"/> <circle fill="#FFFFFF" cx="474.396" cy="254.412" r="0.398"/> <circle fill="#FFFFFF" cx="465.681" cy="239.242" r="0.398"/> <circle fill="#FFFFFF" cx="486.93" cy="255.165" r="0.398"/> <circle fill="#FFFFFF" cx="462.992" cy="242.308" r="0.398"/> <circle fill="#FFFFFF" cx="472.89" cy="223.481" r="0.398"/> <circle fill="#FFFFFF" cx="483.541" cy="211.754" r="0.398"/> <circle fill="#FFFFFF" cx="470.953" cy="207.181" r="0.398"/> <circle fill="#FFFFFF" cx="462.238" cy="206.536" r="0.398"/> <circle fill="#FFFFFF" cx="452.394" cy="212.345" r="0.398"/> <circle fill="#FFFFFF" cx="451.996" cy="200.457" r="0.398"/> <circle fill="#FFFFFF" cx="444.863" cy="197.229" r="0.398"/> <circle fill="#FFFFFF" cx="517.377" cy="201.479" r="0.398"/> <circle fill="#FFFFFF" cx="411.888" cy="299.706" r="0.398"/> <circle fill="#FFFFFF" cx="404.948" cy="285.612" r="0.398"/> <circle fill="#FFFFFF" cx="400.914" cy="273.325" r="0.398"/> <circle fill="#FFFFFF" cx="416.944" cy="255.595" r="0.398"/> <circle fill="#FFFFFF" cx="419.526" cy="247.204" r="0.398"/> <circle fill="#FFFFFF" cx="422.7" cy="241.663" r="0.398"/> <circle fill="#FFFFFF" cx="410.973" cy="235.261" r="0.398"/> <circle fill="#FFFFFF" cx="394.405" cy="234.454" r="0.398"/> <circle fill="#FFFFFF" cx="372.672" cy="241.125" r="0.398"/> <circle fill="#FFFFFF" cx="382.409" cy="224.234" r="0.398"/> <circle fill="#FFFFFF" cx="371.489" cy="233.648" r="0.398"/> <circle fill="#FFFFFF" cx="359.224" cy="209.225" r="0.398"/> <circle fill="#.........完整代码请登录后点击上方下载按钮下载查看
网友评论0