├── .gitignore ├── package.json ├── gulpfile.js ├── README.md ├── kb-logo.css └── src └── kb-logo.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kibibit-logo", 3 | "version": "1.0.0", 4 | "description": "all css needed for kibibit's logo animations", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "prepare": "./node_modules/.bin/gulp sass", 9 | "watch": "./node_modules/.bin/gulp" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/Kibibit/kibibit-logo.git" 14 | }, 15 | "author": "neilkalman@gmail.com", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/Kibibit/kibibit-logo/issues" 19 | }, 20 | "homepage": "https://github.com/Kibibit/kibibit-logo#readme", 21 | "devDependencies": { 22 | "gulp": "^3.9.1", 23 | "gulp-cssnano": "^2.1.2", 24 | "gulp-header": "^1.8.9", 25 | "gulp-sass": "^3.1.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var sass = require('gulp-sass'); 5 | var cssnano = require('gulp-cssnano'); 6 | var header = require('gulp-header'); 7 | var pkg = require('./package.json'); 8 | 9 | var banner = ['/**', 10 | ' * <%= pkg.name %> - <%= pkg.description %>', 11 | ' * @version v<%= pkg.version %>', 12 | ' * @link <%= pkg.homepage %>', 13 | ' * @license <%= pkg.license %>', 14 | ' * @owner <%= pkg.author %>', 15 | ' */', 16 | ''].join('\n'); 17 | 18 | gulp.task('sass', function () { 19 | return gulp.src('./src/**/*.scss') 20 | .pipe(sass().on('error', sass.logError)) 21 | .pipe(cssnano()) 22 | .pipe(header(banner, { pkg : pkg } )) 23 | .pipe(gulp.dest('./')); 24 | }); 25 | 26 | gulp.task('sass:watch', function () { 27 | gulp.watch('./src/**/*.scss', ['sass']); 28 | }); 29 | 30 | gulp.task('default', ['sass:watch']); 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # kibibit-logo 2 | 3 | logo css to add to projects. 4 | 5 | ## Setup 6 | add the css file as a dependency 7 | ```html 8 | 9 | ``` 10 | 11 | ## How to use 12 | 13 | Basic HTML structure: 14 | 15 | ```html 16 | 48 | ``` 49 | The inner HTML inside the `kb-logo` should work as is. you can create a 50 | component to add this html snippet (for example: ``) 51 | 52 | ### Modifier classes 53 | **NORMAL STATE:** logo is displayed as **10101** 54 | - `always-k-t` - always show k & t letters (even in loader and 10101) 55 | - `always-squiggly` - add drawn animation to the logo (needs an additional **svg definition**) 56 | - `squiggly` - make only the loader squiggly (needs an additional **svg definition**) 57 | - `purple` - make basic text purple (you can simply change the white text to any color with the `color` css attribute on `kb-logo`) 58 | - `no-extra-colors` - remove the colors of the 3 i's. only show the basic text colors 59 | - `loader` - change logo to loader animation 60 | - `full-logo` - show the actual named logo of `kibibit` 61 | - `k1b1b0t` - transform the logo into k1b1b0t 62 | -------------------------------------------------------------------------------- /kb-logo.css: -------------------------------------------------------------------------------- 1 | /** 2 | * kibibit-logo - all css needed for kibibit's logo animations 3 | * @version v1.0.0 4 | * @link https://github.com/Kibibit/kibibit-logo#readme 5 | * @license ISC 6 | * @owner neilkalman@gmail.com 7 | */ 8 | @import url("https://fonts.googleapis.com/css?family=Righteous");.kb-logo{white-space:nowrap;display:inline-flex;justify-content:center;align-items:center;position:relative;font-size:1em;line-height:1em;font-family:Righteous,cursive;color:#fff;transition:all .5s}.kb-logo,.kb-logo *{box-sizing:content-box}.kb-logo.always-k-t .letter{opacity:1!important}.kb-logo.always-squiggly{animation:a .34s linear infinite}.kb-logo.purple{color:#9e52cb!important}.kb-logo.no-extra-colors .shape-animation.shape-zero .shape2{border-color:currentColor!important;background:transparent!important}.kb-logo.no-extra-colors .shape{background:currentColor!important}.kb-logo.kb-loader,.kb-logo.loader{animation:b 1s linear .5s infinite;font-size:21vw}.kb-logo.kb-loader.always-squiggly,.kb-logo.kb-loader.squiggly,.kb-logo.loader.always-squiggly,.kb-logo.loader.squiggly{animation:b 1s linear .5s infinite,a .34s linear infinite;font-size:21vw}.kb-logo.kb-loader .shape-animation .shape1,.kb-logo.kb-loader .shape-animation .shape2,.kb-logo.loader .shape-animation .shape1,.kb-logo.loader .shape-animation .shape2{transition:all .25s ease-in-out,background .25s ease-in-out}.kb-logo.full-logo .shape-animation.to-red .shape{background:#e31b36}.kb-logo.full-logo .shape-animation.to-blue .shape{background:#00a2c9}.kb-logo.full-logo .shape-animation.to-yellow .shape{background:#eeb146}.kb-logo.full-logo .shape-animation.shape-zero .shape1{height:65%}.kb-logo.full-logo .shape-animation.shape-zero .shape2{height:.2625em}.kb-logo.full-logo .shape-animation.shape-one .shape1{width:.1875em;height:.1875em;top:0;left:-.025em;right:-.025em;border-radius:50%}.kb-logo.full-logo .shape-animation.shape-one .shape2{height:70%}.kb-logo.full-logo .letter{opacity:1}.kb-logo.k1b1b0t{transform:translateY(-.5em)}.kb-logo.k1b1b0t .shape-animation.shape-zero .shape2{bottom:.1em;height:.1em;animation:c 2s infinite .25s}.kb-logo.k1b1b0t .shape-one:first-of-type .shape1{left:0;right:-.06875em}.kb-logo.k1b1b0t .shape-one.middle .shape1{right:-.06875em}.kb-logo.k1b1b0t .k1b1b0t-mouth-container .k1b1b0t-mouth{height:100%}.kb-logo .letter{opacity:0;transition:all .25s cubic-bezier(.895,.03,.685,.22)}.kb-logo .k1b1b0t-mouth-container{margin-left:.11em;font-size:.5em;overflow:hidden;top:100%;position:absolute;width:80%;display:flex;justify-content:center;align-items:center;height:1em}.kb-logo .k1b1b0t-mouth-container .k1b1b0t-mouth{display:flex;align-items:center;justify-content:center;overflow:hidden;height:0;transition:all .5s ease .3s}.kb-logo .shape-animation{display:inline-block;position:relative;transition:all .25s ease-in-out}.kb-logo .shape-animation.shape-zero{margin:0 .03125em;display:inline-block;height:.75em;width:.5625em;position:relative}.kb-logo .shape-animation.shape-zero .shape1{width:.14375em;height:0;background:currentColor;z-index:1;position:absolute;bottom:35%;left:0}.kb-logo .shape-animation.shape-zero .shape2{width:.25em;height:.40625em;background:transparent;position:absolute;bottom:0;left:0;border-radius:.28125em;border:.15em solid currentColor}.kb-logo .shape-animation.shape-one{margin:0 .0625em;display:inline-block;height:.7625em;width:.14375em}.kb-logo .shape-animation.shape-one .shape1{background:currentColor;position:absolute;top:.05625em;right:0;height:.15em;left:-.06875em}.kb-logo .shape-animation.shape-one .shape2{width:.14375em;height:92.5%;background:currentColor;position:absolute;bottom:0;left:0}.kb-logo .shape-animation .shape1,.kb-logo .shape-animation .shape2{transition:all .25s cubic-bezier(.68,-.7,.265,1.7),background .25s cubic-bezier(.895,.03,.685,.22)}@keyframes a{0%{filter:url(#squiggly-0)}25%{filter:url(#squiggly-1)}50%{filter:url(#squiggly-2)}75%{filter:url(#squiggly-3)}to{filter:url(#squiggly-4)}}@keyframes b{0%{font-size:21vw}10%{font-size:21vw}40%{font-size:12vw}60%{font-size:12vw}to{font-size:21vw}}@keyframes c{0%{height:.1em}45%{height:.1em}50%{height:0}55%{height:.1em}to{height:.1em}} -------------------------------------------------------------------------------- /src/kb-logo.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Righteous'); 2 | 3 | $font-size: 30vw; 4 | $font-anim-1: $font-size * 0.7; 5 | $font-anim-2: $font-size * 0.4; 6 | // ELASTIC 7 | $shape-easing-elastic-1: cubic-bezier(0.68, -0.70, 0.265, 1.70); 8 | $shape-easing-elastic-2: cubic-bezier(0.895, 0.03, 0.685, 0.22); 9 | 10 | $squiggly-animation-length: 0.34s; 11 | $change-font-size-length: 1s; 12 | $logo-state-transition-length: 250ms; 13 | 14 | // HOW TO USE: 15 | // By default, it works with white text + colors 16 | // OPTIONS: 17 | // DEFAULT - logo is in the state `10101` 18 | // loader - goes to loader animation (remove active class) 19 | // shape-active - turn to the name 'kibibit' 20 | // change `font-size` to change size (treat as if this is text) 21 | // change `color` to effect the logo main color 22 | // no-extra-colors - remove colors of `i`s 23 | // always-k-t - shows k & t letters even when 10101 24 | // purple - main color is purple (bright background option) 25 | // squiggly - make loader animation squiggly 26 | // always-squiggly - make entire logo squiggly 27 | .kb-logo { 28 | white-space: nowrap; 29 | display: inline-flex; 30 | justify-content: center; 31 | align-items: center; 32 | position: relative; 33 | font-size: 1em; 34 | line-height: 1em; 35 | font-family: 'Righteous', cursive; 36 | color: white; 37 | transition: all 500ms; 38 | box-sizing: content-box; 39 | 40 | * { 41 | box-sizing: content-box; 42 | color: white; 43 | } 44 | 45 | // MODIFIERS 46 | 47 | &.always-k-t .letter { 48 | opacity: 1 !important; 49 | } 50 | 51 | &.always-squiggly { 52 | -webkit-animation: squiggly-animation-filter $squiggly-animation-length linear infinite; 53 | animation: squiggly-animation-filter $squiggly-animation-length linear infinite; 54 | } 55 | 56 | &.purple { 57 | color: lighten(#682A8D, 20%) !important; 58 | } 59 | 60 | &.no-extra-colors { 61 | .shape-animation.shape-zero .shape2 { 62 | border-color: currentColor !important; 63 | background: transparent !important; 64 | } 65 | 66 | .shape { 67 | background: currentColor !important; 68 | } 69 | } 70 | 71 | // 10101 with size animation 72 | &.loader, 73 | &.kb-loader { 74 | animation: change-font-size $change-font-size-length linear 500ms infinite; 75 | font-size: 21vw; 76 | 77 | &.squiggly, 78 | &.always-squiggly { 79 | animation: change-font-size $change-font-size-length linear 500ms infinite, squiggly-animation-filter $squiggly-animation-length linear infinite; 80 | font-size: 21vw; 81 | } 82 | 83 | .shape-animation .shape1, 84 | .shape-animation .shape2 { 85 | transition: all $logo-state-transition-length ease-in-out, background $logo-state-transition-length ease-in-out; 86 | } 87 | } 88 | 89 | // state: kibibit name 90 | &.full-logo { 91 | .shape-animation { 92 | &.to-red .shape { 93 | background: #E31B36; 94 | } 95 | 96 | &.to-blue .shape { 97 | background: #00A2C9; 98 | } 99 | 100 | &.to-yellow .shape { 101 | background: #EEB146; 102 | } 103 | 104 | &.shape-zero { 105 | .shape1 { 106 | height: 65%; 107 | } 108 | 109 | .shape2 { 110 | height: 0.2625em; 111 | } 112 | } 113 | 114 | &.shape-one { 115 | .shape1 { 116 | width: 0.1875em; 117 | height: 0.1875em; 118 | top: 0; 119 | left: -0.025em; 120 | right: -0.025em; 121 | border-radius: 50%; 122 | } 123 | 124 | .shape2 { 125 | height: 70%; 126 | } 127 | } 128 | } 129 | 130 | .letter { 131 | opacity: 1; 132 | } 133 | } 134 | 135 | // STATE: k1b1b0t 136 | &.k1b1b0t { 137 | transform: translate(0, -0.5em); 138 | 139 | .shape-animation.shape-zero { 140 | // height: auto; 141 | } 142 | 143 | .shape-animation.shape-zero .shape2 { 144 | bottom: 0.1em; 145 | height: 0.1em; 146 | animation: blink 2s infinite 250ms; 147 | } 148 | 149 | .shape-one:first-of-type .shape1 { 150 | left: 0; 151 | right: -0.06875em; 152 | } 153 | 154 | .shape-one.middle .shape1 { 155 | right: -0.06875em; 156 | } 157 | 158 | .k1b1b0t-mouth-container { 159 | .k1b1b0t-mouth { 160 | height: 100%; 161 | } 162 | } 163 | } 164 | 165 | // STATE: 10101. details: 166 | // * letters are hidden 167 | .letter { 168 | opacity: 0; 169 | transition: all $logo-state-transition-length $shape-easing-elastic-2; 170 | } 171 | 172 | .k1b1b0t-mouth-container { 173 | margin-left: 0.11em; 174 | font-size: 0.5em; 175 | overflow: hidden; 176 | top: 100%; 177 | position: absolute; 178 | width: 80%; 179 | display: flex; 180 | justify-content: center; 181 | align-items: center; 182 | height: 1em; 183 | 184 | .k1b1b0t-mouth { 185 | display: flex; 186 | align-items: center; 187 | justify-content: center; 188 | overflow: hidden; 189 | height: 0; 190 | transition: all 500ms ease 300ms; 191 | } 192 | } 193 | 194 | // two kind of shapes: 195 | // 0 - sub-shape1 is hidden, sub-shape2 is the zero 196 | // 1 - sub-shape1 is the horizontal line, sub-shape2 is the vertical line 197 | .shape-animation { 198 | display: inline-block; 199 | position: relative; 200 | transition: all $logo-state-transition-length ease-in-out; 201 | 202 | &.shape-zero { 203 | margin: 0 0.03125em; 204 | display: inline-block; 205 | height: 0.75em; 206 | width: 0.5625em; 207 | position: relative; 208 | 209 | .shape1 { 210 | width: 0.14375em; 211 | height: 0; 212 | background: currentColor; 213 | z-index: 500; 214 | position: absolute; 215 | bottom: 35%; 216 | left: 0; 217 | } 218 | 219 | .shape2 { 220 | width: 0.25em; 221 | height: 0.40625em; 222 | background: transparent; 223 | position: absolute; 224 | bottom: 0; 225 | left: 0; 226 | border-radius: 0.28125em; 227 | border: 0.15em solid currentColor; 228 | } 229 | } 230 | 231 | &.shape-one { 232 | margin: 0 0.0625em; 233 | display: inline-block; 234 | height: 0.7625em; 235 | width: 0.14375em; 236 | 237 | .shape1 { 238 | background: currentColor; 239 | position: absolute; 240 | top: 0.05625em; 241 | right: 0; 242 | height: 0.15em; 243 | left: -0.06875em; 244 | } 245 | 246 | .shape2 { 247 | width: 0.14375em; 248 | height: 92.5%; 249 | background: currentColor; 250 | position: absolute; 251 | bottom: 0; 252 | left: 0; 253 | } 254 | } 255 | 256 | .shape1, 257 | .shape2 { 258 | transition: all $logo-state-transition-length $shape-easing-elastic-1, background $logo-state-transition-length $shape-easing-elastic-2; 259 | } 260 | } 261 | } 262 | 263 | @keyframes squiggly-animation-filter { 264 | 0% { 265 | -webkit-filter: url("#squiggly-0"); 266 | filter: url("#squiggly-0"); 267 | } 268 | 269 | 25% { 270 | -webkit-filter: url("#squiggly-1"); 271 | filter: url("#squiggly-1"); 272 | } 273 | 274 | 50% { 275 | -webkit-filter: url("#squiggly-2"); 276 | filter: url("#squiggly-2"); 277 | } 278 | 279 | 75% { 280 | -webkit-filter: url("#squiggly-3"); 281 | filter: url("#squiggly-3"); 282 | } 283 | 284 | 100% { 285 | -webkit-filter: url("#squiggly-4"); 286 | filter: url("#squiggly-4"); 287 | } 288 | } 289 | 290 | @keyframes change-font-size { 291 | 0% { 292 | font-size: $font-anim-1; 293 | } 294 | 295 | 10% { 296 | font-size: $font-anim-1; 297 | } 298 | 299 | 40% { 300 | font-size: $font-anim-2; 301 | } 302 | 303 | 60% { 304 | font-size: $font-anim-2; 305 | } 306 | 307 | 100% { 308 | font-size: $font-anim-1; 309 | } 310 | } 311 | 312 | @keyframes blink { 313 | 0% { 314 | height: 0.1em; 315 | } 316 | 317 | 45% { 318 | height: 0.1em; 319 | } 320 | 321 | 50% { 322 | height: 0; 323 | } 324 | 325 | 55% { 326 | height: 0.1em; 327 | } 328 | 329 | 100% { 330 | height: 0.1em; 331 | } 332 | } 333 | --------------------------------------------------------------------------------