-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (132 loc) · 5.29 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="kibibit's animated logo experiment">
<meta property="og:title" content="kibibit - logo animation">
<meta property="og:image" content="http://kibibit.io/logo-demo/site-preview.png">
<meta property="og:description" content="kibibit's animated logo experiment">
<meta property="og:url" content="http://kibibit.io/logo-demo" />
<meta property="og:site_name" content="kibibit.io" />
<meta name="theme-color" content="#212121" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>kibibit - logo animation</title>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Fredoka+One|Righteous'>
<link rel="stylesheet" href="css/kb-logo.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui">
<div class="toggler" id="loader">loader animation</div>
<div class="toggler" id="squiggly">squiggly loader</div>
<div class="toggler" id="squiggly2">always squiggly</div>
<div class="toggler" id="kt">always k & t</div>
<div class="toggler" id="purple">toggle purple</div>
<div class="toggler" id="colors">toggle colors</div>
<div class="toggler" id="k1b1b0t">k1b1b0t</div>
</div>
<div class="ui-toggle toggler" id="ui-toggle">UI</div>
<div class="main">
<div id="logo" class="kb-logo"><span class="letter">k</span>
<!--
-->
<div class="shape-animation shape-one to-red" style="--animation-order: 1;">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div>
<!--
-->
<div class="shape-animation shape-zero" style="--animation-order: 2;">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div>
<!--
-->
<div class="shape-animation shape-one to-blue middle" style="--animation-order: 3;">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div>
<!--
-->
<div class="shape-animation shape-zero" style="--animation-order: 4;">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div>
<!--
-->
<div class="shape-animation shape-one to-yellow" style="--animation-order: 5;">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div><span class="letter">t</span>
<div class="k1b1b0t-mouth-container">
<div class="k1b1b0t-mouth">[||||]</div>
</div>
</div>
<div id="kb-punch" class="visible" style="color: white; font-size: 26px; font-family: 'Righteous', cursive; flex-shrink: 0; width: 100%; text-align: center;margin-top: 30px;">
<div id="logo-little" class="kb-logo shape-active"><span class="letter">k</span>
<!--
-->
<div class="shape-animation shape-one to-red">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div>
<!--
-->
<div class="shape-animation shape-zero">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div>
<!--
-->
<div class="shape-animation shape-one to-blue middle">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div>
<!--
-->
<div class="shape-animation shape-zero">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div>
<!--
-->
<div class="shape-animation shape-one to-yellow">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
</div><span class="letter">t</span>
<div class="k1b1b0t-mouth-container">
<div class="k1b1b0t-mouth">[||||]</div>
</div>
</div>'s new thang
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="kg-hidden">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
</filter>
</defs>
</svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>