-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
65 lines (64 loc) · 4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>google</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" id="GoogleLogo" x="0" y="0" viewBox="0 0 642 466"
enable-background="new 0 0 642 466" xml:space="preserve" width="642" height="466">
<defs>
<clipPath id="cut-off-gline">
<rect id="gLineMask" x="287.2" y="225.9" width="102.2" height="28.9"/>
</clipPath>
</defs>
<g id="circles">
<path id="blueG" class="circle" fill="none" stroke="#4285F4" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/>
<path id="greenG" class="circle" fill="none" stroke="#34A853" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/>
<path id="redG" class="circle" fill="none" stroke="#EA4335" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/>
<path id="redGb" class="circle" fill="none" stroke="#EA4335" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/>
<path id="yellowG" class="circle" fill="none" stroke="#FBBC05" stroke-width="28" d="M318 182.9c-32 0-57 30.8-57 57.5s20 57.5 57 57.5 57.9-26.7 57.9-57.5S350.2 182.9 318 182.9z"/>
</g>
<g id="helpers" display="none">
<circle display="inline" fill="none" stroke="#000000" stroke-miterlimit="10" cx="318" cy="240.4" r="71.5"/>
<circle display="inline" fill="none" stroke="#000000" cx="319" cy="240.4" r="43.6"/>
<line display="inline" fill="none" stroke="#000000" x1="318.6" y1="196.8" x2="318.6" y2="168.9"/>
<line display="inline" fill="none" stroke="#000000" x1="318.6" y1="311.8" x2="318.6" y2="283.9"/>
<line display="inline" fill="none" stroke="#000000" x1="362.4" y1="240.4" x2="389.4" y2="240.4"/>
<line display="inline" fill="none" stroke="#000000" x1="246.5" y1="240.4" x2="275.4" y2="240.4"/>
<g id="spacersW" display="inline">
<circle id="spacer5" fill="none" cx="447.2" cy="240.4" r="14.5"/>
<circle id="spacer4" fill="none" cx="389.4" cy="240.4" r="14.5"/>
<circle id="spacer3" fill="none" cx="331.6" cy="240.4" r="14.5"/>
<circle id="spacer2" fill="none" cx="273.8" cy="240.4" r="14.5"/>
<circle id="spacer1" fill="none" cx="216" cy="240.4" r="14.5"/>
</g>
<g id="spacersH" display="inline">
<circle id="spacer5_1_" fill="none" cx="331.6" cy="356" r="14.5"/>
<circle id="spacer4_1_" fill="none" cx="331.6" cy="298.2" r="14.5"/>
<circle id="spacer3_1_" fill="none" cx="331.6" cy="240.4" r="14.5"/>
<circle id="spacer2_1_" fill="none" cx="331.6" cy="182.5" r="14.5"/>
<circle id="spacer1_1_" fill="none" cx="331.6" cy="124.7" r="14.5"/>
</g>
<rect id="squareOutline" x="246.5" y="168.9" display="inline" fill="none" width="142.9" height="142.9"/>
</g>
<polygon id="gMask" fill="#ffffff" points="326.4 225.9 390.4 225.9 379.7 192 368.5 183.9 "/>
<g id="dots">
<circle class="dot dotBlue" fill="#4285F4" cx="244.9" cy="240.4" r="14.5"/>
<circle class="dot dotRed" fill="#EA4335" cx="302.7" cy="240.4" r="14.5"/>
<circle class="dot dotYellow" fill="#FBBC05" cx="360.5" cy="240.4" r="14.5"/>
<circle class="dot dotGreen" fill="#34A853" cx="418.3" cy="240.4" r="14.5"/>
</g>
<g id="gLineGroup" clip-path="url(#cut-off-gline)">
<path id="gLine" display="inline" fill="none" stroke="#4285F4" stroke-width="28.91" d="M319 240.4h68"/>
<path id="gLineAnim" fill="#4285F4" d="M388.7 254.8H319v-28.9h69.7c0 0 13.6 1.3 13.6 14.5C402.3 253.5 388.7 254.8 388.7 254.8z"/>
</g>
</svg>
<div id="controls">
<div id="slider"></div>
</div>
<script src="google.js"></script>
</body>
</html>