├── .gitignore ├── README.md ├── app.png ├── css ├── jquery-ui-style.css ├── normalize.css └── style.css ├── help.html ├── index.html ├── js ├── app.js ├── top_palettes.json └── trianglify-min.js └── loading.gif /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Trianglify Background Generator 2 | 3 | ![](app.png) 4 | 5 | A tool to generate images from SVGs rendered by the [Trianglify](https://github.com/qrohlf/trianglify) JS plugin. 6 | 7 | The app utilises the [ColourLovers](http:colourlovers.com) API to allow backgrounds to be generated using colours from the top 100 8 | palettes. 9 | 10 | See the app in action [here](http://alssndro.github.io/trianglify-background-generator/). 11 | 12 | ## Issues 13 | 14 | There are some compatibility issues regarding conversion of SVGs to images in-browser. At the moment 15 | the Download feature does not work in Safari. 16 | 17 | For the moment I have also omitted the 'noise' slider since converting medium/large resolution SVGs (with noise) to PNG kept crashing the Chrome tab. 18 | 19 | From browsing around other repos using the trianglify plugin, this seems to be a common issue. I should note that this isn't the fault of the plugin itself, but the implementation of the canvas element which seems to struggle with noise. 20 | -------------------------------------------------------------------------------- /app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alssndro/trianglify-background-generator/19de3ff59b3f2bd14181685f6b6fc5a0257a7e31/app.png -------------------------------------------------------------------------------- /css/jquery-ui-style.css: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.10.4 - 2014-04-13 2 | * http://jqueryui.com 3 | * Includes: jquery.ui.core.css, jquery.ui.slider.css, jquery.ui.theme.css 4 | * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px 5 | * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */ 6 | 7 | /* Layout helpers 8 | ----------------------------------*/ 9 | .ui-helper-hidden { 10 | display: none; 11 | } 12 | .ui-helper-hidden-accessible { 13 | border: 0; 14 | clip: rect(0 0 0 0); 15 | height: 1px; 16 | margin: -1px; 17 | overflow: hidden; 18 | padding: 0; 19 | position: absolute; 20 | width: 1px; 21 | } 22 | .ui-helper-reset { 23 | margin: 0; 24 | padding: 0; 25 | border: 0; 26 | outline: 0; 27 | line-height: 1.3; 28 | text-decoration: none; 29 | font-size: 100%; 30 | list-style: none; 31 | } 32 | .ui-helper-clearfix:before, 33 | .ui-helper-clearfix:after { 34 | content: ""; 35 | display: table; 36 | border-collapse: collapse; 37 | } 38 | .ui-helper-clearfix:after { 39 | clear: both; 40 | } 41 | .ui-helper-clearfix { 42 | min-height: 0; /* support: IE7 */ 43 | } 44 | .ui-helper-zfix { 45 | width: 100%; 46 | height: 100%; 47 | top: 0; 48 | left: 0; 49 | position: absolute; 50 | opacity: 0; 51 | filter:Alpha(Opacity=0); 52 | } 53 | 54 | .ui-front { 55 | z-index: 100; 56 | } 57 | 58 | 59 | /* Interaction Cues 60 | ----------------------------------*/ 61 | .ui-state-disabled { 62 | cursor: default !important; 63 | } 64 | 65 | 66 | /* Icons 67 | ----------------------------------*/ 68 | 69 | /* states and images */ 70 | .ui-icon { 71 | display: block; 72 | text-indent: -99999px; 73 | overflow: hidden; 74 | background-repeat: no-repeat; 75 | } 76 | 77 | 78 | /* Misc visuals 79 | ----------------------------------*/ 80 | 81 | /* Overlays */ 82 | .ui-widget-overlay { 83 | position: fixed; 84 | top: 0; 85 | left: 0; 86 | width: 100%; 87 | height: 100%; 88 | } 89 | .ui-slider { 90 | position: relative; 91 | text-align: left; 92 | } 93 | .ui-slider .ui-slider-handle { 94 | position: absolute; 95 | z-index: 2; 96 | width: 1.2em; 97 | height: 1.2em; 98 | cursor: default; 99 | } 100 | .ui-slider .ui-slider-range { 101 | position: absolute; 102 | z-index: 1; 103 | font-size: .7em; 104 | display: block; 105 | border: 0; 106 | background-position: 0 0; 107 | } 108 | 109 | /* For IE8 - See #6727 */ 110 | .ui-slider.ui-state-disabled .ui-slider-handle, 111 | .ui-slider.ui-state-disabled .ui-slider-range { 112 | filter: inherit; 113 | } 114 | 115 | .ui-slider-horizontal { 116 | height: .8em; 117 | } 118 | .ui-slider-horizontal .ui-slider-handle { 119 | top: -.3em; 120 | margin-left: -.6em; 121 | } 122 | .ui-slider-horizontal .ui-slider-range { 123 | top: 0; 124 | height: 100%; 125 | } 126 | .ui-slider-horizontal .ui-slider-range-min { 127 | left: 0; 128 | } 129 | .ui-slider-horizontal .ui-slider-range-max { 130 | right: 0; 131 | } 132 | 133 | .ui-slider-vertical { 134 | width: .8em; 135 | height: 100px; 136 | } 137 | .ui-slider-vertical .ui-slider-handle { 138 | left: -.3em; 139 | margin-left: 0; 140 | margin-bottom: -.6em; 141 | } 142 | .ui-slider-vertical .ui-slider-range { 143 | left: 0; 144 | width: 100%; 145 | } 146 | .ui-slider-vertical .ui-slider-range-min { 147 | bottom: 0; 148 | } 149 | .ui-slider-vertical .ui-slider-range-max { 150 | top: 0; 151 | } 152 | 153 | /* Component containers 154 | ----------------------------------*/ 155 | .ui-widget { 156 | font-family: Verdana,Arial,sans-serif; 157 | font-size: 1.1em; 158 | } 159 | .ui-widget .ui-widget { 160 | font-size: 1em; 161 | } 162 | .ui-widget input, 163 | .ui-widget select, 164 | .ui-widget textarea, 165 | .ui-widget button { 166 | font-family: Verdana,Arial,sans-serif; 167 | font-size: 1em; 168 | } 169 | .ui-widget-content { 170 | border: 1px solid #aaaaaa; 171 | background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x; 172 | color: #222222; 173 | } 174 | .ui-widget-content a { 175 | color: #222222; 176 | } 177 | .ui-widget-header { 178 | border: 1px solid #aaaaaa; 179 | background: #cccccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x; 180 | color: #222222; 181 | font-weight: bold; 182 | } 183 | .ui-widget-header a { 184 | color: #222222; 185 | } 186 | 187 | /* Interaction states 188 | ----------------------------------*/ 189 | .ui-state-default, 190 | .ui-widget-content .ui-state-default, 191 | .ui-widget-header .ui-state-default { 192 | border: 1px solid #d3d3d3; 193 | background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x; 194 | font-weight: normal; 195 | color: #555555; 196 | } 197 | .ui-state-default a, 198 | .ui-state-default a:link, 199 | .ui-state-default a:visited { 200 | color: #555555; 201 | text-decoration: none; 202 | } 203 | .ui-state-hover, 204 | .ui-widget-content .ui-state-hover, 205 | .ui-widget-header .ui-state-hover, 206 | .ui-state-focus, 207 | .ui-widget-content .ui-state-focus, 208 | .ui-widget-header .ui-state-focus { 209 | border: 1px solid #999999; 210 | background: #dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x; 211 | font-weight: normal; 212 | color: #212121; 213 | } 214 | .ui-state-hover a, 215 | .ui-state-hover a:hover, 216 | .ui-state-hover a:link, 217 | .ui-state-hover a:visited, 218 | .ui-state-focus a, 219 | .ui-state-focus a:hover, 220 | .ui-state-focus a:link, 221 | .ui-state-focus a:visited { 222 | color: #212121; 223 | text-decoration: none; 224 | } 225 | .ui-state-active, 226 | .ui-widget-content .ui-state-active, 227 | .ui-widget-header .ui-state-active { 228 | border: 1px solid #aaaaaa; 229 | background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x; 230 | font-weight: normal; 231 | color: #212121; 232 | } 233 | .ui-state-active a, 234 | .ui-state-active a:link, 235 | .ui-state-active a:visited { 236 | color: #212121; 237 | text-decoration: none; 238 | } 239 | 240 | /* Interaction Cues 241 | ----------------------------------*/ 242 | .ui-state-highlight, 243 | .ui-widget-content .ui-state-highlight, 244 | .ui-widget-header .ui-state-highlight { 245 | border: 1px solid #fcefa1; 246 | background: #fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x; 247 | color: #363636; 248 | } 249 | .ui-state-highlight a, 250 | .ui-widget-content .ui-state-highlight a, 251 | .ui-widget-header .ui-state-highlight a { 252 | color: #363636; 253 | } 254 | .ui-state-error, 255 | .ui-widget-content .ui-state-error, 256 | .ui-widget-header .ui-state-error { 257 | border: 1px solid #cd0a0a; 258 | background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x; 259 | color: #cd0a0a; 260 | } 261 | .ui-state-error a, 262 | .ui-widget-content .ui-state-error a, 263 | .ui-widget-header .ui-state-error a { 264 | color: #cd0a0a; 265 | } 266 | .ui-state-error-text, 267 | .ui-widget-content .ui-state-error-text, 268 | .ui-widget-header .ui-state-error-text { 269 | color: #cd0a0a; 270 | } 271 | .ui-priority-primary, 272 | .ui-widget-content .ui-priority-primary, 273 | .ui-widget-header .ui-priority-primary { 274 | font-weight: bold; 275 | } 276 | .ui-priority-secondary, 277 | .ui-widget-content .ui-priority-secondary, 278 | .ui-widget-header .ui-priority-secondary { 279 | opacity: .7; 280 | filter:Alpha(Opacity=70); 281 | font-weight: normal; 282 | } 283 | .ui-state-disabled, 284 | .ui-widget-content .ui-state-disabled, 285 | .ui-widget-header .ui-state-disabled { 286 | opacity: .35; 287 | filter:Alpha(Opacity=35); 288 | background-image: none; 289 | } 290 | .ui-state-disabled .ui-icon { 291 | filter:Alpha(Opacity=35); /* For IE8 - See #6059 */ 292 | } 293 | 294 | /* Icons 295 | ----------------------------------*/ 296 | 297 | /* states and images */ 298 | .ui-icon { 299 | width: 16px; 300 | height: 16px; 301 | } 302 | .ui-icon, 303 | .ui-widget-content .ui-icon { 304 | background-image: url("images/ui-icons_222222_256x240.png"); 305 | } 306 | .ui-widget-header .ui-icon { 307 | background-image: url("images/ui-icons_222222_256x240.png"); 308 | } 309 | .ui-state-default .ui-icon { 310 | background-image: url("images/ui-icons_888888_256x240.png"); 311 | } 312 | .ui-state-hover .ui-icon, 313 | .ui-state-focus .ui-icon { 314 | background-image: url("images/ui-icons_454545_256x240.png"); 315 | } 316 | .ui-state-active .ui-icon { 317 | background-image: url("images/ui-icons_454545_256x240.png"); 318 | } 319 | .ui-state-highlight .ui-icon { 320 | background-image: url("images/ui-icons_2e83ff_256x240.png"); 321 | } 322 | .ui-state-error .ui-icon, 323 | .ui-state-error-text .ui-icon { 324 | background-image: url("images/ui-icons_cd0a0a_256x240.png"); 325 | } 326 | 327 | /* positioning */ 328 | .ui-icon-blank { background-position: 16px 16px; } 329 | .ui-icon-carat-1-n { background-position: 0 0; } 330 | .ui-icon-carat-1-ne { background-position: -16px 0; } 331 | .ui-icon-carat-1-e { background-position: -32px 0; } 332 | .ui-icon-carat-1-se { background-position: -48px 0; } 333 | .ui-icon-carat-1-s { background-position: -64px 0; } 334 | .ui-icon-carat-1-sw { background-position: -80px 0; } 335 | .ui-icon-carat-1-w { background-position: -96px 0; } 336 | .ui-icon-carat-1-nw { background-position: -112px 0; } 337 | .ui-icon-carat-2-n-s { background-position: -128px 0; } 338 | .ui-icon-carat-2-e-w { background-position: -144px 0; } 339 | .ui-icon-triangle-1-n { background-position: 0 -16px; } 340 | .ui-icon-triangle-1-ne { background-position: -16px -16px; } 341 | .ui-icon-triangle-1-e { background-position: -32px -16px; } 342 | .ui-icon-triangle-1-se { background-position: -48px -16px; } 343 | .ui-icon-triangle-1-s { background-position: -64px -16px; } 344 | .ui-icon-triangle-1-sw { background-position: -80px -16px; } 345 | .ui-icon-triangle-1-w { background-position: -96px -16px; } 346 | .ui-icon-triangle-1-nw { background-position: -112px -16px; } 347 | .ui-icon-triangle-2-n-s { background-position: -128px -16px; } 348 | .ui-icon-triangle-2-e-w { background-position: -144px -16px; } 349 | .ui-icon-arrow-1-n { background-position: 0 -32px; } 350 | .ui-icon-arrow-1-ne { background-position: -16px -32px; } 351 | .ui-icon-arrow-1-e { background-position: -32px -32px; } 352 | .ui-icon-arrow-1-se { background-position: -48px -32px; } 353 | .ui-icon-arrow-1-s { background-position: -64px -32px; } 354 | .ui-icon-arrow-1-sw { background-position: -80px -32px; } 355 | .ui-icon-arrow-1-w { background-position: -96px -32px; } 356 | .ui-icon-arrow-1-nw { background-position: -112px -32px; } 357 | .ui-icon-arrow-2-n-s { background-position: -128px -32px; } 358 | .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } 359 | .ui-icon-arrow-2-e-w { background-position: -160px -32px; } 360 | .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } 361 | .ui-icon-arrowstop-1-n { background-position: -192px -32px; } 362 | .ui-icon-arrowstop-1-e { background-position: -208px -32px; } 363 | .ui-icon-arrowstop-1-s { background-position: -224px -32px; } 364 | .ui-icon-arrowstop-1-w { background-position: -240px -32px; } 365 | .ui-icon-arrowthick-1-n { background-position: 0 -48px; } 366 | .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } 367 | .ui-icon-arrowthick-1-e { background-position: -32px -48px; } 368 | .ui-icon-arrowthick-1-se { background-position: -48px -48px; } 369 | .ui-icon-arrowthick-1-s { background-position: -64px -48px; } 370 | .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } 371 | .ui-icon-arrowthick-1-w { background-position: -96px -48px; } 372 | .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } 373 | .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } 374 | .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } 375 | .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } 376 | .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } 377 | .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } 378 | .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } 379 | .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } 380 | .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } 381 | .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } 382 | .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } 383 | .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } 384 | .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } 385 | .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } 386 | .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } 387 | .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } 388 | .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } 389 | .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } 390 | .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } 391 | .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } 392 | .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } 393 | .ui-icon-arrow-4 { background-position: 0 -80px; } 394 | .ui-icon-arrow-4-diag { background-position: -16px -80px; } 395 | .ui-icon-extlink { background-position: -32px -80px; } 396 | .ui-icon-newwin { background-position: -48px -80px; } 397 | .ui-icon-refresh { background-position: -64px -80px; } 398 | .ui-icon-shuffle { background-position: -80px -80px; } 399 | .ui-icon-transfer-e-w { background-position: -96px -80px; } 400 | .ui-icon-transferthick-e-w { background-position: -112px -80px; } 401 | .ui-icon-folder-collapsed { background-position: 0 -96px; } 402 | .ui-icon-folder-open { background-position: -16px -96px; } 403 | .ui-icon-document { background-position: -32px -96px; } 404 | .ui-icon-document-b { background-position: -48px -96px; } 405 | .ui-icon-note { background-position: -64px -96px; } 406 | .ui-icon-mail-closed { background-position: -80px -96px; } 407 | .ui-icon-mail-open { background-position: -96px -96px; } 408 | .ui-icon-suitcase { background-position: -112px -96px; } 409 | .ui-icon-comment { background-position: -128px -96px; } 410 | .ui-icon-person { background-position: -144px -96px; } 411 | .ui-icon-print { background-position: -160px -96px; } 412 | .ui-icon-trash { background-position: -176px -96px; } 413 | .ui-icon-locked { background-position: -192px -96px; } 414 | .ui-icon-unlocked { background-position: -208px -96px; } 415 | .ui-icon-bookmark { background-position: -224px -96px; } 416 | .ui-icon-tag { background-position: -240px -96px; } 417 | .ui-icon-home { background-position: 0 -112px; } 418 | .ui-icon-flag { background-position: -16px -112px; } 419 | .ui-icon-calendar { background-position: -32px -112px; } 420 | .ui-icon-cart { background-position: -48px -112px; } 421 | .ui-icon-pencil { background-position: -64px -112px; } 422 | .ui-icon-clock { background-position: -80px -112px; } 423 | .ui-icon-disk { background-position: -96px -112px; } 424 | .ui-icon-calculator { background-position: -112px -112px; } 425 | .ui-icon-zoomin { background-position: -128px -112px; } 426 | .ui-icon-zoomout { background-position: -144px -112px; } 427 | .ui-icon-search { background-position: -160px -112px; } 428 | .ui-icon-wrench { background-position: -176px -112px; } 429 | .ui-icon-gear { background-position: -192px -112px; } 430 | .ui-icon-heart { background-position: -208px -112px; } 431 | .ui-icon-star { background-position: -224px -112px; } 432 | .ui-icon-link { background-position: -240px -112px; } 433 | .ui-icon-cancel { background-position: 0 -128px; } 434 | .ui-icon-plus { background-position: -16px -128px; } 435 | .ui-icon-plusthick { background-position: -32px -128px; } 436 | .ui-icon-minus { background-position: -48px -128px; } 437 | .ui-icon-minusthick { background-position: -64px -128px; } 438 | .ui-icon-close { background-position: -80px -128px; } 439 | .ui-icon-closethick { background-position: -96px -128px; } 440 | .ui-icon-key { background-position: -112px -128px; } 441 | .ui-icon-lightbulb { background-position: -128px -128px; } 442 | .ui-icon-scissors { background-position: -144px -128px; } 443 | .ui-icon-clipboard { background-position: -160px -128px; } 444 | .ui-icon-copy { background-position: -176px -128px; } 445 | .ui-icon-contact { background-position: -192px -128px; } 446 | .ui-icon-image { background-position: -208px -128px; } 447 | .ui-icon-video { background-position: -224px -128px; } 448 | .ui-icon-script { background-position: -240px -128px; } 449 | .ui-icon-alert { background-position: 0 -144px; } 450 | .ui-icon-info { background-position: -16px -144px; } 451 | .ui-icon-notice { background-position: -32px -144px; } 452 | .ui-icon-help { background-position: -48px -144px; } 453 | .ui-icon-check { background-position: -64px -144px; } 454 | .ui-icon-bullet { background-position: -80px -144px; } 455 | .ui-icon-radio-on { background-position: -96px -144px; } 456 | .ui-icon-radio-off { background-position: -112px -144px; } 457 | .ui-icon-pin-w { background-position: -128px -144px; } 458 | .ui-icon-pin-s { background-position: -144px -144px; } 459 | .ui-icon-play { background-position: 0 -160px; } 460 | .ui-icon-pause { background-position: -16px -160px; } 461 | .ui-icon-seek-next { background-position: -32px -160px; } 462 | .ui-icon-seek-prev { background-position: -48px -160px; } 463 | .ui-icon-seek-end { background-position: -64px -160px; } 464 | .ui-icon-seek-start { background-position: -80px -160px; } 465 | /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ 466 | .ui-icon-seek-first { background-position: -80px -160px; } 467 | .ui-icon-stop { background-position: -96px -160px; } 468 | .ui-icon-eject { background-position: -112px -160px; } 469 | .ui-icon-volume-off { background-position: -128px -160px; } 470 | .ui-icon-volume-on { background-position: -144px -160px; } 471 | .ui-icon-power { background-position: 0 -176px; } 472 | .ui-icon-signal-diag { background-position: -16px -176px; } 473 | .ui-icon-signal { background-position: -32px -176px; } 474 | .ui-icon-battery-0 { background-position: -48px -176px; } 475 | .ui-icon-battery-1 { background-position: -64px -176px; } 476 | .ui-icon-battery-2 { background-position: -80px -176px; } 477 | .ui-icon-battery-3 { background-position: -96px -176px; } 478 | .ui-icon-circle-plus { background-position: 0 -192px; } 479 | .ui-icon-circle-minus { background-position: -16px -192px; } 480 | .ui-icon-circle-close { background-position: -32px -192px; } 481 | .ui-icon-circle-triangle-e { background-position: -48px -192px; } 482 | .ui-icon-circle-triangle-s { background-position: -64px -192px; } 483 | .ui-icon-circle-triangle-w { background-position: -80px -192px; } 484 | .ui-icon-circle-triangle-n { background-position: -96px -192px; } 485 | .ui-icon-circle-arrow-e { background-position: -112px -192px; } 486 | .ui-icon-circle-arrow-s { background-position: -128px -192px; } 487 | .ui-icon-circle-arrow-w { background-position: -144px -192px; } 488 | .ui-icon-circle-arrow-n { background-position: -160px -192px; } 489 | .ui-icon-circle-zoomin { background-position: -176px -192px; } 490 | .ui-icon-circle-zoomout { background-position: -192px -192px; } 491 | .ui-icon-circle-check { background-position: -208px -192px; } 492 | .ui-icon-circlesmall-plus { background-position: 0 -208px; } 493 | .ui-icon-circlesmall-minus { background-position: -16px -208px; } 494 | .ui-icon-circlesmall-close { background-position: -32px -208px; } 495 | .ui-icon-squaresmall-plus { background-position: -48px -208px; } 496 | .ui-icon-squaresmall-minus { background-position: -64px -208px; } 497 | .ui-icon-squaresmall-close { background-position: -80px -208px; } 498 | .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } 499 | .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } 500 | .ui-icon-grip-solid-vertical { background-position: -32px -224px; } 501 | .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } 502 | .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } 503 | .ui-icon-grip-diagonal-se { background-position: -80px -224px; } 504 | 505 | 506 | /* Misc visuals 507 | ----------------------------------*/ 508 | 509 | /* Corner radius */ 510 | .ui-corner-all, 511 | .ui-corner-top, 512 | .ui-corner-left, 513 | .ui-corner-tl { 514 | border-top-left-radius: 4px; 515 | } 516 | .ui-corner-all, 517 | .ui-corner-top, 518 | .ui-corner-right, 519 | .ui-corner-tr { 520 | border-top-right-radius: 4px; 521 | } 522 | .ui-corner-all, 523 | .ui-corner-bottom, 524 | .ui-corner-left, 525 | .ui-corner-bl { 526 | border-bottom-left-radius: 4px; 527 | } 528 | .ui-corner-all, 529 | .ui-corner-bottom, 530 | .ui-corner-right, 531 | .ui-corner-br { 532 | border-bottom-right-radius: 4px; 533 | } 534 | 535 | /* Overlays */ 536 | .ui-widget-overlay { 537 | background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x; 538 | opacity: .3; 539 | filter: Alpha(Opacity=30); 540 | } 541 | .ui-widget-shadow { 542 | margin: -8px 0 0 -8px; 543 | padding: 8px; 544 | background: #aaaaaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x; 545 | opacity: .3; 546 | filter: Alpha(Opacity=30); 547 | border-radius: 8px; 548 | } 549 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | * Correct `block` display not defined for `main` in IE 11. 30 | */ 31 | 32 | article, 33 | aside, 34 | details, 35 | figcaption, 36 | figure, 37 | footer, 38 | header, 39 | hgroup, 40 | main, 41 | nav, 42 | section, 43 | summary { 44 | display: block; 45 | } 46 | 47 | /** 48 | * 1. Correct `inline-block` display not defined in IE 8/9. 49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 50 | */ 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; /* 1 */ 57 | vertical-align: baseline; /* 2 */ 58 | } 59 | 60 | /** 61 | * Prevent modern browsers from displaying `audio` without controls. 62 | * Remove excess height in iOS 5 devices. 63 | */ 64 | 65 | audio:not([controls]) { 66 | display: none; 67 | height: 0; 68 | } 69 | 70 | /** 71 | * Address `[hidden]` styling not present in IE 8/9/10. 72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 73 | */ 74 | 75 | [hidden], 76 | template { 77 | display: none; 78 | } 79 | 80 | /* Links 81 | ========================================================================== */ 82 | 83 | /** 84 | * Remove the gray background color from active links in IE 10. 85 | */ 86 | 87 | a { 88 | background: transparent; 89 | } 90 | 91 | /** 92 | * Improve readability when focused and also mouse hovered in all browsers. 93 | */ 94 | 95 | a:active, 96 | a:hover { 97 | outline: 0; 98 | } 99 | 100 | /* Text-level semantics 101 | ========================================================================== */ 102 | 103 | /** 104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 105 | */ 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | /** 112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 113 | */ 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | /** 121 | * Address styling not present in Safari and Chrome. 122 | */ 123 | 124 | dfn { 125 | font-style: italic; 126 | } 127 | 128 | /** 129 | * Address variable `h1` font-size and margin within `section` and `article` 130 | * contexts in Firefox 4+, Safari, and Chrome. 131 | */ 132 | 133 | h1 { 134 | font-size: 2em; 135 | margin: 0.67em 0; 136 | } 137 | 138 | /** 139 | * Address styling not present in IE 8/9. 140 | */ 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | /** 148 | * Address inconsistent and variable font size in all browsers. 149 | */ 150 | 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /** 156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 157 | */ 158 | 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; 165 | } 166 | 167 | sup { 168 | top: -0.5em; 169 | } 170 | 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | 175 | /* Embedded content 176 | ========================================================================== */ 177 | 178 | /** 179 | * Remove border when inside `a` element in IE 8/9/10. 180 | */ 181 | 182 | img { 183 | border: 0; 184 | } 185 | 186 | /** 187 | * Correct overflow not hidden in IE 9/10/11. 188 | */ 189 | 190 | svg:not(:root) { 191 | overflow: hidden; 192 | } 193 | 194 | /* Grouping content 195 | ========================================================================== */ 196 | 197 | /** 198 | * Address margin not present in IE 8/9 and Safari. 199 | */ 200 | 201 | figure { 202 | margin: 1em 40px; 203 | } 204 | 205 | /** 206 | * Address differences between Firefox and other browsers. 207 | */ 208 | 209 | hr { 210 | -moz-box-sizing: content-box; 211 | box-sizing: content-box; 212 | height: 0; 213 | } 214 | 215 | /** 216 | * Contain overflow in all browsers. 217 | */ 218 | 219 | pre { 220 | overflow: auto; 221 | } 222 | 223 | /** 224 | * Address odd `em`-unit font size rendering in all browsers. 225 | */ 226 | 227 | code, 228 | kbd, 229 | pre, 230 | samp { 231 | font-family: monospace, monospace; 232 | font-size: 1em; 233 | } 234 | 235 | /* Forms 236 | ========================================================================== */ 237 | 238 | /** 239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 240 | * styling of `select`, unless a `border` property is set. 241 | */ 242 | 243 | /** 244 | * 1. Correct color not being inherited. 245 | * Known issue: affects color of disabled elements. 246 | * 2. Correct font properties not being inherited. 247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 248 | */ 249 | 250 | button, 251 | input, 252 | optgroup, 253 | select, 254 | textarea { 255 | color: inherit; /* 1 */ 256 | font: inherit; /* 2 */ 257 | margin: 0; /* 3 */ 258 | } 259 | 260 | /** 261 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 262 | */ 263 | 264 | button { 265 | overflow: visible; 266 | } 267 | 268 | /** 269 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 270 | * All other form control elements do not inherit `text-transform` values. 271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 272 | * Correct `select` style inheritance in Firefox. 273 | */ 274 | 275 | button, 276 | select { 277 | text-transform: none; 278 | } 279 | 280 | /** 281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 282 | * and `video` controls. 283 | * 2. Correct inability to style clickable `input` types in iOS. 284 | * 3. Improve usability and consistency of cursor style between image-type 285 | * `input` and others. 286 | */ 287 | 288 | button, 289 | html input[type="button"], /* 1 */ 290 | input[type="reset"], 291 | input[type="submit"] { 292 | -webkit-appearance: button; /* 2 */ 293 | cursor: pointer; /* 3 */ 294 | } 295 | 296 | /** 297 | * Re-set default cursor for disabled elements. 298 | */ 299 | 300 | button[disabled], 301 | html input[disabled] { 302 | cursor: default; 303 | } 304 | 305 | /** 306 | * Remove inner padding and border in Firefox 4+. 307 | */ 308 | 309 | button::-moz-focus-inner, 310 | input::-moz-focus-inner { 311 | border: 0; 312 | padding: 0; 313 | } 314 | 315 | /** 316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 317 | * the UA stylesheet. 318 | */ 319 | 320 | input { 321 | line-height: normal; 322 | } 323 | 324 | /** 325 | * It's recommended that you don't attempt to style these elements. 326 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 327 | * 328 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 329 | * 2. Remove excess padding in IE 8/9/10. 330 | */ 331 | 332 | input[type="checkbox"], 333 | input[type="radio"] { 334 | box-sizing: border-box; /* 1 */ 335 | padding: 0; /* 2 */ 336 | } 337 | 338 | /** 339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 340 | * `font-size` values of the `input`, it causes the cursor style of the 341 | * decrement button to change from `default` to `text`. 342 | */ 343 | 344 | input[type="number"]::-webkit-inner-spin-button, 345 | input[type="number"]::-webkit-outer-spin-button { 346 | height: auto; 347 | } 348 | 349 | /** 350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 352 | * (include `-moz` to future-proof). 353 | */ 354 | 355 | input[type="search"] { 356 | -webkit-appearance: textfield; /* 1 */ 357 | -moz-box-sizing: content-box; 358 | -webkit-box-sizing: content-box; /* 2 */ 359 | box-sizing: content-box; 360 | } 361 | 362 | /** 363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 364 | * Safari (but not Chrome) clips the cancel button when the search input has 365 | * padding (and `textfield` appearance). 366 | */ 367 | 368 | input[type="search"]::-webkit-search-cancel-button, 369 | input[type="search"]::-webkit-search-decoration { 370 | -webkit-appearance: none; 371 | } 372 | 373 | /** 374 | * Define consistent border, margin, and padding. 375 | */ 376 | 377 | fieldset { 378 | border: 1px solid #c0c0c0; 379 | margin: 0 2px; 380 | padding: 0.35em 0.625em 0.75em; 381 | } 382 | 383 | /** 384 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 386 | */ 387 | 388 | legend { 389 | border: 0; /* 1 */ 390 | padding: 0; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove default vertical scrollbar in IE 8/9/10/11. 395 | */ 396 | 397 | textarea { 398 | overflow: auto; 399 | } 400 | 401 | /** 402 | * Don't inherit the `font-weight` (applied by a rule above). 403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 404 | */ 405 | 406 | optgroup { 407 | font-weight: bold; 408 | } 409 | 410 | /* Tables 411 | ========================================================================== */ 412 | 413 | /** 414 | * Remove most spacing between table cells. 415 | */ 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | td, 423 | th { 424 | padding: 0; 425 | } 426 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ 2 | 3 | /* ========================================================================== 4 | Base styles: opinionated defaults 5 | ========================================================================== */ 6 | 7 | *, *:before, *:after { 8 | -moz-box-sizing: border-box; 9 | -webkit-box-sizing: border-box; 10 | box-sizing: border-box; 11 | } 12 | 13 | html { 14 | color: #444444; 15 | font-size: 1em; 16 | line-height: 1.5; 17 | font-family: "Muli", sans-serif; 18 | } 19 | 20 | /* 21 | * Remove text-shadow in selection highlight: h5bp.com/i 22 | * These selection rule sets have to be separate. 23 | * Customize the background color to match your design. 24 | */ 25 | 26 | ::-moz-selection { 27 | background: #b3d4fc; 28 | text-shadow: none; 29 | } 30 | 31 | ::selection { 32 | background: #b3d4fc; 33 | text-shadow: none; 34 | } 35 | 36 | /* 37 | * A better looking default horizontal rule 38 | */ 39 | 40 | hr { 41 | display: block; 42 | height: 1px; 43 | border: 0; 44 | border-top: 1px solid #ccc; 45 | margin: 1em 0; 46 | padding: 0; 47 | } 48 | 49 | /* 50 | * Remove the gap between images, videos, audio and canvas and the bottom of 51 | * their containers: h5bp.com/i/440 52 | */ 53 | 54 | audio, 55 | canvas, 56 | img, 57 | svg, 58 | video { 59 | vertical-align: middle; 60 | } 61 | 62 | /* 63 | * Remove default fieldset styles. 64 | */ 65 | 66 | fieldset { 67 | border: 0; 68 | margin: 0; 69 | padding: 0; 70 | } 71 | 72 | /* 73 | * Allow only vertical resizing of textareas. 74 | */ 75 | 76 | textarea { 77 | resize: vertical; 78 | } 79 | 80 | /* ========================================================================== 81 | Browse Happy prompt 82 | ========================================================================== */ 83 | 84 | .browsehappy { 85 | margin: 0.2em 0; 86 | background: #ccc; 87 | color: #000; 88 | padding: 0.2em 0; 89 | } 90 | 91 | /* ========================================================================== 92 | Author's custom styles 93 | ========================================================================== */ 94 | 95 | a { 96 | color: #444444; 97 | } 98 | 99 | h1, h2, h3, h4, h5 { 100 | margin: 0; 101 | text-transform: uppercase; 102 | } 103 | 104 | h1 { 105 | font-size: 1.4em; 106 | text-align: center; 107 | padding: 0.75em 0; 108 | line-height: 1.25; 109 | background-color: #262626; 110 | color: white; 111 | } 112 | 113 | h2 { 114 | font-size: 1.25em; 115 | line-height: 1.2; 116 | margin: 0.75em 0; 117 | } 118 | 119 | p { 120 | margin: 1.5em 0; 121 | } 122 | 123 | header { 124 | background-color: #262626; 125 | } 126 | 127 | #loading { 128 | position: absolute; 129 | width: 100%; 130 | height: 100%; 131 | z-index: 9999999; 132 | background-color: white; 133 | text-align: center; 134 | } 135 | 136 | .slider { 137 | width: 100%; 138 | } 139 | 140 | #the-image { 141 | margin: 0 auto; 142 | } 143 | 144 | html, body, .main { 145 | width: 100%; 146 | height: 100%; 147 | } 148 | 149 | #the-canvas { 150 | display: none; 151 | } 152 | 153 | #controls { 154 | float: left; 155 | width: 30%; 156 | height: 100%; 157 | padding: 0.75em 0; 158 | } 159 | 160 | .panel { 161 | padding: 0 4%; 162 | } 163 | 164 | #backgrounds { 165 | float: left; 166 | width: 70%; 167 | height: 100%; 168 | background-repeat: no-repeat; 169 | } 170 | 171 | label { 172 | display: block; 173 | width: 100%; 174 | margin: 0 0 0.75em 0; 175 | text-transform: uppercase; 176 | } 177 | 178 | input, select { 179 | display: block; 180 | margin: 0 0 3em 0; 181 | outline: none; 182 | width: 100%; 183 | border: none; 184 | background-color: #EDEDED; 185 | line-height: 1.5; 186 | text-align: center; 187 | } 188 | 189 | input:focus { 190 | background-color: #444444; 191 | color: #EEEEEE; 192 | } 193 | 194 | .noise-label { 195 | margin: 0; 196 | } 197 | 198 | .input-info { 199 | margin: 0 0 0.75em 0; 200 | font-size: 0.875em; 201 | } 202 | 203 | button, #download-btn { 204 | border: 1px solid #BBBBBB; 205 | border-radius: 0px; 206 | width: 100%; 207 | display: block; 208 | margin: 0 0 1.5em 0; 209 | line-height: 1.5; 210 | text-transform: uppercase; 211 | background-color: white; 212 | outline: none; 213 | padding: 0.125em 0; 214 | } 215 | 216 | button:hover, #download-btn:hover { 217 | background-color: #262626; 218 | border-color: #262626; 219 | color: white; 220 | } 221 | 222 | #download-btn { 223 | text-align: center; 224 | text-decoration: none; 225 | line-height: 1.5; 226 | } 227 | 228 | .slider-value { 229 | text-align: center; 230 | margin-top: 0.75em; 231 | } 232 | 233 | footer { 234 | float: left; 235 | width: 100%; 236 | } 237 | 238 | .info { 239 | float: left; 240 | width: 100%; 241 | text-align: center; 242 | } 243 | 244 | .colour-scheme-selectors { 245 | margin: 0.75em 0; 246 | } 247 | 248 | .colour-input { 249 | float: left; 250 | width: 20%; 251 | margin: 0 0 0.75em 0; 252 | } 253 | 254 | .colour-input-label { 255 | float: left; 256 | width: 80%; 257 | margin: 0 0 0.75em 0; 258 | } 259 | 260 | #colour-list { 261 | height: 20em; 262 | overflow-y: scroll; 263 | margin: 0 0 1.5em 0; 264 | } 265 | 266 | .palette-cont { 267 | margin: 0.2em 0; 268 | } 269 | 270 | .palette-colour { 271 | float: left; 272 | height: 4em; 273 | } 274 | 275 | .help-body { 276 | width: auto; 277 | height: auto; 278 | padding: 0 25%; 279 | } 280 | 281 | .help-list { 282 | padding: 1.5em 0; 283 | } 284 | 285 | @media(min-width: 1200px) { 286 | .panel { 287 | float: left; 288 | width: 50%; 289 | } 290 | } 291 | /* ========================================================================== 292 | jQuery UI Slider overrides 293 | ========================================================================== */ 294 | .ui-corner-all { 295 | border-radius: 0; 296 | } 297 | 298 | .ui-slider-horizontal { 299 | height: 1em; 300 | border: none; 301 | background: #EFEFEF; 302 | } 303 | 304 | .ui-state-default, 305 | .ui-widget-content .ui-state-default, 306 | .ui-widget-header .ui-state-default { 307 | border: none; 308 | background: #BBBBBB; 309 | color: #555555; 310 | } 311 | 312 | .ui-state-default a, 313 | .ui-state-default a:link, 314 | .ui-state-default a:visited { 315 | color: #555555; 316 | text-decoration: none; 317 | } 318 | .ui-state-hover, 319 | .ui-widget-content .ui-state-hover, 320 | .ui-widget-header .ui-state-hover, 321 | .ui-state-focus, 322 | .ui-widget-content .ui-state-focus, 323 | .ui-widget-header .ui-state-focus { 324 | border: none; 325 | background: #444444; 326 | font-weight: normal; 327 | color: #212121; 328 | } 329 | .ui-state-hover a, 330 | .ui-state-hover a:hover, 331 | .ui-state-hover a:link, 332 | .ui-state-hover a:visited, 333 | .ui-state-focus a, 334 | .ui-state-focus a:hover, 335 | .ui-state-focus a:link, 336 | .ui-state-focus a:visited { 337 | color: #212121; 338 | text-decoration: none; 339 | } 340 | 341 | .ui-slider .ui-slider-handle { 342 | /*width: 0.75em;*/ 343 | height: 1em; 344 | } 345 | 346 | .ui-slider-horizontal .ui-slider-handle { 347 | top: 0; 348 | /*margin-left: -.6em;*/ 349 | } 350 | 351 | /* ========================================================================== 352 | Helper classes 353 | ========================================================================== */ 354 | 355 | /* 356 | * Hide from both screenreaders and browsers: h5bp.com/u 357 | */ 358 | 359 | .hidden { 360 | display: none !important; 361 | visibility: hidden; 362 | } 363 | 364 | /* 365 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 366 | */ 367 | 368 | .visuallyhidden { 369 | border: 0; 370 | clip: rect(0 0 0 0); 371 | height: 1px; 372 | margin: -1px; 373 | overflow: hidden; 374 | padding: 0; 375 | position: absolute; 376 | width: 1px; 377 | } 378 | 379 | /* 380 | * Extends the .visuallyhidden class to allow the element to be focusable 381 | * when navigated to via the keyboard: h5bp.com/p 382 | */ 383 | 384 | .visuallyhidden.focusable:active, 385 | .visuallyhidden.focusable:focus { 386 | clip: auto; 387 | height: auto; 388 | margin: 0; 389 | overflow: visible; 390 | position: static; 391 | width: auto; 392 | } 393 | 394 | /* 395 | * Hide visually and from screenreaders, but maintain layout 396 | */ 397 | 398 | .invisible { 399 | visibility: hidden; 400 | } 401 | 402 | /* 403 | * Clearfix: contain floats 404 | * 405 | * For modern browsers 406 | * 1. The space content is one way to avoid an Opera bug when the 407 | * `contenteditable` attribute is included anywhere else in the document. 408 | * Otherwise it causes space to appear at the top and bottom of elements 409 | * that receive the `clearfix` class. 410 | * 2. The use of `table` rather than `block` is only necessary if using 411 | * `:before` to contain the top-margins of child elements. 412 | */ 413 | 414 | .clearfix:before, 415 | .clearfix:after { 416 | content: " "; /* 1 */ 417 | display: table; /* 2 */ 418 | } 419 | 420 | .clearfix:after { 421 | clear: both; 422 | } 423 | -------------------------------------------------------------------------------- /help.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Trianglify Background Generator 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Width

17 |

Width in pixels of the generated background

18 |

Height

19 |

Height in pixels of the generated background

20 |

Cell Size

21 |

Size of the generated cells

22 |

Cell Padding

23 |

The minimum distance between each point

24 |

Bleed

25 |

Set how far outside the visible area of SVG points should be rendered

26 |

X Gradient

27 |

Colours used to construct a gradient for the x-axis

28 |

Y Gradient

29 |

Colours used to construct a gradient for the y-axis

30 |

Both

31 |

Use the same colours for both the x-axis and y-axis

32 |

Randomise Colours

33 |

Use a random colour palette for each axis

34 |

Regenerate

35 |

Regenerate a new background using the current options

36 |
37 |
38 |

Back

39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Trianglify Background Generator 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 | trianglify background generator 20 |

21 |
22 |
23 |
24 |

25 | LOADING.... 26 |

27 | 28 |
29 |
30 |
31 |

Render Options

32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 |

150

40 | 41 | 42 |
43 |

15

44 | 45 | 46 |
47 |

150

48 |
49 |
50 |

Colour Scheme

51 |

52 | Select from the top 100 palettes from colourlovers, and also the ColorBrewer palettes. 53 |

54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
63 | 64 | 65 | Download 66 | Help 67 |
68 | 69 |
70 |
71 |
72 | 78 | 79 |
80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | var currentTrianglifier; 2 | var currentPattern; 3 | 4 | var palettes = []; 5 | var currentXPalette; 6 | var currentYPalette; 7 | 8 | var NO_OF_PALETTES_TO_RETRIEVE = 100; 9 | 10 | var triOptions = { 11 | width: function() { 12 | return parseInt($("#bg-width").val()); 13 | }, 14 | height: function() { 15 | return parseInt($("#bg-height").val()); 16 | }, 17 | cellSize: function(){ 18 | return $('#cell-slider').slider("value"); 19 | }, 20 | cellpadding: function(){ 21 | return $('#cellpadding-slider').slider("value"); 22 | }, 23 | bleed: function(){ 24 | return $('#bleed-slider').slider("value"); 25 | }, 26 | xColors: function(){ 27 | return currentXPalette.colors; 28 | }, 29 | yColors: function(){ 30 | return currentYPalette.colors; 31 | } 32 | }; 33 | 34 | initialiseApp(); 35 | 36 | function initialiseApp() { 37 | initiateSliders(); 38 | getColourSchemes(NO_OF_PALETTES_TO_RETRIEVE); 39 | } 40 | 41 | function setNewTrianglifier() { 42 | currentTrianglifier = new Trianglify({"bleed": triOptions.bleed(), 43 | "cellsize": triOptions.cellSize(), 44 | "x_gradient": triOptions.xColors(), 45 | "y_gradient": triOptions.yColors(), 46 | "cellpadding": triOptions.cellpadding(), 47 | "noiseIntensity": 0 48 | }); 49 | } 50 | 51 | function updateScreen() { 52 | setNewTrianglifier(); 53 | generateBackground(); 54 | } 55 | 56 | function generateBackground() { 57 | currentPattern = currentTrianglifier.generate(triOptions.width(), triOptions.height()); 58 | $("#backgrounds").css({"background-image": currentPattern.dataUrl}); 59 | convertSVGtoPNG(); 60 | } 61 | 62 | // Creates an image from an SVG, then sets up the 'Download' link so the user 63 | // can open the image in a new tab 64 | function convertSVGtoPNG() { 65 | var canvas = document.getElementById('the-canvas'); 66 | var context = canvas.getContext('2d'); 67 | canvas.width = triOptions.width(); 68 | canvas.height = triOptions.height(); 69 | 70 | var image = new Image(); 71 | 72 | $(image).on("load", function() { 73 | context.drawImage(image, 0, 0); 74 | $("#download-btn").attr("href", canvas.toDataURL("image/png")); 75 | }); 76 | image.src = currentPattern.dataUri; 77 | } 78 | 79 | // Class representing a single colour palette made up of multiple colours 80 | // Colours are simply hex strings 81 | function Palette(name, colors) { 82 | this.name = name; 83 | this.colors = colors; 84 | } 85 | 86 | // Retrieves colour palettes using the Colourlovers API, creating a new Palette 87 | // for each 88 | function getColourSchemes(limit) { 89 | $.ajax({ 90 | type: "GET", 91 | url: "http://www.colourlovers.com/api/palettes/top?jsonCallback=?", 92 | data: { numResults: limit }, 93 | dataType: 'json', 94 | success: function(data){ 95 | $(data).each(function() { 96 | var palette_hash = this; 97 | var palette_name = palette_hash["title"]; 98 | var colors = []; 99 | 100 | $(palette_hash["colors"]).each(function(){ 101 | colors.push("#" + this); 102 | }); 103 | 104 | palettes.push(new Palette(palette_name, colors)); 105 | }); 106 | addColourList(); 107 | 108 | currentXPalette = palettes[0]; 109 | currentYPalette = palettes[0]; 110 | updateScreen(); 111 | $("#loading").fadeOut(500); 112 | } 113 | }); 114 | } 115 | 116 | // Adds a scrollable div to the page, containing clickable 117 | // palettes retrieved from the Colourlovers API 118 | function addColourList() { 119 | addColorbrewerPalettes(); 120 | 121 | $(palettes).each(function(index){ 122 | var cont = $("
"); 123 | var palette = this; 124 | var noOfColors = palette.colors.length; 125 | 126 | $(palette.colors).each(function(){ 127 | var paletteColor = $(""); 128 | $(paletteColor).css({"width": (100 / noOfColors) + "%", 129 | "background-color": this}); 130 | $(cont).append(paletteColor); 131 | }); 132 | $("#colour-list").append(cont); 133 | }); 134 | 135 | $("#colour-list").on("click", ".palette-cont", function() { 136 | var paletteIndex = $(this).data("palette-index"); 137 | 138 | $(".palette-cont").css("border", "none"); 139 | $(this).css("border", "3px solid #444444"); 140 | 141 | switch($("[type='radio']:checked").val()) { 142 | case "x": 143 | currentXPalette = palettes[paletteIndex]; 144 | break; 145 | case "y": 146 | currentYPalette = palettes[paletteIndex]; 147 | break; 148 | case "z": 149 | currentXPalette = palettes[paletteIndex]; 150 | currentYPalette = palettes[paletteIndex]; 151 | break; 152 | } 153 | updateScreen(); 154 | }); 155 | } 156 | 157 | // UI initialisers and event handlers 158 | 159 | function initiateSliders() { 160 | $('#bleed-slider').slider({ 161 | max: 500, 162 | min: 10, 163 | value: 150, 164 | step: 5, 165 | slide: function(e, slider) { 166 | $('#bleed-value').html(slider.value); 167 | updateScreen(); 168 | } 169 | }); 170 | 171 | $('#cell-slider').slider({ 172 | max: 500, 173 | min: 10, 174 | value: 150, 175 | step: 5, 176 | slide: function(e, slider) { 177 | $('#cell-value').html(slider.value); 178 | updateScreen(); 179 | } 180 | }); 181 | 182 | $('#cellpadding-slider').slider({ 183 | max: 500, 184 | min: 10, 185 | value: 15, 186 | step: 5, 187 | slide: function(e, slider) { 188 | $('#cellpadding-value').html(slider.value); 189 | updateScreen(); 190 | } 191 | }); 192 | } 193 | 194 | $(".screen-size-input").on("change", function(){ 195 | updateScreen(); 196 | }); 197 | 198 | $("#randomise-colours").on("click", function(){ 199 | currentXPalette = palettes[(Math.floor(Math.random() * NO_OF_PALETTES_TO_RETRIEVE))]; 200 | currentYPalette = palettes[(Math.floor(Math.random() * NO_OF_PALETTES_TO_RETRIEVE))]; 201 | $(".palette-cont").css("border", "none"); 202 | updateScreen(); 203 | }); 204 | 205 | $("#generate").on('click', function() { 206 | updateScreen(); 207 | }); 208 | 209 | // $(colorbrewer).each(function(){ 210 | // $(this).each(function(){ 211 | // $(this).each(function(){ 212 | // console.log(this); 213 | // }); 214 | // }); 215 | // }); 216 | 217 | function addColorbrewerPalettes() { 218 | Object.keys(colorbrewer).forEach(function(key){ 219 | Object.keys(colorbrewer[key]).forEach(function(paletteKey){ 220 | var currPalette = colorbrewer[key]; 221 | var colourArray = currPalette[paletteKey]; 222 | palettes.push(new Palette("colorbrewer_palette", colourArray)); 223 | }); 224 | }); 225 | } 226 | -------------------------------------------------------------------------------- /js/top_palettes.json: -------------------------------------------------------------------------------- 1 | if ((typeof ? !== "undefined")) { 2 | ?([{"id":92095,"title":"Giant Goldfish","userName":"manekineko","numViews":543928,"numVotes":8587,"numComments":709,"numHearts":4.5,"rank":1,"dateCreated":"2007-07-03 10:42:02","colors":["69D2E7","A7DBD8","E0E4CC","F38630","FA6900"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/92095\/Giant_Goldfish","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/69D2E7\/A7DBD8\/E0E4CC\/F38630\/FA6900\/Giant_Goldfish.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/p\/92\/92095_Giant_Goldfish.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/92095"},{"id":629637,"title":"(\u25d5\u301d\u25d5)","userName":"sugar!","numViews":198780,"numVotes":6270,"numComments":365,"numHearts":5,"rank":2,"dateCreated":"2008-12-02 09:31:23","colors":["FE4365","FC9D9A","F9CDAD","C8C8A9","83AF9B"],"description":"*plays happy music* \n\nTo all sugar lovers out there, sugar hearts you! \u2665\n\nCheers,\n(\u25d5\u301d\u25d5) sugar!!\n\n\"(\u25d5\u301d\u25d5)\"<\/a>\n\"(\u25d5\u301d\u25d5)\"<\/a>\n\"(\u25d5\u301d\u25d5)\"<\/a>\n\"(\u25d5\u301d\u25d5)\"<\/a>","url":"http:\/\/www.colourlovers.com\/palette\/629637\/(\u25d5\u301d\u25d5)","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/FE4365\/FC9D9A\/F9CDAD\/C8C8A9\/83AF9B\/(\u25d5\u301d\u25d5).png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/629\/629637_().png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/629637"},{"id":694737,"title":"Thought Provoking","userName":"Miss_Anthropy","numViews":271988,"numVotes":6190,"numComments":368,"numHearts":5,"rank":3,"dateCreated":"2009-02-03 16:46:36","colors":["ECD078","D95B43","C02942","542437","53777A"],"description":"A theme palette centered around the word thought.","url":"http:\/\/www.colourlovers.com\/palette\/694737\/Thought_Provoking","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/ECD078\/D95B43\/C02942\/542437\/53777A\/Thought_Provoking.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/p\/694\/694737_Thought_Provoking.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/694737"},{"id":1930,"title":"cheer up emo kid","userName":"electrikmonk","numViews":257825,"numVotes":5018,"numComments":234,"numHearts":3.5,"rank":4,"dateCreated":"2005-08-20 06:19:40","colors":["556270","4ECDC4","C7F464","FF6B6B","C44D58"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/1930\/cheer_up_emo_kid","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/556270\/4ECDC4\/C7F464\/FF6B6B\/C44D58\/cheer_up_emo_kid.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/p\/1\/1930_cheer_up_emo_kid.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/1930"},{"id":49963,"title":"let them eat cake","userName":"lunalein","numViews":155533,"numVotes":4139,"numComments":265,"numHearts":5,"rank":6,"dateCreated":"2007-03-01 11:08:04","colors":["774F38","E08E79","F1D4AF","ECE5CE","C5E0DC"],"description":"Sofia Coppola started it!","url":"http:\/\/www.colourlovers.com\/palette\/49963\/let_them_eat_cake","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/774F38\/E08E79\/F1D4AF\/ECE5CE\/C5E0DC\/let_them_eat_cake.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/p\/49\/49963_let_them_eat_cake.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/49963"},{"id":292482,"title":"Terra?","userName":"GlueStudio","numViews":193119,"numVotes":3642,"numComments":559,"numHearts":4.5,"rank":7,"dateCreated":"2008-02-29 08:37:21","colors":["E8DDCB","CDB380","036564","033649","031634"],"description":"The Heart","url":"http:\/\/www.colourlovers.com\/palette\/292482\/Terra","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/E8DDCB\/CDB380\/036564\/033649\/031634\/Terra.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/292\/292482_Terra.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/292482"},{"id":848743,"title":"(\u25d5 \u201d \u25d5)","userName":"sugar!","numViews":149476,"numVotes":3580,"numComments":261,"numHearts":4.5,"rank":8,"dateCreated":"2009-06-05 00:38:14","colors":["490A3D","BD1550","E97F02","F8CA00","8A9B0F"],"description":"*plays happy music*\n\nTo all sugar lovers out there, sugar hearts you! \u2665\n\nCheers,\n(\u25d5\u301d\u25d5) sugar!!\n\n\n** Sugar is not much good at colours any more. Sorry, everyone!","url":"http:\/\/www.colourlovers.com\/palette\/848743\/(\u25d5_\u201d_\u25d5)","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/490A3D\/BD1550\/E97F02\/F8CA00\/8A9B0F\/(\u25d5_\u201d_\u25d5).png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/848\/848743_(__).png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/848743"},{"id":443995,"title":"i demand a pancake","userName":"alpen","numViews":124335,"numVotes":3391,"numComments":394,"numHearts":5,"rank":10,"dateCreated":"2008-07-03 13:30:31","colors":["594F4F","547980","45ADA8","9DE0AD","E5FCC2"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/443995\/i_demand_a_pancake","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/594F4F\/547980\/45ADA8\/9DE0AD\/E5FCC2\/i_demand_a_pancake.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/p\/443\/443995_i_demand_a_pancake.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/443995"},{"id":1473,"title":"Ocean Five","userName":"DESIGNJUNKEE","numViews":154206,"numVotes":3170,"numComments":99,"numHearts":0,"rank":11,"dateCreated":"2005-08-13 14:25:49","colors":["00A0B0","6A4A3C","CC333F","EB6841","EDC951"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/1473\/Ocean_Five","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/00A0B0\/6A4A3C\/CC333F\/EB6841\/EDC951\/Ocean_Five.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/p\/1\/1473_Ocean_Five.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/1473"},{"id":867235,"title":"LoversInJapan","userName":"lovelyrita","numViews":81249,"numVotes":2863,"numComments":124,"numHearts":4.5,"rank":12,"dateCreated":"2009-06-21 16:16:32","colors":["E94E77","D68189","C6A49A","C6E5D9","F4EAD5"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/867235\/LoversInJapan","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/E94E77\/D68189\/C6A49A\/C6E5D9\/F4EAD5\/LoversInJapan.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/867\/867235_LoversInJapan.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/867235"},{"id":77121,"title":"Good Friends","userName":"Yasmino","numViews":149479,"numVotes":2789,"numComments":103,"numHearts":5,"rank":13,"dateCreated":"2007-06-01 14:42:04","colors":["D9CEB2","948C75","D5DED9","7A6A53","99B2B7"],"description":"Good friends are hard to find, harder to leave, and impossible to forget.","url":"http:\/\/www.colourlovers.com\/palette\/77121\/Good_Friends","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/D9CEB2\/948C75\/D5DED9\/7A6A53\/99B2B7\/Good_Friends.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/p\/77\/77121_Good_Friends.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/77121"},{"id":359978,"title":"w o r d l e s s .","userName":"tvr","numViews":109951,"numVotes":2651,"numComments":222,"numHearts":5,"rank":14,"dateCreated":"2008-05-01 15:49:22","colors":["FFFFFF","CBE86B","F2E9E1","1C140D","CBE86B"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/359978\/w_o_r_d_l_e_s_s_.","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/FFFFFF\/CBE86B\/F2E9E1\/1C140D\/CBE86B\/w_o_r_d_l_e_s_s_..png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/359\/359978_w_o_r_d_l_e_s_s_..png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/359978"},{"id":444487,"title":"Curiosity Killed","userName":"Miaka","numViews":94556,"numVotes":2638,"numComments":185,"numHearts":5,"rank":15,"dateCreated":"2008-07-03 18:47:51","colors":["EFFFCD","DCE9BE","555152","2E2633","99173C"],"description":"Curiosity Killed- From season 4 of Tales from the Crypt (my fave show).\n\n#18 in my TFTC Series.","url":"http:\/\/www.colourlovers.com\/palette\/444487\/Curiosity_Killed","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/EFFFCD\/DCE9BE\/555152\/2E2633\/99173C\/Curiosity_Killed.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/444\/444487_Curiosity_Killed.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/444487"},{"id":932683,"title":"Compatible","userName":"joy_of_summer","numViews":80400,"numVotes":2523,"numComments":108,"numHearts":5,"rank":16,"dateCreated":"2009-08-22 02:38:51","colors":["3FB8AF","7FC7AF","DAD8A7","FF9E9D","FF3D7F"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/932683\/Compatible","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/3FB8AF\/7FC7AF\/DAD8A7\/FF9E9D\/FF3D7F\/Compatible.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/932\/932683_Compatible.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/932683"},{"id":723615,"title":"clairedelune","userName":"lovelyrita","numViews":62766,"numVotes":2157,"numComments":171,"numHearts":5,"rank":17,"dateCreated":"2009-02-26 21:33:49","colors":["413E4A","73626E","B38184","F0B49E","F7E4BE"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/723615\/clairedelune","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/413E4A\/73626E\/B38184\/F0B49E\/F7E4BE\/clairedelune.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/p\/723\/723615_clairedelune.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/723615"},{"id":482774,"title":"dream magnet","userName":"lagunabeach","numViews":110653,"numVotes":2091,"numComments":193,"numHearts":0,"rank":18,"dateCreated":"2008-08-01 19:26:37","colors":["343838","005F6B","008C9E","00B4CC","00DFFC"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/482774\/dream_magnet","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/343838\/005F6B\/008C9E\/00B4CC\/00DFFC\/dream_magnet.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/482\/482774_dream_magnet.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/482774"},{"id":1098589,"title":"coup de gr\u00e2ce","userName":"pseudonympho","numViews":48584,"numVotes":1947,"numComments":58,"numHearts":4.5,"rank":19,"dateCreated":"2010-02-04 18:22:24","colors":["99B898","FECEA8","FF847C","E84A5F","2A363B"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/1098589\/coup_de_gr\u00e2ce","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/99B898\/FECEA8\/FF847C\/E84A5F\/2A363B\/coup_de_gr\u00e2ce.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/1098\/1098589_coup_de_grce.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/1098589"},{"id":940086,"title":"mystery machine","userName":"valeryanaglz","numViews":54922,"numVotes":1882,"numComments":98,"numHearts":5,"rank":20,"dateCreated":"2009-08-29 11:04:04","colors":["554236","F77825","D3CE3D","F1EFA5","60B99A"],"description":"\"mystery_machine\"<\/a>\n\"mystery_machine\"<\/a>\n\"mystery_machine\"<\/a>\n\"mystery_machine\"<\/a>\n\"mystery_machine\"<\/a>\n\"mystery_machine\"<\/a>\n\"mystery_machine\"<\/a>\n\nthe wonderful pattern of candycrack\n\"Mystery_Machine\"<\/a>","url":"http:\/\/www.colourlovers.com\/palette\/940086\/mystery_machine","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/554236\/F77825\/D3CE3D\/F1EFA5\/60B99A\/mystery_machine.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/940\/940086_mystery_machine.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/940086"},{"id":379413,"title":"you are beautiful","userName":"Sanguine","numViews":57694,"numVotes":1775,"numComments":78,"numHearts":5,"rank":21,"dateCreated":"2008-05-17 01:20:13","colors":["351330","424254","64908A","E8CAA4","CC2A41"],"description":"Yes you, right there, reading this: you are beautiful.\n\nSmile.","url":"http:\/\/www.colourlovers.com\/palette\/379413\/you_are_beautiful","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/351330\/424254\/64908A\/E8CAA4\/CC2A41\/you_are_beautiful.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/379\/379413_you_are_beautiful.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/379413"},{"id":937624,"title":"Dance To Forget","userName":"joy_of_summer","numViews":70021,"numVotes":1766,"numComments":51,"numHearts":5,"rank":22,"dateCreated":"2009-08-27 03:25:37","colors":["FF4E50","FC913A","F9D423","EDE574","E1F5C4"],"description":"","url":"http:\/\/www.colourlovers.com\/palette\/937624\/Dance_To_Forget","imageUrl":"http:\/\/www.colourlovers.com\/paletteImg\/FF4E50\/FC913A\/F9D423\/EDE574\/E1F5C4\/Dance_To_Forget.png","badgeUrl":"http:\/\/www.colourlovers.com\/images\/badges\/pw\/937\/937624_Dance_To_Forget.png","apiUrl":"http:\/\/www.colourlovers.com\/api\/palette\/937624"}]); 3 | } 4 | -------------------------------------------------------------------------------- /js/trianglify-min.js: -------------------------------------------------------------------------------- 1 | // Trianglify. Needs d3js 2 | function Trianglify(options) { 3 | if (typeof options == 'undefined') options = {}; 4 | // defaults 5 | this.options = { 6 | cellsize: defaults(options.cellsize, 150), // zero not valid here 7 | bleed: defaults(options.cellsize, 150), 8 | cellpadding: defaults(options.cellpadding, 0.1*options.cellsize || 15), 9 | noiseIntensity: defaults(options.noiseIntensity, 0.3), 10 | x_gradient: defaults(options.x_gradient, Trianglify.randomColor()), 11 | } 12 | this.options.y_gradient = options.y_gradient || this.options.x_gradient.map(function(c){return d3.rgb(c).brighter(.5)}) 13 | function defaults(opt, def) { 14 | return (typeof opt !== 'undefined') ? opt : def; 15 | } 16 | } 17 | 18 | Trianglify.randomColor = function() { 19 | var keys = Object.keys(colorbrewer); 20 | var palette = colorbrewer[keys[Math.floor(Math.random()*keys.length)]]; 21 | keys = Object.keys(palette); 22 | var colors = palette[keys[Math.floor(Math.random()*keys.length)]]; 23 | return colors; 24 | } 25 | 26 | Trianglify.prototype.generate = function(width, height) { 27 | return new Trianglify.Pattern(this.options, width, height); 28 | } 29 | 30 | Trianglify.Pattern = function(options, width, height) { 31 | this.options = options 32 | this.width = width; 33 | this.height = height; 34 | this.svg = this.generateSVG(); 35 | 36 | var s = new XMLSerializer(); 37 | this.svgString = s.serializeToString(this.svg); 38 | this.base64 = btoa(this.svgString); 39 | this.dataUri = 'data:image/svg+xml;base64,' + this.base64; 40 | this.dataUrl = 'url('+this.dataUri+')'; 41 | } 42 | 43 | Trianglify.Pattern.prototype.append = function() { 44 | document.body.appendChild(this.svg); 45 | } 46 | 47 | Trianglify.Pattern.gradient_2d = function (x_gradient, y_gradient, width, height) { 48 | 49 | return function(x, y) { 50 | var color_x = d3.scale.linear() 51 | .range(x_gradient) 52 | .domain(d3.range(0, width, width/x_gradient.length)); //[-bleed, width+bleed] 53 | var color_y = d3.scale.linear() 54 | .range(y_gradient) 55 | .domain(d3.range(0, height, height/y_gradient.length)); //[-bleed, width+bleed] 56 | return d3.interpolateRgb(color_x(x), color_y(y))(0.5); 57 | } 58 | } 59 | 60 | Trianglify.Pattern.prototype.generateSVG = function () { 61 | var options = this.options; 62 | cellsX = Math.ceil((this.width+options.bleed*2)/options.cellsize), 63 | cellsY = Math.ceil((this.height+options.bleed*2)/options.cellsize), 64 | color = Trianglify.Pattern.gradient_2d(options.x_gradient, options.y_gradient, this.width, this.height); 65 | 66 | var vertices = d3.range(cellsX*cellsY).map(function(d) { 67 | // figure out which cell we are in 68 | var col = d % cellsX; 69 | var row = Math.floor(d / cellsX); 70 | var x = -options.bleed + col*options.cellsize + Math.random() * (options.cellsize - options.cellpadding*2) + options.cellpadding; 71 | var y = -options.bleed + row*options.cellsize + Math.random() * (options.cellsize - options.cellpadding*2) + options.cellpadding; 72 | // return [x*cellsize, y*cellsize]; 73 | return [x, y]; // Populate the actual background with points 74 | }); 75 | 76 | var elem = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 77 | // elem.setAttribute("width", this.width+"px"); 78 | // elem.setAttribute("height", this.height+"px"); 79 | var svg = d3.select(elem); 80 | // var svg = d3.select("body").append("svg") 81 | svg.attr("width", this.width); 82 | svg.attr("height", this.height); 83 | svg.attr('xmlns', 'http://www.w3.org/2000/svg'); 84 | var group = svg.append("g"); 85 | 86 | 87 | if (options.noiseIntensity > 0.01) { 88 | var filter = svg.append("filter").attr("id", "noise"); 89 | 90 | var noise = filter.append('feTurbulence').attr('type', 'fractalNoise').attr('in', 'fillPaint').attr('fill', '#F00').attr('baseFrequency', 0.7).attr('numOctaves', '10').attr('stitchTiles', 'stitch'); 91 | var transfer = filter.append('feComponentTransfer'); 92 | transfer.append('feFuncR').attr('type', 'linear').attr('slope', '2').attr('intercept', '-.5'); 93 | transfer.append('feFuncG').attr('type', 'linear').attr('slope', '2').attr('intercept', '-.5'); 94 | transfer.append('feFuncB').attr('type', 'linear').attr('slope', '2').attr('intercept', '-.5'); 95 | filter.append('feColorMatrix').attr('type', 'matrix').attr('values', "0.3333 0.3333 0.3333 0 0 \n 0.3333 0.3333 0.3333 0 0 \n 0.3333 0.3333 0.3333 0 0 \n 0 0 0 1 0") 96 | var filterRect = svg.append("rect").attr("opacity", options.noiseIntensity).attr('width', '100%').attr('height', '100%').attr("filter", "url(#noise)"); 97 | } 98 | var polys = d3.geom.delaunay(vertices); 99 | polys.forEach(function(d) { 100 | var x = (d[0][0] + d[1][0] + d[2][0])/3; 101 | var y = (d[0][1] + d[1][1] + d[2][1])/3; 102 | var c = color(x, y); 103 | group.append("path").attr("d", "M" + d.join("L") + "Z").attr({ fill: c, stroke: c}); 104 | }) 105 | return svg.node(); 106 | } 107 | 108 | //colorbrewer 109 | var colorbrewer = {YlGn: { 110 | 3: ["#f7fcb9","#addd8e","#31a354"], 111 | 4: ["#ffffcc","#c2e699","#78c679","#238443"], 112 | 5: ["#ffffcc","#c2e699","#78c679","#31a354","#006837"], 113 | 6: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#31a354","#006837"], 114 | 7: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"], 115 | 8: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"], 116 | 9: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"] 117 | },YlGnBu: { 118 | 3: ["#edf8b1","#7fcdbb","#2c7fb8"], 119 | 4: ["#ffffcc","#a1dab4","#41b6c4","#225ea8"], 120 | 5: ["#ffffcc","#a1dab4","#41b6c4","#2c7fb8","#253494"], 121 | 6: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"], 122 | 7: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"], 123 | 8: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"], 124 | 9: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"] 125 | },GnBu: { 126 | 3: ["#e0f3db","#a8ddb5","#43a2ca"], 127 | 4: ["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"], 128 | 5: ["#f0f9e8","#bae4bc","#7bccc4","#43a2ca","#0868ac"], 129 | 6: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#43a2ca","#0868ac"], 130 | 7: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"], 131 | 8: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"], 132 | 9: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"] 133 | },BuGn: { 134 | 3: ["#e5f5f9","#99d8c9","#2ca25f"], 135 | 4: ["#edf8fb","#b2e2e2","#66c2a4","#238b45"], 136 | 5: ["#edf8fb","#b2e2e2","#66c2a4","#2ca25f","#006d2c"], 137 | 6: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#2ca25f","#006d2c"], 138 | 7: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"], 139 | 8: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"], 140 | 9: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"] 141 | },PuBuGn: { 142 | 3: ["#ece2f0","#a6bddb","#1c9099"], 143 | 4: ["#f6eff7","#bdc9e1","#67a9cf","#02818a"], 144 | 5: ["#f6eff7","#bdc9e1","#67a9cf","#1c9099","#016c59"], 145 | 6: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#1c9099","#016c59"], 146 | 7: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"], 147 | 8: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"], 148 | 9: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"] 149 | },PuBu: { 150 | 3: ["#ece7f2","#a6bddb","#2b8cbe"], 151 | 4: ["#f1eef6","#bdc9e1","#74a9cf","#0570b0"], 152 | 5: ["#f1eef6","#bdc9e1","#74a9cf","#2b8cbe","#045a8d"], 153 | 6: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#2b8cbe","#045a8d"], 154 | 7: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"], 155 | 8: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"], 156 | 9: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"] 157 | },BuPu: { 158 | 3: ["#e0ecf4","#9ebcda","#8856a7"], 159 | 4: ["#edf8fb","#b3cde3","#8c96c6","#88419d"], 160 | 5: ["#edf8fb","#b3cde3","#8c96c6","#8856a7","#810f7c"], 161 | 6: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"], 162 | 7: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"], 163 | 8: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"], 164 | 9: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"] 165 | },RdPu: { 166 | 3: ["#fde0dd","#fa9fb5","#c51b8a"], 167 | 4: ["#feebe2","#fbb4b9","#f768a1","#ae017e"], 168 | 5: ["#feebe2","#fbb4b9","#f768a1","#c51b8a","#7a0177"], 169 | 6: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#c51b8a","#7a0177"], 170 | 7: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"], 171 | 8: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"], 172 | 9: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"] 173 | },PuRd: { 174 | 3: ["#e7e1ef","#c994c7","#dd1c77"], 175 | 4: ["#f1eef6","#d7b5d8","#df65b0","#ce1256"], 176 | 5: ["#f1eef6","#d7b5d8","#df65b0","#dd1c77","#980043"], 177 | 6: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#dd1c77","#980043"], 178 | 7: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"], 179 | 8: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"], 180 | 9: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"] 181 | },OrRd: { 182 | 3: ["#fee8c8","#fdbb84","#e34a33"], 183 | 4: ["#fef0d9","#fdcc8a","#fc8d59","#d7301f"], 184 | 5: ["#fef0d9","#fdcc8a","#fc8d59","#e34a33","#b30000"], 185 | 6: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#e34a33","#b30000"], 186 | 7: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"], 187 | 8: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"], 188 | 9: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"] 189 | },YlOrRd: { 190 | 3: ["#ffeda0","#feb24c","#f03b20"], 191 | 4: ["#ffffb2","#fecc5c","#fd8d3c","#e31a1c"], 192 | 5: ["#ffffb2","#fecc5c","#fd8d3c","#f03b20","#bd0026"], 193 | 6: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#f03b20","#bd0026"], 194 | 7: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"], 195 | 8: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"], 196 | 9: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"] 197 | },YlOrBr: { 198 | 3: ["#fff7bc","#fec44f","#d95f0e"], 199 | 4: ["#ffffd4","#fed98e","#fe9929","#cc4c02"], 200 | 5: ["#ffffd4","#fed98e","#fe9929","#d95f0e","#993404"], 201 | 6: ["#ffffd4","#fee391","#fec44f","#fe9929","#d95f0e","#993404"], 202 | 7: ["#ffffd4","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"], 203 | 8: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"], 204 | 9: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"] 205 | },Purples: { 206 | 3: ["#efedf5","#bcbddc","#756bb1"], 207 | 4: ["#f2f0f7","#cbc9e2","#9e9ac8","#6a51a3"], 208 | 5: ["#f2f0f7","#cbc9e2","#9e9ac8","#756bb1","#54278f"], 209 | 6: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#756bb1","#54278f"], 210 | 7: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"], 211 | 8: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"], 212 | 9: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"] 213 | },Blues: { 214 | 3: ["#deebf7","#9ecae1","#3182bd"], 215 | 4: ["#eff3ff","#bdd7e7","#6baed6","#2171b5"], 216 | 5: ["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"], 217 | 6: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"], 218 | 7: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"], 219 | 8: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"], 220 | 9: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"] 221 | },Greens: { 222 | 3: ["#e5f5e0","#a1d99b","#31a354"], 223 | 4: ["#edf8e9","#bae4b3","#74c476","#238b45"], 224 | 5: ["#edf8e9","#bae4b3","#74c476","#31a354","#006d2c"], 225 | 6: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#31a354","#006d2c"], 226 | 7: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"], 227 | 8: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"], 228 | 9: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"] 229 | },Oranges: { 230 | 3: ["#fee6ce","#fdae6b","#e6550d"], 231 | 4: ["#feedde","#fdbe85","#fd8d3c","#d94701"], 232 | 5: ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"], 233 | 6: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#e6550d","#a63603"], 234 | 7: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"], 235 | 8: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"], 236 | 9: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"] 237 | },Reds: { 238 | 3: ["#fee0d2","#fc9272","#de2d26"], 239 | 4: ["#fee5d9","#fcae91","#fb6a4a","#cb181d"], 240 | 5: ["#fee5d9","#fcae91","#fb6a4a","#de2d26","#a50f15"], 241 | 6: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"], 242 | 7: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"], 243 | 8: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"], 244 | 9: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"] 245 | },Greys: { 246 | 3: ["#f0f0f0","#bdbdbd","#636363"], 247 | 4: ["#f7f7f7","#cccccc","#969696","#525252"], 248 | 5: ["#f7f7f7","#cccccc","#969696","#636363","#252525"], 249 | 6: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#636363","#252525"], 250 | 7: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"], 251 | 8: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"], 252 | 9: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"] 253 | },PuOr: { 254 | 3: ["#f1a340","#f7f7f7","#998ec3"], 255 | 4: ["#e66101","#fdb863","#b2abd2","#5e3c99"], 256 | 5: ["#e66101","#fdb863","#f7f7f7","#b2abd2","#5e3c99"], 257 | 6: ["#b35806","#f1a340","#fee0b6","#d8daeb","#998ec3","#542788"], 258 | 7: ["#b35806","#f1a340","#fee0b6","#f7f7f7","#d8daeb","#998ec3","#542788"], 259 | 8: ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"], 260 | 9: ["#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788"], 261 | 10: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"], 262 | 11: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"] 263 | },BrBG: { 264 | 3: ["#d8b365","#f5f5f5","#5ab4ac"], 265 | 4: ["#a6611a","#dfc27d","#80cdc1","#018571"], 266 | 5: ["#a6611a","#dfc27d","#f5f5f5","#80cdc1","#018571"], 267 | 6: ["#8c510a","#d8b365","#f6e8c3","#c7eae5","#5ab4ac","#01665e"], 268 | 7: ["#8c510a","#d8b365","#f6e8c3","#f5f5f5","#c7eae5","#5ab4ac","#01665e"], 269 | 8: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e"], 270 | 9: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"], 271 | 10: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"], 272 | 11: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"] 273 | },PRGn: { 274 | 3: ["#af8dc3","#f7f7f7","#7fbf7b"], 275 | 4: ["#7b3294","#c2a5cf","#a6dba0","#008837"], 276 | 5: ["#7b3294","#c2a5cf","#f7f7f7","#a6dba0","#008837"], 277 | 6: ["#762a83","#af8dc3","#e7d4e8","#d9f0d3","#7fbf7b","#1b7837"], 278 | 7: ["#762a83","#af8dc3","#e7d4e8","#f7f7f7","#d9f0d3","#7fbf7b","#1b7837"], 279 | 8: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837"], 280 | 9: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837"], 281 | 10: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"], 282 | 11: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"] 283 | },PiYG: { 284 | 3: ["#e9a3c9","#f7f7f7","#a1d76a"], 285 | 4: ["#d01c8b","#f1b6da","#b8e186","#4dac26"], 286 | 5: ["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"], 287 | 6: ["#c51b7d","#e9a3c9","#fde0ef","#e6f5d0","#a1d76a","#4d9221"], 288 | 7: ["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"], 289 | 8: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221"], 290 | 9: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221"], 291 | 10: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"], 292 | 11: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"] 293 | },RdBu: { 294 | 3: ["#ef8a62","#f7f7f7","#67a9cf"], 295 | 4: ["#ca0020","#f4a582","#92c5de","#0571b0"], 296 | 5: ["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"], 297 | 6: ["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"], 298 | 7: ["#b2182b","#ef8a62","#fddbc7","#f7f7f7","#d1e5f0","#67a9cf","#2166ac"], 299 | 8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"], 300 | 9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"], 301 | 10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"], 302 | 11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"] 303 | },RdGy: { 304 | 3: ["#ef8a62","#ffffff","#999999"], 305 | 4: ["#ca0020","#f4a582","#bababa","#404040"], 306 | 5: ["#ca0020","#f4a582","#ffffff","#bababa","#404040"], 307 | 6: ["#b2182b","#ef8a62","#fddbc7","#e0e0e0","#999999","#4d4d4d"], 308 | 7: ["#b2182b","#ef8a62","#fddbc7","#ffffff","#e0e0e0","#999999","#4d4d4d"], 309 | 8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d"], 310 | 9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d"], 311 | 10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"], 312 | 11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"] 313 | },RdYlBu: { 314 | 3: ["#fc8d59","#ffffbf","#91bfdb"], 315 | 4: ["#d7191c","#fdae61","#abd9e9","#2c7bb6"], 316 | 5: ["#d7191c","#fdae61","#ffffbf","#abd9e9","#2c7bb6"], 317 | 6: ["#d73027","#fc8d59","#fee090","#e0f3f8","#91bfdb","#4575b4"], 318 | 7: ["#d73027","#fc8d59","#fee090","#ffffbf","#e0f3f8","#91bfdb","#4575b4"], 319 | 8: ["#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4"], 320 | 9: ["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4"], 321 | 10: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"], 322 | 11: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"] 323 | },Spectral: { 324 | 3: ["#fc8d59","#ffffbf","#99d594"], 325 | 4: ["#d7191c","#fdae61","#abdda4","#2b83ba"], 326 | 5: ["#d7191c","#fdae61","#ffffbf","#abdda4","#2b83ba"], 327 | 6: ["#d53e4f","#fc8d59","#fee08b","#e6f598","#99d594","#3288bd"], 328 | 7: ["#d53e4f","#fc8d59","#fee08b","#ffffbf","#e6f598","#99d594","#3288bd"], 329 | 8: ["#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd"], 330 | 9: ["#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd"], 331 | 10: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"], 332 | 11: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"] 333 | },RdYlGn: { 334 | 3: ["#fc8d59","#ffffbf","#91cf60"], 335 | 4: ["#d7191c","#fdae61","#a6d96a","#1a9641"], 336 | 5: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"], 337 | 6: ["#d73027","#fc8d59","#fee08b","#d9ef8b","#91cf60","#1a9850"], 338 | 7: ["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"], 339 | 8: ["#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850"], 340 | 9: ["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"], 341 | 10: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"], 342 | 11: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"] 343 | },Accent: { 344 | 3: ["#7fc97f","#beaed4","#fdc086"], 345 | 4: ["#7fc97f","#beaed4","#fdc086","#ffff99"], 346 | 5: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0"], 347 | 6: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f"], 348 | 7: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17"], 349 | 8: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"] 350 | },Dark2: { 351 | 3: ["#1b9e77","#d95f02","#7570b3"], 352 | 4: ["#1b9e77","#d95f02","#7570b3","#e7298a"], 353 | 5: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e"], 354 | 6: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02"], 355 | 7: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"], 356 | 8: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"] 357 | },Paired: { 358 | 3: ["#a6cee3","#1f78b4","#b2df8a"], 359 | 4: ["#a6cee3","#1f78b4","#b2df8a","#33a02c"], 360 | 5: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99"], 361 | 6: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c"], 362 | 7: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f"], 363 | 8: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00"], 364 | 9: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6"], 365 | 10: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"], 366 | 11: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99"], 367 | 12: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"] 368 | },Pastel1: { 369 | 3: ["#fbb4ae","#b3cde3","#ccebc5"], 370 | 4: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4"], 371 | 5: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6"], 372 | 6: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc"], 373 | 7: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd"], 374 | 8: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec"], 375 | 9: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"] 376 | },Pastel2: { 377 | 3: ["#b3e2cd","#fdcdac","#cbd5e8"], 378 | 4: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4"], 379 | 5: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9"], 380 | 6: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae"], 381 | 7: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc"], 382 | 8: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"] 383 | },Set1: { 384 | 3: ["#e41a1c","#377eb8","#4daf4a"], 385 | 4: ["#e41a1c","#377eb8","#4daf4a","#984ea3"], 386 | 5: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00"], 387 | 6: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33"], 388 | 7: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628"], 389 | 8: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf"], 390 | 9: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"] 391 | },Set2: { 392 | 3: ["#66c2a5","#fc8d62","#8da0cb"], 393 | 4: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3"], 394 | 5: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854"], 395 | 6: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f"], 396 | 7: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"], 397 | 8: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"] 398 | },Set3: { 399 | 3: ["#8dd3c7","#ffffb3","#bebada"], 400 | 4: ["#8dd3c7","#ffffb3","#bebada","#fb8072"], 401 | 5: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3"], 402 | 6: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462"], 403 | 7: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69"], 404 | 8: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5"], 405 | 9: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9"], 406 | 10: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd"], 407 | 11: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5"], 408 | 12: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"] 409 | }}; 410 | -------------------------------------------------------------------------------- /loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alssndro/trianglify-background-generator/19de3ff59b3f2bd14181685f6b6fc5a0257a7e31/loading.gif --------------------------------------------------------------------------------