├── README.md
├── logo.png
├── favicon.ico
├── code-editor.png
├── site-preview.png
├── css
    ├── style.css
    └── kb-logo.css
├── js
    └── index.js
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # kibibit-log-demo
2 | test the kibibt logo animation
3 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kibibit/logo-demo/master/logo.png


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kibibit/logo-demo/master/favicon.ico


--------------------------------------------------------------------------------
/code-editor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kibibit/logo-demo/master/code-editor.png


--------------------------------------------------------------------------------
/site-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kibibit/logo-demo/master/site-preview.png


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #212121;
 3 |   display: flex;
 4 |   flex-direction: row;
 5 |   font-size: 16px;
 6 |   height: 100vh;
 7 |   overflow: hidden;
 8 |   width: 100vw;
 9 | 
10 |   align-items: start;
11 |   flex-wrap: wrap;
12 |   justify-content: center;
13 | }
14 | 
15 | .main {
16 |   display: flex;
17 |   flex-direction: column;
18 |   font-size: 30vw;
19 |   height: 100vh;
20 |   pointer-events: none;
21 |   width: 100vw;
22 | 
23 |   align-items: center;
24 |   justify-content: center;
25 | }
26 | 
27 | .ui-toggle {
28 |   bottom: 0;
29 |   left: 0;
30 |   position: fixed;
31 | }
32 | 
33 | .ui {
34 |   display: flex;
35 |   left: 0;
36 |   opacity: 0;
37 |   pointer-events: none;
38 |   position: fixed;
39 |   right: 0;
40 |   top: 0;
41 |   transition: all 250ms;
42 | 
43 |   flex-wrap: wrap;
44 |   justify-content: center;
45 | }
46 | .ui.visible {
47 |   opacity: 1;
48 |   pointer-events: auto;
49 | }
50 | 
51 | .toggler {
52 |   background: #E31B36;
53 |   border-radius: 3px;
54 |   box-shadow: 9px 9px 0 1px rgba(0, 0, 0, 0.75);
55 |   color: white;
56 |   cursor: pointer;
57 |   font-family: 'Righteous', cursive;
58 |   font-size: 0.7rem;
59 |   margin: 10px;
60 |   padding: 10px;
61 |   transition: all 250ms;
62 | }
63 | .toggler.toggler-active {
64 |   background: #00A2C9;
65 | }
66 | 
67 | .kg-hidden {
68 |   display: none;
69 | }
70 | 


