-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (66 loc) · 4.76 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>London Web Components Meetup</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<svg id="ldnwc" class="ldnwc-logo" width="397px" height="424px" viewBox="0 0 397 424" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="shield" fill-rule="nonzero">
<polygon fill="#3456C5" points="264.94 424 119.94 422.63 0.1 94.63 6.1 88.63 336.45 0.25 396.31 344.25 390.31 350.25"></polygon>
<polygon fill="#D7DEF4" points="331.66 7.75 13.94 92.76 130.11 410.68 269.33 411.99 389.69 341.19"></polygon>
<polygon fill="#FFFFFF" points="262.64 386 362 327.72 311.56 39 179 74.35"></polygon>
</g>
<g id="c">
<g transform="translate(262.000000, 212.000000)" fill-rule="nonzero">
<path d="M126,100 C126,111.05 111.05,124 100,124 L60,124 C26.862915,124 0,97.137085 0,64 C0,30.86 32.86,0 66,0 L106,0 C117.045695,5.68434189e-14 126,8.954305 126,20 L126,100 Z" fill="#DC2089"></path>
<path d="M66,8 C37.281193,8 14,31.281193 14,60 C14,88.718807 37.281193,112 66,112 L106,112 C112.627417,112 118,106.627417 118,100 L118,20 C118,13.372583 112.627417,8 106,8 L66,8 Z" fill="#FFFFFF"></path>
</g>
</g>
<g id="w">
<g transform="translate(62.000000, 212.000000)">
<path d="M166,0 C177.045695,5.68434189e-14 186,8.954305 186,20 L186,60 C186,93.14 153.14,124 120,124 C109.469388,124.026355 99.1192339,121.266313 90,116 C71.4299823,126.721411 48.5499141,126.717746 29.9833318,115.990387 C11.4167495,105.263029 -0.0137530261,85.442808 1.42108547e-14,64 L1.42108547e-14,24 C1.42108547e-14,12.95 14.95,0 26,0 L166,0 Z" fill="#DC2089"></path>
<path d="M96,102.73 L100,105.05 C116.091436,114.340396 135.917277,114.338807 152.007224,105.045832 C168.097171,95.7528558 178.00596,78.58079 178,60 L178,20 C178,13.372583 172.627417,8 166,8 L26,8 C19.372583,8 14,13.372583 14,20 L14,60 C13.9940397,78.58079 23.9028291,95.7528558 39.9927761,105.045832 C56.0827231,114.338807 75.9085636,114.340396 92,105.05 L96,102.73 Z" fill="#FFFFFF"></path>
</g>
</g>
<g id="n">
<g transform="translate(262.000000, 70.000000)" fill-rule="nonzero">
<path d="M20,124 C8.954305,124 0,115.045695 0,104 L0,64 C0,30.86 32.86,0 66,0 C81.9129894,0 97.1742242,6.32141042 108.426407,17.5735931 C119.67859,28.8257758 126,44.0870106 126,60 L126,100 C126,111.05 111.05,124 100,124 L20,124 Z" fill="#3456C5"></path>
<path d="M66,8 C37.2948998,8.03306408 14.0330641,31.2948998 14,60 L14,100 C14,106.627417 19.372583,112 26,112 L106,112 C112.627417,112 118,106.627417 118,100 L118,60 C117.966936,31.2948998 94.7051002,8.03306408 66,8 Z" fill="#FFFFFF"></path>
</g>
</g>
<g id="d">
<g transform="translate(122.000000, 10.000000)">
<path d="M100,184 L60,184 C26.862915,184 2.84217094e-14,157.137085 2.84217094e-14,124 C2.84217094e-14,90.86 29.86,60 63,60 L80,60 L80,24 C80,13 94.95,0 106,0 C117.045695,1.42108547e-14 126,8.954305 126,20 L126,160 C126,172.25 112.75,184 100,184 Z" fill="#3456C5"></path>
<path d="M66,68 C37.281193,68 14,91.281193 14,120 C14,148.718807 37.281193,172 66,172 L106,172 C112.627417,172 118,166.627417 118,160 L118,20 C118,13.372583 112.627417,8 106,8 C99.372583,8 94,13.372583 94,20 L94,68 L66,68 Z" fill="#FFFFFF"></path>
</g>
</g>
<g id="l">
<g transform="translate(62.000000, 10.000000)">
<path d="M26,0 C37.045695,1.42108547e-14 46,8.954305 46,20 L46,160 C46,172.75 32.5,184 20,184 C8.954305,184 0,175.045695 0,164 L0,24 C-2.84217094e-14,14.83 14.67,0 26,0 Z" fill="#3456C5"></path>
<path d="M26,8 C19.372583,8 14,13.372583 14,20 L14,160 C14.0000003,166.627417 19.3725832,171.999999 26,171.999999 C32.6274168,171.999999 37.9999997,166.627417 38,160 L38,20 C38,13.372583 32.627417,8 26,8 Z" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
<script>
move(document.getElementById("shield"))
move(document.getElementById("l"))
move(document.getElementById("d"))
move(document.getElementById("n"))
move(document.getElementById("w"))
move(document.getElementById("c"))
function move(elem) {
var x = 0, xMulti = 2 + Math.random(), xVarience = 12 + Math.random() * 2
var y = 0, yMulti = 2 + Math.random(), yVarience = 12 + Math.random() * 2
setInterval(function () {
elem.style.transform = "translate(" + Math.sin(x++ / xVarience) * xMulti + "px," + Math.sin(y++ / yVarience) * yMulti + "px)"
}, 50)
}
</script>
</body>
</html>