1<svg class="horizonSVG" viewBox="-0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" text-rendering="optimizeSpeed">
2 <defs>
3<linearGradient id="warmSkyGrad" gradientUnits="userSpaceOnUse" x1="418.5291" y1="12" x2="418.5291" y2="419.5709">
4 <stop offset="0" style="stop-color:#E84778"/>
5 <stop offset="0.1552" style="stop-color:#EE6F7A"/>
6 <stop offset="0.3347" style="stop-color:#F4967C"/>
7 <stop offset="0.5122" style="stop-color:#F9B57D"/>
8 <stop offset="0.6847" style="stop-color:#FCCB7E"/>
9 <stop offset="0.85" style="stop-color:#FED87F"/>
10 <stop offset="1" style="stop-color:#FFDD7F"/>
11</linearGradient>
12<linearGradient id="mountainSkyGrad" gradientUnits="userSpaceOnUse" x1="400" y1="65.7474" x2="400" y2="573.9511">
13 <stop offset="0" style="stop-color:#E5F9FA"/>
14 <stop offset="1" style="stop-color:#FFFFFF"/>
15</linearGradient>
16 <clipPath id="mainLogoMask">
17 <circle class="mainLogoMaskCircle" cx="400" cy="215" r="203.8"/>
18
19 </clipPath>
20 </defs>
21<rect class="skyBg" x="-400" y="-300" fill="url(#mountainSkyGrad)" width="1600" height="1200"/>
22 <g class="mainLogoGroup">
23 <g class="maskedLogoGroup" clip-path="url(#mainLogoMask)">
24 <rect class="warmSkyBg" fill="url(#warmSkyGrad)" width="1900" height="1200" x="-800" y="-600" opacity="0"/>
25<circle class="logoSun" fill="#FFFCEA" cx="400" cy="215" r="55.3"/>
26 <g class="waterGroup">
27 <rect id="waterCircle" x="0.2" fill="#5DB3C6" width="2014.1" height="278"/>
28 <path fill="#A5DCE4" d="M1710,0c-0.4,2.9-2.1,7.4-5.1,13.1c-15.3,21.7-54.3,38-89,40.2c-36.6,2.3-100.9,7.3-102.9,16.5
29 c-2,9.2,44.9,15.6,54.8,20.3c19.6,9.2,1.5,25.4-44.6,37.3c-26.2,6.8-106.5,18.5-147,23.7C1007,198.8,0,278,0,278v269h1007h0.2H2014
30 V0C2014,0,1743,0,1710,0z"/>
31 </g>
32</g>
33 </g>
34 <g class="allMountains" >
35<g class="smallGroup">
36 <g id="small2_1_">
37 <polygon fill="#D9D4E2" points="1530.4,229.3 1825.5,489.1 1240.1,489.1 "/>
38 <polygon fill="#D9D4E2" points="1146.9,258.6 1213.3,305 1230.4,290.6 1506.1,489.1 836.2,489.1 "/>
39 </g>
40 <g id="small1_1_">
41 <polygon fill="#D9D4E2" points="2519.4,229.3 2814.5,489.1 2229.1,489.1 "/>
42 <polygon fill="#D9D4E2" points="2135.9,258.6 2202.3,305 2219.4,290.6 2495.1,489.1 1825.2,489.1 "/>
43 </g>
44 </g>
45<g class="medGroup">
46 <g id="med3_1_">
47 <polygon fill="#B3A8C7" points="1824.4,134.3 2266.3,489.1 1334,489.1 "/>
48 <polygon fill="#B3A8C7" points="862.6,143.1 1382.8,489.1 408,489.1 "/>
49 </g>
50 <g id="med1_4_">
51 <polygon fill="#B3A8C7" points="3682.4,134.3 4124.3,489.1 3192,489.1 "/>
52 <polygon fill="#B3A8C7" points="2720.6,143.1 3240.8,489.1 2266,489.1 "/>
53 </g>
54 <g id="med1_3_">
55 <polygon fill="#B3A8C7" points="5540.4,134.3 5982.3,489.1 5050,489.1 "/>
56 <polygon fill="#B3A8C7" points="4578.6,143.1 5098.8,489.1 4124,489.1 "/>
57 </g>
58 </g>
59<g class="bigGroup">
60 <g id="big_7_">
61 <polygon fill="#7D76AA" points="541,12 1270.2,489.1 0,489.1 "/>
62 <polygon fill="#7D76AA" points="2240.2,0 1511,489.1 2676,489.1 "/>
63 </g>
64 <g id="big_6_">
65 <polygon fill="#7D76AA" points="3217,12 3946.2,489.1 2676,489.1 "/>
66 <polygon fill="#7D76AA" points="4916.2,0 4187,489.1 5352,489.1 "/>
67 </g>
68 <g id="big_5_">
69 <polygon fill="#7D76AA" points="5893,12 6622.2,489.1 5352,489.1 "/>
70 <polygon fill="#7D76AA" points="7592.2,0 6863,489.1 8028,489.1 "/>
71 </g>
72 <g id="big_4_">
73 <polygon fill="#7D76AA" points="8569,12 9298.2,489.1 8028,489.1 "/>
74 <polygon fill="#7D76AA" points="10268.2,0 9539,489.1 10704,489.1 "/>
75 </g>
76 </g>
77</g>
78 <text class="horizon" x="50%" y="50%">horizon.io</text>
79 <g class="wholeChat">
80<circle id="c"/>
81<linearGradient id="chatPanelGrad" gradientUnits="userSpaceOnUse" x1="400" y1="375" x2="400" y2="182" >
82 <stop offset="0" style="stop-color:#FFEAB6;stop-opacity:0.6"/>
83 <stop offset="1" style="stop-color:#FEDA7F;stop-opacity:0"/>
84</linearGradient>
85<linearGradient id="chatMaskGrad" gradientUnits="userSpaceOnUse" x1="400" y1="205" x2="400" y2="182" >
86 <stop offset="0" style="stop-color:#EEEEEE;stop-opacity:1"/>
87 <stop offset="1" style="stop-color:#FEDA7F;stop-opacity:0"/>
88</linearGradient>
89<mask id="chatMask">
90 <rect class="chatMask" x="120" y="186" fill="url(#chatMaskGrad)" width="560" height="203"/>
91
92</mask>
93<rect class="chatPanel" x="140" y="186" fill="url(#chatPanelGrad)" width="520" height="203.1"/>
94
95<g class="allChat" mask="url(#chatMask)">
96 <g class="chat0 chatMessage">
97 <g>
98 <circle cx="213.63" cy="410" r="16.7" fill="#e84778"/>
99 <path d="M213.63,403.21a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,403.21Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,422.26,219.79,419.48,213.63,419.48Z" fill="#fffcea"/>
100 </g>
101 <rect x="248.25" y="394.4" width="197.29" height="32.3" rx="6" ry="6" fill="#fffcea"/>
102 </g>
103 <g class="chat1 chatMessage">
104 <g>
105 <circle cx="586.37" cy="460.06" r="16.7" fill="#5db3c6"/>
106 <path d="M586.37,453.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,453.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,472.32,592.53,469.54,586.37,469.54Z" fill="#fffcea"/>
107 </g>
108 <rect x="443.44" y="443.91" width="111.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"/>
109 </g>
110 <g class="chat2 chatMessage">
111 <g>
112 <circle cx="586.37" cy="510.06" r="16.7" fill="#5db3c6"/>
113 <path d="M586.37,503.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,503.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,522.32,592.53,519.54,586.37,519.54Z" fill="#fffcea"/>
114 </g>
115 <rect x="483.44" y="493.91" width="71.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"/>
116 </g>
117 <g class="chat3 chatMessage">
118 <g>
119 <circle cx="213.63" cy="560.06" r="16.7" fill="#e84778"/>
120 <path d="M213.63,553.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,553.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,572.32,219.79,569.54,213.63,569.54Z" fill="#fffcea"/>
121 </g>
122 <rect x="248.25" y="543.97" width="136.29" height="32.3" rx="4.63" ry="4.63" fill="#fffcea"/>
123 </g>
124 <g class="chat4 chatMessage">
125 <g>
126 <circle cx="586.37" cy="610" r="16.7" fill="#5db3c6"/>
127 <path d="M586.37,603.21a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,603.21Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,622.26,592.53,619.48,586.37,619.48Z" fill="#fffcea"/>
128 </g>
129 <rect x="413.44" y="593.85" width="141.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"/>
130 </g>
131 <g class="chat5 chatMessage">
132 <g>
133 <circle cx="213.63" cy="660.06" r="16.7" fill="#e84778"/>
134 <path d="M213.63,653.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,653.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,672.32,219.79,669.54,213.63,669.54Z" fill="#fffcea"/>
135 </g>
136 <rect x="248.25" y="643.97" width="87.29" height="32.3" rx="4.63" ry="4.63" fill="#fffcea"/>
137 </g>
138 </g>
139</g>
140
141
142</svg>
143
144<svg class="devicesSVG" xmlns="http://www.w3.org/2000/svg" viewBox="-100 0 800 600" preserveAspectRatio="xMidYMax meet">
145<defs>
146
147 <clipPath id="desktopMask">
148 <rect class="desktopMask" x="59" y="154" fill="#009444" width="388" height="231"/>
149
150 </clipPath>
151 <clipPath id="iPadMask">
152 <rect class="iPadMask" x="509" y="215" fill="#ED1C24" width="166" height="224"/>
153
154 </clipPath>
155 <clipPath id="phoneMask">
156 <rect class="phoneMask" x="716" y="333" fill="#ED1C24" width="61" height="107"/>
157 </clipPath>
158
159</defs>
160<g id="allDevices" >
161 <g class="desktopGroup device">
162 <g clip-path="url(#desktopMask)">
163 <g class="desktopSVGContainer"></g>
164 </g>
165 <g>
166 <path fill="#707174" d="M208.9,416.3h83.2l-0.9-5.7c0,0-81.3,0-81.3,0L208.9,416.3z"/>
167 <rect x="61.3" y="156.3" fill="none" width="383" height="226.6"/>
168 <polygon fill="#A5A7AA" points="203.4,458.3 297.1,458.3 292.1,416.3 208.9,416.3 "/>
169 </g>
170 <g>
171 <path fill="#5A5A5A" d="M458.3,131.3H45.8c-6.6,0-12,5-12,11.1v121v115.7v22c0,6.1,5.4,11.1,12,11.1h163.8h81.9h166.8
172 c6.6,0,12-5,12-11.1v-86.8v-116v-55.9C470.3,136.3,464.8,131.3,458.3,131.3z M446.3,318.2V385h-387v-10V259.3V154.3h387v47.9V318.2
173 z"/>
174 <path fill="#9E9E9E" d="M255.4,398.6c0.1-0.1,0.4-1.9,0.3-2.3c-0.1-0.4-1-1.6-1.6-2.1c-0.3-0.6-0.7-2.2-0.8-2.5
175 c-0.2-0.7-0.4-1-0.7-1.2c-0.2-0.2-0.6-0.7-1.8-0.8c-1.2-0.1-2.2,0.9-2.5,1.7c-0.1,0.2-0.2,0.8-0.4,1.9c-0.2,1.2-0.9,1.6-2.2,3
176 c-0.1,0.1-0.1,0.2-0.2,0.2c-0.1,0.3-0.4,1.1,0.1,1.6c0.4,0.4,0.7,0.6,1,0.7c-0.1,0.1-0.4,0.7,0.1,1c0.1,0.1,0.2,0.1,0.3,0.1
177 c-0.1,0.8-0.2,1.4-0.1,1.8c0,0.5,0.2,2.1,0.4,2.5c0.2,0.4,0.5,1.3,1.1,1.4c0.5,0.1,0.9-0.3,1.4-0.5s1.2-0.7,1.7-0.9
178 c0.2-0.1,0.3-0.1,0.4-0.2c0.3,0.3,0.9,0.9,1.2,1.1c0.2,0.1,0.5,0.2,0.9,0c0.4-0.2,0.8-1.3,1.1-2.2c0.3-0.9,0.5-1.7,0.3-4.1
179 C255.4,398.8,255.4,398.7,255.4,398.6z M247.5,400c-0.2,0-0.3,0-0.4,0C247.3,400,247.4,400,247.5,400z"/>
180 </g>
181
182</g>
183 <g class="iPadGroup device" >
184 <g clip-path="url(#iPadMask)">
185 <g class="iPadSVGContainer"></g>
186
187 </g>
188 <g>
189 <path fill="#5A5A5A" d="M680.1,195h-177c-6.6,0-12,5.4-12,12v108.5v101.1v0.5v29.5c0,6.6,5.4,12,12,12h177c6.6,0,12-5.4,12-12
190 v-60.2v-0.5V273.1V207C692.1,200.4,686.7,195,680.1,195z M674.1,277.3V389v0.5v49.1h-165V414v-0.5V311.3v-95.8h165V277.3z"/>
191 </g>
192 <g>
193 <circle fill="#7C7D80" cx="591.3" cy="204.7" r="1.4"/>
194 <g>
195 <path fill="#444444" d="M591.6,444.3c-2.1,0-3.9,1.6-4.1,3.7c0-0.2,0-0.3,0-0.5c0-2.3,1.9-4.2,4.2-4.2s4.2,1.9,4.2,4.2
196 c0,0.2,0,0.3,0,0.5C595.5,446,593.8,444.3,591.6,444.3z"/>
197 <path fill="#7B7C7F" d="M591.6,444.3c2.1,0,3.9,1.6,4.1,3.7c-0.2,2.1-2,3.7-4.1,3.7s-3.9-1.6-4.1-3.7
198 C587.7,446,589.5,444.3,591.6,444.3z"/>
199 </g>
200 </g>
201
202</g>
203 <g class="phoneGroup device">
204
205 <g clip-path="url(#phoneMask)">
206 <g class="phoneSVGContainer"></g>
207 </g>
208 <g>
209 <rect x="716.7" y="334" fill="none" width="59.8" height="105.3"/>
210 <path fill="#5A5A5A" d="M768.7,315c0,0-2.5,0-2.9,0l-0.1,0h-5.5l-2.2,0h-33.2c-6.7,0-12.2,5.4-12.2,12v6.6v0.5v0.4v5.3v8.9v7.6
211 v2.1v7.4v1v79.5c0,6.6,5.5,12,12.2,12h43.8c6.7,0,12.2-5.4,12.2-12V327C780.8,320.4,775.3,315,768.7,315z M776.5,439.3h-59.8V334
212 h59.8V439.3z"/>
213 </g>
214 <g>
215 <circle fill="#7C7D80" cx="746.7" cy="324.8" r="1.4"/>
216 <g>
217 <path fill="#444444" d="M746.6,445.2c-2.1,0-3.9,1.6-4.1,3.7c0-0.2,0-0.3,0-0.5c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2
218 c0,0.2,0,0.3,0,0.5C750.5,446.9,748.7,445.2,746.6,445.2z"/>
219 <path fill="#7B7C7F" d="M746.6,445.2c2.1,0,3.9,1.6,4.1,3.7c-0.2,2.1-2,3.7-4.1,3.7c-2.1,0-3.9-1.6-4.1-3.7
220 C742.7,446.9,744.4,445.2,746.6,445.2z"/>
221 </g>
222 </g>
223</g>
224
225
226 </g>
227<!-- <a id="visitText" xlink:href="http://horizon.io" target="blank">
228 <text x="32%" y="90%">Visit Horizon.io</text></a> -->
229</svg>