--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
  1 | var ELEMENTS = {
  2 |     $logo: $('#logo'),
  3 |     $littleLogo: $('#logo-little'),
  4 |     $togglerColors: $('.toggler#colors'),
  5 |     $togglerKT: $('.toggler#kt'),
  6 |     $togglerSquigglyLoader: $('.toggler#squiggly'),
  7 |     $togglerAlwaysSquiggly: $('.toggler#squiggly2'),
  8 |     $togglerLoaderAnimation: $('.toggler#loader'),
  9 |     $togglerPurple: $('.toggler#purple'),
 10 |     $togglerk1b1b0t: $('.toggler#k1b1b0t'),
 11 |     $togglerUI: $('.toggler#ui-toggle'),
 12 |     $UI: $('.ui'),
 13 |     $PUNCH: $('#kb-punch')
 14 | };
 15 | 
 16 | var CLASSES = {
 17 |     onlyWhite: 'no-extra-colors',
 18 |     alwaysKT: 'always-k-t',
 19 |     squiggly: 'squiggly',
 20 |     alwaysSquiggly: 'always-squiggly',
 21 |     loader: 'loader',
 22 |     turnToName: 'full-logo',
 23 |     activeButton: 'toggler-active',
 24 |     purpleText: 'purple',
 25 |     k1b1b0t: 'k1b1b0t',
 26 |     show: 'visible'
 27 | };
 28 | 
 29 | $( document ).ready(function() {
 30 |   let searchParams = new URLSearchParams(window.location.search);
 31 |   const customPunch = searchParams.get('punch');
 32 |     const hideBtns = searchParams.get('showButtons') === 'false';
 33 |   if (customPunch) {
 34 |       ELEMENTS.$PUNCH.text(customPunch);
 35 |   }
 36 |     
 37 |     if (hideBtns) {
 38 |         ELEMENTS.$togglerUI.hide();
 39 |     }
 40 | });
 41 | 
 42 | var refreshIntervalId = changeBetween();
 43 | var loaderRefreshIntervalId = null;
 44 | changeBetween2();
 45 | 
 46 | ELEMENTS.$togglerColors.click(function() {
 47 |     ELEMENTS.$logo.toggleClass(CLASSES.onlyWhite);
 48 |     ELEMENTS.$togglerColors.toggleClass(CLASSES.activeButton);
 49 | });
 50 | 
 51 | ELEMENTS.$togglerKT.click(function() {
 52 |     ELEMENTS.$logo.toggleClass(CLASSES.alwaysKT);
 53 |     ELEMENTS.$togglerKT.toggleClass(CLASSES.activeButton);
 54 | });
 55 | 
 56 | ELEMENTS.$togglerSquigglyLoader.click(function() {
 57 |     ELEMENTS.$logo.toggleClass(CLASSES.squiggly);
 58 |     ELEMENTS.$togglerSquigglyLoader.toggleClass(CLASSES.activeButton);
 59 | });
 60 | 
 61 | ELEMENTS.$togglerAlwaysSquiggly.click(function() {
 62 |     ELEMENTS.$logo.toggleClass(CLASSES.alwaysSquiggly);
 63 |     ELEMENTS.$togglerAlwaysSquiggly.toggleClass(CLASSES.activeButton);
 64 | });
 65 | 
 66 | ELEMENTS.$togglerPurple.click(function() {
 67 |     ELEMENTS.$logo.toggleClass(CLASSES.purpleText);
 68 |     ELEMENTS.$togglerPurple.toggleClass(CLASSES.activeButton);
 69 | });
 70 | 
 71 | ELEMENTS.$togglerUI.click(function() {
 72 |     ELEMENTS.$UI.toggleClass(CLASSES.show);
 73 |     ELEMENTS.$togglerUI.toggleClass(CLASSES.activeButton);
 74 | });
 75 | 
 76 | ELEMENTS.$togglerk1b1b0t.click(function() {
 77 |     if (refreshIntervalId) {
 78 |         clearInterval(refreshIntervalId);
 79 |         refreshIntervalId = null;
 80 |     } else {
 81 |         refreshIntervalId = changeBetween();
 82 |     }
 83 | 
 84 |     toggleK1b1b0t(ELEMENTS.$logo);
 85 |     ELEMENTS.$togglerk1b1b0t.toggleClass(CLASSES.activeButton);
 86 | })
 87 | 
 88 | ELEMENTS.$togglerLoaderAnimation.click(function() {
 89 |     if (refreshIntervalId) {
 90 |         clearInterval(refreshIntervalId);
 91 |         refreshIntervalId = null;
 92 |         ELEMENTS.$logo.addClass(CLASSES.loader);
 93 |         ELEMENTS.$PUNCH.removeClass(CLASSES.show);
 94 |         // loaderRefreshIntervalId = changeBits();
 95 |     } else {
 96 |         clearInterval(loaderRefreshIntervalId);
 97 |         loaderRefreshIntervalId = null;
 98 |         refreshIntervalId = changeBetween();
 99 |         ELEMENTS.$logo.removeClass(CLASSES.loader);
100 |         ELEMENTS.$PUNCH.addClass(CLASSES.show);
101 |     }
102 |     ELEMENTS.$logo.removeClass(CLASSES.turnToName);
103 |     ELEMENTS.$togglerLoaderAnimation.toggleClass(CLASSES.activeButton);
104 | });
105 | 
106 | function changeBetween() {
107 |     ELEMENTS.$logo.removeClass(CLASSES.turnToName);
108 | 
109 |     return setInterval(function() {
110 |         ELEMENTS.$logo.toggleClass(CLASSES.turnToName);
111 |     }, 4000);
112 | }
113 | 
114 | function changeBits() {
115 |     return setInterval(function() {
116 |         const allOnes = ELEMENTS.$logo.find('.shape-one');
117 |         const allZeros = ELEMENTS.$logo.find('.shape-zero');
118 | 
119 |         // change ones to zeros
120 |         allOnes.removeClass('shape-one').addClass('shape-zero');
121 | 
122 |         // change zeros to ones
123 |         allZeros.removeClass('shape-zero').addClass('shape-one');
124 |     }, 250);
125 | }
126 | 
127 | function changeBetween2() {
128 |     ELEMENTS.$littleLogo.removeClass('CLASSES.k1b1b0t');
129 | 
130 |     return setInterval(function() {
131 |         toggleK1b1b0t(ELEMENTS.$littleLogo);
132 |     }, 10000);
133 | }
134 | 
135 | function toggleK1b1b0t(element) {
136 |     if (element.hasClass(CLASSES.k1b1b0t)) {
137 |             element
138 |                 .removeClass(CLASSES.k1b1b0t)
139 |                 .delay( 800 )
140 |                 .queue(function(next) {
141 |                 $(this).addClass(CLASSES.turnToName);
142 |                 next();
143 |             });
144 |         } else {
145 |             element
146 |                 .removeClass(CLASSES.turnToName)
147 |                 .delay( 800 )
148 |                 .queue(function(next) {
149 |                 $(this).addClass(CLASSES.k1b1b0t);
150 |                 next();
151 |             });
152 |         }
153 | }
154 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |   <meta name="description" content="kibibit's animated logo experiment">
  8 |   <meta property="og:title" content="kibibit - logo animation">
  9 |   <meta property="og:image" content="http://kibibit.io/logo-demo/site-preview.png">
 10 |   <meta property="og:description" content="kibibit's animated logo experiment">
 11 |   <meta property="og:url" content="http://kibibit.io/logo-demo" />
 12 |   <meta property="og:site_name" content="kibibit.io" />
 13 |   <meta name="theme-color" content="#212121" />
 14 |   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
 15 |   <link rel="icon" href="favicon.ico" type="image/x-icon">
 16 |   <title>kibibit - logo animation</title>
 17 | 
 18 | 
 19 |   <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Fredoka+One|Righteous'>
 20 |   <link rel="stylesheet" href="css/kb-logo.css">
 21 |   <link rel="stylesheet" href="css/style.css">
 22 | 
 23 | 
 24 | </head>
 25 | 
 26 | <body>
 27 |   <div class="ui">
 28 |     <div class="toggler" id="loader">loader animation</div>
 29 |     <div class="toggler" id="squiggly">squiggly loader</div>
 30 |     <div class="toggler" id="squiggly2">always squiggly</div>
 31 |     <div class="toggler" id="kt">always k & t</div>
 32 |     <div class="toggler" id="purple">toggle purple</div>
 33 |     <div class="toggler" id="colors">toggle colors</div>
 34 |     <div class="toggler" id="k1b1b0t">k1b1b0t</div>
 35 |   </div>
 36 |   <div class="ui-toggle toggler" id="ui-toggle">UI</div>
 37 |   <div class="main">
 38 |     <div id="logo" class="kb-logo"><span class="letter">k</span>
 39 |       <!--
 40 | -->
 41 |       <div class="shape-animation shape-one to-red" style="--animation-order: 1;">
 42 |         <div class="shape shape1"></div>
 43 |         <div class="shape shape2"></div>
 44 |       </div>
 45 |       <!--
 46 | -->
 47 |       <div class="shape-animation shape-zero" style="--animation-order: 2;">
 48 |         <div class="shape shape1"></div>
 49 |         <div class="shape shape2"></div>
 50 |       </div>
 51 |       <!--
 52 | -->
 53 |       <div class="shape-animation shape-one to-blue middle" style="--animation-order: 3;">
 54 |         <div class="shape shape1"></div>
 55 |         <div class="shape shape2"></div>
 56 |       </div>
 57 |       <!--
 58 | -->
 59 |       <div class="shape-animation shape-zero" style="--animation-order: 4;">
 60 |         <div class="shape shape1"></div>
 61 |         <div class="shape shape2"></div>
 62 |       </div>
 63 |       <!--
 64 | -->
 65 |       <div class="shape-animation shape-one to-yellow" style="--animation-order: 5;">
 66 |         <div class="shape shape1"></div>
 67 |         <div class="shape shape2"></div>
 68 |       </div><span class="letter">t</span>
 69 |       <div class="k1b1b0t-mouth-container">
 70 |         <div class="k1b1b0t-mouth">[||||]</div>
 71 |       </div>
 72 |     </div>
 73 |     <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;">
 74 |       <div id="logo-little" class="kb-logo shape-active"><span class="letter">k</span>
 75 |         <!--
 76 | -->
 77 |         <div class="shape-animation shape-one to-red">
 78 |           <div class="shape shape1"></div>
 79 |           <div class="shape shape2"></div>
 80 |         </div>
 81 |         <!--
 82 | -->
 83 |         <div class="shape-animation shape-zero">
 84 |           <div class="shape shape1"></div>
 85 |           <div class="shape shape2"></div>
 86 |         </div>
 87 |         <!--
 88 | -->
 89 |         <div class="shape-animation shape-one to-blue middle">
 90 |           <div class="shape shape1"></div>
 91 |           <div class="shape shape2"></div>
 92 |         </div>
 93 |         <!--
 94 | -->
 95 |         <div class="shape-animation shape-zero">
 96 |           <div class="shape shape1"></div>
 97 |           <div class="shape shape2"></div>
 98 |         </div>
 99 |         <!--
