-
Notifications
You must be signed in to change notification settings - Fork 1
/
fly.html
89 lines (72 loc) · 6.42 KB
/
fly.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="rocket_css.css">
</head>
<body style="background: #060918">
<div id="canvas" class='launch'>
<svg width="100vw" height="100vh" viewBox="0 0 600 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="BgStar0">
<rect id="star0" fill="#8db30c" x="200.5" y="250" width="2" height="20"/>
<rect id="star0-1" fill="#8db30c" x="200.5" y="324" width="3" height="3"/>
<rect id="star0-2" fill="#e87970" x="180" y="100" width="8" height="8"/>
<rect id="star0-3" fill="#63535a" x="40" y="0" width="2" height="20"/>
<rect id="star0-4" fill="#e87970" x="550" y="80" width="6" height="6"/>
<rect id="star0-5" fill="#63535a" x="240" y="100" width="1" height="40"/>
</g>
<g id="BgStar1">
<rect id="star1" fill="#63535a" x="370.5" y="324" width="6" height="6"/>
<rect id="star1-1" fill="#8db30c" x="410" y="180" width="8" height="8"/>
<rect id="star1-2" fill="#8db30c" x="110" y="120" width="8" height="8"/>
<rect id="star1-3" fill="#8db30c" x="413" y="20" width="2" height="15"/>
</g>
<g id="BgStar2">
<rect id="star2" fill="#63535a" x="80" y="170" width="4" height="4"/>
<rect id="star2-1" fill="#e87970" x="30" y="0" width="6" height="6"/>
</g>
<g id="Entire">
<g class="TransFire">
<rect x="265" y="300" opacity=".3" fill="#d1edea" width="70" height="500" rx="25" ry="25"/>
<rect x="285" y="300" opacity=".2" fill="#d1edea" width="30" height="500" rx="13" ry="13"/>
</g>
<g class="rainbow">
<rect x="275" y="300" clip-path="url(#rainbowClip)" fill="#d1edea" width="10" height="60" rx="6" ry="6"/>
</g>
<g class="rainbow1">
<rect x="284" y="263.3" clip-path="url(#rainbowClip)" fill="#75cac1" width="30" height="60" rx="14" ry="14"/>
</g>
<g class="rainbow2">
<rect x="315" y="263.3" clip-path="url(#rainbowClip)" fill="#19a697" width="10" height="60" rx="6" ry="6"/>
</g>
</g>
<g id="RocketShip">
<g class="RocketShipClass">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="372.5" height="334.8" viewBox="0 0 372.5 334.8">
<defs>
<style>.cls-1{fill:#ecb447;opacity:0.5;isolation:isolate;}.cls-2{fill:#1e6c7e;}.cls-3{fill:#103d47;}.cls-4{fill:#16515f;}.cls-5{fill:#e2574c;}.cls-6{fill:#cb4e44;}.cls-7{fill:#324d5b;}.cls-8{fill:#e4e7e7;}.cls-9{fill:#2c8071;}.cls-10{fill:#1d554b;}.cls-11{fill:#3db39e;}.cls-12{fill:#3aaa96;}.cls-13{fill:#f2f2f2;}.cls-14{fill:#50412e;}.cls-15{fill:#fff;}.cls-16{fill:#2a2718;}.cls-17{fill:none;stroke:#f7f7f7;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style>
</defs>
<title>ufoSVG</title>
<polygon class="cls-1" points="1.2 0 1.6 0.8 2.4 0.9 1.8 1.5 1.9 2.3 1.2 1.9 0.5 2.3 0.6 1.5 0 0.9 0.8 0.8 1.2 0"/><circle class="cls-2" cx="300.1" cy="199.8" r="3"/><rect class="cls-2" x="298.6" y="199.8" width="3" height="16"/><circle class="cls-3" cx="299.9" cy="322.8" r="12"/><circle class="cls-3" cx="333.9" cy="316.8" r="12" transform="translate(-126.2 328.9) rotate(-45)"/><circle class="cls-3" cx="265.9" cy="316.8" r="12" transform="translate(-146.1 280.8) rotate(-45)"/><path class="cls-4" d="M316.3,248.8H283.8a38,38,0,1,0,0,76h32.5a39.1,39.1,0,0,0,33.8-19.7,38,38,0,0,0,5.1-18.3A39,39,0,0,0,316.3,248.8Z"/><path class="cls-5" d="M355.2,285.8a39.1,39.1,0,0,0-39-39H283.7a39.1,39.1,0,0,0-39,39h0v1a39,39,0,0,1,38.9-38h32.5a39,39,0,0,1,38.9,38,2,2,0,0,0,.2-1Z"/><path class="cls-2" d="M316.3,248.8H283.8A37.5,37.5,0,0,0,250,305.1c6.7,9.4,19.4,13.7,33.8,13.7h32.5c14.4,0,27.1-4.3,33.8-13.7a38,38,0,0,0,5.1-18.3A39,39,0,0,0,316.3,248.8Z"/><path class="cls-6" d="M372.3,271.8c-2.7-17.6-34-31.5-72.3-31.5s-69.6,13.9-72.3,31.5a21,21,0,0,0-.2,2.5c0,18.8,32.5,34,72.5,34s72.5-15.2,72.5-34A21,21,0,0,0,372.3,271.8Z"/><path class="cls-7" d="M300,303.3c38.2,0,69.6-13.9,72.3-31.5-2.7-17.6-34-31.5-72.3-31.5s-69.6,13.9-72.3,31.5C230.4,289.4,261.8,303.3,300,303.3Z"/><path class="cls-5" d="M300,303.3c38.2,0,69.6-13.9,72.3-31.5-2.7-17.6-34-31.5-72.3-31.5s-69.6,13.9-72.3,31.5C230.4,289.4,261.8,303.3,300,303.3Z"/><path class="cls-8" d="M298.4,209.8A43.2,43.2,0,0,0,257,251a42.2,42.2,0,0,0,4.4,20.7c9.1,11.3,23.5,15,39.1,15s29-3.7,38.1-15a43,43,0,0,0-40.2-61.9Z"/><path class="cls-9" d="M305,242.7a14.4,14.4,0,0,0-4.8,5.7,13.2,13.2,0,0,0-4.9-5.7,9.8,9.8,0,0,1-4.1,5.1,6.2,6.2,0,0,1,3.4,4.6,16.8,16.8,0,0,1,5.5-1h.1a16.8,16.8,0,0,1,5.5,1,6.7,6.7,0,0,1,3.4-4.6A9.8,9.8,0,0,1,305,242.7Z"/><path class="cls-10" d="M300.2,248.4h0a12.9,12.9,0,0,0-4.9-5.7,9.8,9.8,0,0,1-4.1,5.1,6.2,6.2,0,0,1,3.4,4.6,17.4,17.4,0,0,1,5.6-1v-3Z"/><path class="cls-11" d="M305.7,252.4a16.8,16.8,0,0,0-5.5-1h0a16.8,16.8,0,0,0-5.5,1,14.9,14.9,0,0,0-9.6,14.1v18.8a74.4,74.4,0,0,0,15.1,1.5h.3a70.2,70.2,0,0,0,14.8-1.4V266.5A14.9,14.9,0,0,0,305.7,252.4Z"/><path class="cls-12" d="M300.2,268.7h0V251.4a16.8,16.8,0,0,0-5.5,1,14.9,14.9,0,0,0-9.6,14.1v18.8a74.4,74.4,0,0,0,15.1,1.5V268.7Z"/><circle class="cls-12" cx="286.6" cy="240" r="9.7"/><circle class="cls-13" cx="286.6" cy="240" r="6"/><circle class="cls-14" cx="286.6" cy="240" r="3.2"/><circle class="cls-11" cx="313.7" cy="240" r="9.7"/><circle class="cls-15" cx="313.7" cy="240" r="6"/><circle class="cls-16" cx="313.7" cy="240" r="3.2"/>
<g class="wifi" opacity="0.1" stroke="#ededed">
<path class="wifi1" stroke-width="3" stroke-linecap="round" d="M289.9,188.7
c5.2-5.2,13.7-5.2,18.9,0" />
<path class="wifi2" stroke-width="3" stroke-linecap="round" d="M285.6,182.5
c7.6-7.6,19.8-7.6,27.4,0" />
<path class="wifi3" stroke-width="3" stroke-linecap="round" d="M281.4,176.3
c9.9-9.9,26-9.9,35.9,0" />
</svg>
</g>
</svg>
</g>
</g>
</g>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
document.getElementById("canvas").className = "";
}, 5000);
});
</script>
</html>