100 | -->
101 |         <div class="shape-animation shape-one to-yellow">
102 |           <div class="shape shape1"></div>
103 |           <div class="shape shape2"></div>
104 |         </div><span class="letter">t</span>
105 |         <div class="k1b1b0t-mouth-container">
106 |           <div class="k1b1b0t-mouth">[||||]</div>
107 |         </div>
108 |       </div>'s new thang
109 |     </div>
110 | 
111 |   </div>
112 | 
113 |   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="kg-hidden">
114 |     <defs>
115 | 
116 | 
117 |         <filter id="squiggly-0">
118 |             <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
119 |             <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
120 |         </filter>
121 |         <filter id="squiggly-1">
122 |             <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
123 |             <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
124 |         </filter>
125 | 
126 |         <filter id="squiggly-2">
127 |             <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
128 |             <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
129 |         </filter>
130 |         <filter id="squiggly-3">
131 |             <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
132 |             <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
133 |         </filter>
134 | 
135 |         <filter id="squiggly-4">
136 |             <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
137 |             <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
138 |         </filter>
139 |     </defs>
140 | </svg>
141 | 
142 |   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
143 | 
144 |   <script src="js/index.js"></script>
145 | 
146 | </body>
147 | 
148 | </html>
149 | 


--------------------------------------------------------------------------------
/css/kb-logo.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css?family=Righteous");
  2 | .kb-logo {
  3 |   white-space: nowrap;
  4 |   display: inline-flex;
  5 |   justify-content: center;
  6 |   align-items: center;
  7 |   /* align-items: end; */
  8 |   position: relative;
  9 |   font-size: 1em;
 10 |   line-height: 1em;
 11 |   font-family: "Righteous", cursive;
 12 |   color: white;
 13 |   transition: all 500ms;
 14 |   box-sizing: content-box;
 15 | }
 16 | #kb-punch {
 17 |   opacity: 0;
 18 |   transition: all 500ms;
 19 | }
 20 | #kb-punch.visible {
 21 |   opacity: 1;
 22 | }
 23 | .kb-logo * {
 24 |   box-sizing: content-box;
 25 |   color: white;
 26 | }
 27 | .kb-logo.always-k-t .letter {
 28 |   opacity: 1 !important;
 29 | }
 30 | .kb-logo.always-squiggly {
 31 |   -webkit-animation: squiggly-animation-filter 0.34s linear infinite;
 32 |   animation: squiggly-animation-filter 0.34s linear infinite;
 33 | }
 34 | .kb-logo.purple {
 35 |   color: #9e52cb !important;
 36 | }
 37 | .kb-logo.no-extra-colors .shape-animation.shape-zero .shape2 {
 38 |   border-color: currentColor !important;
 39 |   background: transparent !important;
 40 | }
 41 | .kb-logo.no-extra-colors .shape {
 42 |   background: currentColor !important;
 43 | }
 44 | .kb-logo.loader, .kb-logo.kb-loader {
 45 |   /* animation: change-font-size 1s linear 500ms infinite; */
 46 |   /* font-size: 21vw; */
 47 | }
 48 | .kb-logo.loader.squiggly, .kb-logo.loader.always-squiggly, .kb-logo.kb-loader.squiggly, .kb-logo.kb-loader.always-squiggly {
 49 |   animation: heigher 1s linear 500ms infinite, squiggly-animation-filter 0.34s linear infinite;
 50 |   /* font-size: 21vw; */
 51 | }
 52 | 
 53 | .kb-logo.loader .shape-animation {
 54 |   animation: heigher 1s cubic-bezier(.17,.67,.83,.67) infinite calc(var(--animation-order) * 100ms);
 55 | }
 56 | 
 57 | .kb-logo.loader .shape-animation.shape-zero .shape2 {
 58 |   height: 55%;
 59 | }
 60 | 
 61 | 
 62 | .kb-logo.loader .shape-animation,
 63 | .kb-logo.loader .shape-animation .shape1,
 64 | .kb-logo.loader .shape-animation .shape2, .kb-logo.kb-loader .shape-animation .shape1,
 65 | .kb-logo.kb-loader .shape-animation .shape2 {
 66 |   transition: none;
 67 | }
 68 | .kb-logo.full-logo .shape-animation.to-red .shape {
 69 |   background: #E31B36;
 70 | }
 71 | .kb-logo.full-logo .shape-animation.to-blue .shape {
 72 |   background: #00A2C9;
 73 | }
 74 | .kb-logo.full-logo .shape-animation.to-yellow .shape {
 75 |   background: #EEB146;
 76 | }
 77 | .kb-logo.full-logo .shape-animation.shape-zero .shape1 {
 78 |   height: 65%;
 79 | }
 80 | .kb-logo.full-logo .shape-animation.shape-zero .shape2 {
 81 |   height: 0.2625em;
 82 | }
 83 | .kb-logo.full-logo .shape-animation.shape-one .shape1 {
 84 |   width: 0.1875em;
 85 |   height: 0.1875em;
 86 |   top: 0;
 87 |   left: -0.025em;
 88 |   right: -0.025em;
 89 |   border-radius: 50%;
 90 | }
 91 | .kb-logo.full-logo .shape-animation.shape-one .shape2 {
 92 |   height: 70%;
 93 | }
 94 | .kb-logo.full-logo .letter {
 95 |   opacity: 1;
 96 | }
 97 | .kb-logo.k1b1b0t {
 98 |   transform: translate(0, -0.5em);
 99 | }
100 | .kb-logo.k1b1b0t .shape-animation.shape-zero .shape2 {
101 |   bottom: 0.1em;
102 |   height: 0.1em;
103 |   animation: blink 2s infinite 250ms;
104 | }
105 | .kb-logo.k1b1b0t .shape-one:first-of-type .shape1 {
106 |   left: 0;
107 |   right: -0.06875em;
108 | }
109 | .kb-logo.k1b1b0t .shape-one.middle .shape1 {
110 |   right: -0.06875em;
111 | }
112 | .kb-logo.k1b1b0t .k1b1b0t-mouth-container .k1b1b0t-mouth {
113 |   height: 100%;
114 | }
115 | .kb-logo .letter {
116 |   opacity: 0;
117 |   transition: all 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
118 | }
119 | .kb-logo .k1b1b0t-mouth-container {
120 |   margin-left: 0.11em;
121 |   font-size: 0.5em;
122 |   overflow: hidden;
123 |   top: 100%;
124 |   position: absolute;
125 |   width: 80%;
126 |   display: flex;
127 |   justify-content: center;
128 |   align-items: center;
129 |   height: 1em;
130 | }
131 | .kb-logo .k1b1b0t-mouth-container .k1b1b0t-mouth {
132 |   display: flex;
133 |   align-items: center;
134 |   justify-content: center;
135 |   overflow: hidden;
136 |   height: 0;
137 |   transition: all 500ms ease 300ms;
138 | }
139 | .kb-logo .shape-animation {
140 |   display: inline-block;
141 |   position: relative;
142 |   transition: all 250ms ease-in-out;
143 | }
144 | .kb-logo .shape-animation.shape-zero {
145 |   margin: 0 0.03125em;
146 |   display: inline-block;
147 |   height: 0.75em;
148 |   width: 0.5625em;
149 |   position: relative;
150 | }
151 | .kb-logo .shape-animation.shape-zero .shape1 {
152 |   width: 0.14375em;
153 |   height: 0;
154 |   background: currentColor;
155 |   z-index: 500;
156 |   position: absolute;
157 |   bottom: 35%;
158 |   left: 0;
159 | }
160 | .kb-logo .shape-animation.shape-zero .shape2 {
161 |   width: 0.25em;
162 |   height: 0.40625em;
163 |   background: transparent;
164 |   position: absolute;
165 |   bottom: 0;
166 |   left: 0;
167 |   border-radius: 0.28125em;
168 |   border: 0.15em solid currentColor;
169 | }
170 | .kb-logo .shape-animation.shape-one {
171 |   margin: 0 0.0625em;
172 |   display: inline-block;
173 |   height: 0.7625em;
174 |   width: 0.14375em;
175 | }
176 | .kb-logo .shape-animation.shape-one .shape1 {
177 |   background: currentColor;
178 |   position: absolute;
179 |   top: 0.05625em;
180 |   right: 0;
181 |   height: 0.15em;
182 |   left: -0.06875em;
183 | }
184 | .kb-logo .shape-animation.shape-one .shape2 {
185 |   width: 0.14375em;
186 |   height: 92.5%;
187 |   background: currentColor;
188 |   position: absolute;
189 |   bottom: 0;
190 |   left: 0;
191 | }
192 | .kb-logo .shape-animation .shape1,
193 | .kb-logo .shape-animation .shape2 {
194 |   transition: all 250ms cubic-bezier(0.68, -0.7, 0.265, 1.7), background 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
195 | }
196 | 
197 | @keyframes squiggly-animation-filter {
198 |   0% {
199 |     -webkit-filter: url("#squiggly-0");
200 |     filter: url("#squiggly-0");
201 |   }
202 |   25% {
203 |     -webkit-filter: url("#squiggly-1");
204 |     filter: url("#squiggly-1");
205 |   }
206 |   50% {
207 |     -webkit-filter: url("#squiggly-2");
208 |     filter: url("#squiggly-2");
209 |   }
210 |   75% {
211 |     -webkit-filter: url("#squiggly-3");
212 |     filter: url("#squiggly-3");
213 |   }
214 |   100% {
215 |     -webkit-filter: url("#squiggly-4");
216 |     filter: url("#squiggly-4");
217 |   }
218 | }
219 | @keyframes change-font-size {
220 |   0% {
221 |     font-size: 21vw;
222 |   }
223 |   10% {
224 |     font-size: 21vw;
225 |   }
226 |   40% {
227 |     font-size: 12vw;
228 |   }
229 |   60% {
230 |     font-size: 12vw;
231 |   }
232 |   100% {
233 |     font-size: 21vw;
234 |   }
235 | }
236 | @keyframes blink {
237 |   0% {
238 |     height: 0.1em;
239 |   }
240 |   45% {
241 |     height: 0.1em;
242 |   }
243 |   50% {
244 |     height: 0;
245 |   }
246 |   55% {
247 |     height: 0.1em;
248 |   }
249 |   100% {
250 |     height: 0.1em;
251 |   }
252 | }
253 | 
254 | @keyframes heigher {
255 |   0% {
256 |     height: 0.7625em;
257 |   }
258 |   33% {
259 |     height: 0.65em;
260 |   }
261 |   66% {
262 |     height: 0.9em;
263 |   }
264 |   100% {
265 |     height: 0.7625em;
266 |   }
267 | }


--------------------------------------------------------------------------------