├── public ├── favicon.ico ├── css │ └── style.css ├── index.html └── js │ └── app.js ├── app.js └── README.md /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/notchris/decent-patterns/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | let express = require('express') 2 | let app = express() 3 | let path = require('path'); 4 | 5 | app.use(express.static(__dirname + '/public')) 6 | 7 | app.listen(5000, function() { 8 | console.log('Running on port 5000') 9 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Decent Patterns 2 | 3 | Really simple SVG Patterns using single unicode characters. 4 | 5 | ## Patterns 6 | 7 | You can view all of the patterns with their generated SVG snippets on: 8 | 9 | https://notchr.is/patterns/ 10 | -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | text-rendering: optimizeLegibility; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | font-kerning: auto; 7 | } 8 | 9 | html { 10 | font-family: sans-serif; 11 | -webkit-text-size-adjust: 100%; 12 | } 13 | 14 | body,html { 15 | margin: 0; 16 | width:100%; 17 | height:100%; 18 | } 19 | 20 | #app { 21 | width:100%; 22 | height:100%; 23 | } 24 | 25 | div.pattern { 26 | width:100%; 27 | height:100%; 28 | min-height:200px; 29 | max-height:300px; 30 | overflow:hidden; 31 | } 32 | 33 | div.pattern:hover div.title { 34 | display:block; 35 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Decent Patterns | Simple SVG patterns by notchris 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | 15 |

16 |

17 |

18 |

Decent Patterns

19 |

Really simple SVG Patterns using single unicode characters. These are free to use anywhere your heart desires as long as your heart doesn't desire evil.

20 |

21 |

22 | Follow @notchris
23 | @chrismcgrane 24 |

{{patterns.length}} Patterns
Last updated: June 30, 2018

25 |

26 |

27 |

28 | 29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 | 45 |

46 |

47 |

48 | {{pattern.title}}{{pattern.text}} 49 | 50 | 51 |

52 | 53 |

54 |

55 |

56 |

57 | 58 |

59 |

60 |

61 | 62 | 65 | 66 |

67 | 68 | 69 | 70 | 71 | 72 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /public/js/app.js: -------------------------------------------------------------------------------- 1 | let app = new Vue({ 2 | el: '#app', 3 | data: { 4 | patterns: [{ 5 | id: 'baconstrips', 6 | title: 'Bacon Strips', 7 | rotate: 45, 8 | font: 'Arial', 9 | fontSize: '16', 10 | x: '0', 11 | y: '16', 12 | text: '‖', 13 | colorA: '#FFFFFF', 14 | colorB: '#000000', 15 | svg: false 16 | }, { 17 | id: 'mice', 18 | title: 'Mice', 19 | rotate: 0, 20 | font: 'Arial', 21 | fontSize: '16', 22 | x: '0', 23 | y: '8', 24 | text: '∵', 25 | colorA: '#FFFFFF', 26 | colorB: '#000000', 27 | svg: false 28 | }, { 29 | id: 'grid', 30 | title: 'Grid', 31 | rotate: 0, 32 | font: 'Arial', 33 | fontSize: '32', 34 | x: '-5', 35 | y: '16', 36 | text: '⊞', 37 | colorA: '#FFFFFF', 38 | colorB: '#000000', 39 | svg: false 40 | }, { 41 | id: 'dots', 42 | title: 'Dots', 43 | rotate: 0, 44 | font: 'Arial', 45 | fontSize: '32', 46 | x: '-2', 47 | y: '16', 48 | text: '⋰', 49 | colorA: '#FFFFFF', 50 | colorB: '#000000', 51 | svg: false 52 | }, { 53 | id: 'crosshair', 54 | title: 'Crosshair', 55 | rotate: 0, 56 | font: 'Arial', 57 | fontSize: '32', 58 | x: '-1', 59 | y: '16', 60 | text: '⌖', 61 | colorA: '#FFFFFF', 62 | colorB: '#000000', 63 | svg: false 64 | }, { 65 | id: 'blockface', 66 | title: 'Block Face', 67 | rotate: 45, 68 | font: 'Arial', 69 | fontSize: '128', 70 | x: '-1', 71 | y: '32', 72 | text: '▒', 73 | colorA: '#FFFFFF', 74 | colorB: '#000000', 75 | svg: false 76 | }, { 77 | id: 'picket', 78 | title: 'Picket', 79 | rotate: 45, 80 | font: 'Arial', 81 | fontSize: '32', 82 | x: '0', 83 | y: '12', 84 | text: '╬', 85 | colorA: '#FFFFFF', 86 | colorB: '#000000', 87 | svg: false 88 | }, { 89 | id: 'tongues', 90 | title: 'Tongues', 91 | rotate: 45, 92 | font: 'Arial', 93 | fontSize: '16', 94 | x: '0', 95 | y: '8', 96 | text: '◯', 97 | colorA: '#FFFFFF', 98 | colorB: '#000000', 99 | svg: false 100 | }, { 101 | id: 'stars', 102 | title: 'Stars', 103 | rotate: 45, 104 | font: 'Arial', 105 | fontSize: '18', 106 | x: '0', 107 | y: '14', 108 | text: '★', 109 | colorA: '#FFFFFF', 110 | colorB: '#000000', 111 | svg: false 112 | }, { 113 | id: 'stars2', 114 | title: 'Stars 2', 115 | rotate: 45, 116 | font: 'Arial', 117 | fontSize: '18', 118 | x: '0', 119 | y: '14', 120 | text: '☆', 121 | colorA: '#FFFFFF', 122 | colorB: '#000000', 123 | svg: false 124 | }, { 125 | id: 'stars3', 126 | title: 'Stars 3', 127 | rotate: 45, 128 | font: 'Arial', 129 | fontSize: '20', 130 | x: '0', 131 | y: '14', 132 | text: '✶', 133 | colorA: '#FFFFFF', 134 | colorB: '#000000', 135 | svg: false 136 | }, { 137 | id: 'seismo', 138 | title: 'Seismo', 139 | rotate: 45, 140 | font: 'Arial', 141 | fontSize: '16', 142 | x: '-4', 143 | y: '16', 144 | text: '⟿', 145 | colorA: '#FFFFFF', 146 | colorB: '#000000', 147 | svg: false 148 | }, { 149 | id: 'nugget', 150 | title: 'Nugget', 151 | rotate: 0, 152 | font: 'Arial', 153 | fontSize: '42', 154 | x: '-8', 155 | y: '18', 156 | text: '⧄', 157 | colorA: '#FFFFFF', 158 | colorB: '#000000', 159 | svg: false 160 | }, { 161 | id: 'hailstorm', 162 | title: 'Hailstorm', 163 | rotate: -45, 164 | font: 'Arial', 165 | fontSize: '16', 166 | x: '0', 167 | y: '16', 168 | text: '⧫', 169 | colorA: '#FFFFFF', 170 | colorB: '#000000', 171 | svg: false 172 | }, { 173 | id: 'poundit', 174 | title: 'Pound It', 175 | rotate: 45, 176 | font: 'Arial', 177 | fontSize: '16', 178 | x: '0', 179 | y: '16', 180 | text: '⨳', 181 | colorA: '#FFFFFF', 182 | colorB: '#000000', 183 | svg: false 184 | }, { 185 | id: 'peaks', 186 | title: 'Peaks', 187 | rotate: 45, 188 | font: 'Arial', 189 | fontSize: '20', 190 | x: '0', 191 | y: '16', 192 | text: '⩕', 193 | colorA: '#FFFFFF', 194 | colorB: '#000000', 195 | svg: false 196 | }, { 197 | id: 'pokeh', 198 | title: 'Pokeh', 199 | rotate: 45, 200 | font: 'Arial', 201 | fontSize: '20', 202 | x: '0', 203 | y: '16', 204 | text: '⦼', 205 | colorA: '#FFFFFF', 206 | colorB: '#000000', 207 | svg: false 208 | }, { 209 | id: 'hillside', 210 | title: 'Hillside', 211 | rotate: 45, 212 | font: 'Arial', 213 | fontSize: '20', 214 | x: '-5', 215 | y: '16', 216 | text: '⨌', 217 | colorA: '#FFFFFF', 218 | colorB: '#000000', 219 | svg: false 220 | }, { 221 | id: 'uuu', 222 | title: 'Uuu', 223 | rotate: 45, 224 | font: 'Arial', 225 | fontSize: '20', 226 | x: '-3', 227 | y: '16', 228 | text: '⫐', 229 | colorA: '#FFFFFF', 230 | colorB: '#000000', 231 | svg: false 232 | }, { 233 | id: 'chained', 234 | title: 'Chained', 235 | rotate: 0, 236 | font: 'Arial', 237 | fontSize: '32', 238 | x: '-3', 239 | y: '14', 240 | text: '⫘', 241 | colorA: '#FFFFFF', 242 | colorB: '#000000', 243 | svg: false 244 | }, { 245 | id: 'silence', 246 | title: 'Silence', 247 | rotate: -45, 248 | font: 'Arial', 249 | fontSize: '32', 250 | x: '-3', 251 | y: '14', 252 | text: '𝔰', 253 | colorA: '#FFFFFF', 254 | colorB: '#000000', 255 | svg: false 256 | }, { 257 | id: 'diag', 258 | title: 'Diag', 259 | rotate: -45, 260 | font: 'Arial', 261 | fontSize: '32', 262 | x: '-3', 263 | y: '2', 264 | text: 'Δ', 265 | colorA: '#FFFFFF', 266 | colorB: '#000000', 267 | svg: false 268 | }, { 269 | id: 'smallpox', 270 | title: 'Smallpox', 271 | rotate: -45, 272 | font: 'Arial', 273 | fontSize: '32', 274 | x: '0', 275 | y: '32', 276 | text: '˚', 277 | colorA: '#FFFFFF', 278 | colorB: '#000000', 279 | svg: false 280 | }, { 281 | id: 'jenga', 282 | title: 'Jenga', 283 | rotate: 0, 284 | font: 'Arial', 285 | fontSize: '16', 286 | x: '0', 287 | y: '12', 288 | text: '▚', 289 | colorA: '#000000', 290 | colorB: '#FFFFFF', 291 | svg: false 292 | }, { 293 | id: 'rainstorm', 294 | title: 'Rainstorm', 295 | rotate: 45, 296 | font: 'Arial', 297 | fontSize: '8', 298 | x: '0', 299 | y: '0', 300 | text: '▉', 301 | colorA: '#000000', 302 | colorB: '#FFFFFF', 303 | svg: false 304 | }, { 305 | id: 'veryoriginal', 306 | title: 'Very Original', 307 | rotate: 0, 308 | font: 'Arial', 309 | fontSize: '30', 310 | x: '-15', 311 | y: '20', 312 | text: '◼', 313 | colorA: '#000000', 314 | colorB: '#FFFFFF', 315 | svg: false 316 | }, { 317 | id: 'mailroom', 318 | title: 'Mail Room', 319 | rotate: 0, 320 | font: 'Arial', 321 | fontSize: '32', 322 | x: '0', 323 | y: '16', 324 | text: '❑', 325 | colorA: '#000000', 326 | colorB: '#FFFFFF', 327 | svg: false 328 | }, { 329 | id: 'coupons', 330 | title: 'Coupons', 331 | rotate: 0, 332 | font: 'Arial', 333 | fontSize: '32', 334 | x: '0', 335 | y: '16', 336 | text: '⬚', 337 | colorA: '#000000', 338 | colorB: '#FFFFFF', 339 | svg: false 340 | }, { 341 | id: 'horsearmy', 342 | title: 'Horse Army', 343 | rotate: 45, 344 | font: 'Arial', 345 | fontSize: '32', 346 | x: '-2', 347 | y: '16', 348 | text: '♘', 349 | colorA: '#000000', 350 | colorB: '#FFFFFF', 351 | svg: false 352 | }, { 353 | id: 'sleepy', 354 | title: 'Sleepy', 355 | rotate: 45, 356 | font: 'Arial', 357 | fontSize: '32', 358 | x: '0', 359 | y: '16', 360 | text: '৸', 361 | colorA: '#000000', 362 | colorB: '#FFFFFF', 363 | svg: false 364 | }, { 365 | id: 'controlroom', 366 | title: 'Control Room', 367 | rotate: 0, 368 | font: 'Arial', 369 | fontSize: '16', 370 | x: '2', 371 | y: '16', 372 | text: '▣', 373 | colorA: '#000000', 374 | colorB: '#FFFFFF', 375 | svg: false 376 | }, { 377 | id: 'sprout', 378 | title: 'Sprout', 379 | rotate: 45, 380 | font: 'Arial', 381 | fontSize: '32', 382 | x: '-3', 383 | y: '16', 384 | text: 'ℬ', 385 | colorA: '#FFFFFF', 386 | colorB: '#000000', 387 | svg: false 388 | }, { 389 | id: 'stalker', 390 | title: 'Stalker', 391 | rotate: 45, 392 | font: 'Arial', 393 | fontSize: '32', 394 | x: '0', 395 | y: '18', 396 | text: '↟', 397 | colorA: '#FFFFFF', 398 | colorB: '#000000', 399 | svg: false 400 | }, { 401 | id: 'barrier', 402 | title: 'Barrier', 403 | rotate: 45, 404 | font: 'Arial', 405 | fontSize: '32', 406 | x: '0', 407 | y: '16', 408 | text: '∔', 409 | colorA: '#FFFFFF', 410 | colorB: '#000000', 411 | svg: false 412 | }, { 413 | id: 'marbles', 414 | title: 'Marbles', 415 | rotate: 45, 416 | font: 'Arial', 417 | fontSize: '32', 418 | x: '-3', 419 | y: '16', 420 | text: '⧃', 421 | colorA: '#FFFFFF', 422 | colorB: '#000000', 423 | svg: false 424 | }, { 425 | id: 'antique', 426 | title: 'Antique', 427 | rotate: 45, 428 | font: 'Arial', 429 | fontSize: '32', 430 | x: '0', 431 | y: '18', 432 | text: '✠', 433 | colorA: '#FFFFFF', 434 | colorB: '#000000', 435 | svg: false 436 | }, { 437 | id: 'relax', 438 | title: 'Relax', 439 | rotate: 45, 440 | font: 'Arial', 441 | fontSize: '32', 442 | x: '-10', 443 | y: '14', 444 | text: '↺', 445 | colorA: '#FFFFFF', 446 | colorB: '#000000', 447 | svg: false 448 | }, { 449 | id: 'goatarmy', 450 | title: 'Goat Army', 451 | rotate: 25, 452 | font: 'Arial', 453 | fontSize: '32', 454 | x: '-4', 455 | y: '16', 456 | text: '𝔇', 457 | colorA: '#FFFFFF', 458 | colorB: '#000000', 459 | svg: false 460 | }, { 461 | id: 'citymap', 462 | title: 'City Map', 463 | rotate: 45, 464 | font: 'Arial', 465 | fontSize: '16', 466 | x: '0', 467 | y: '16', 468 | text: '⊡', 469 | colorA: '#FFFFFF', 470 | colorB: '#000000', 471 | svg: false 472 | }, { 473 | id: 'shortstraw', 474 | title: 'Short Straw', 475 | rotate: 45, 476 | font: 'Arial', 477 | fontSize: '16', 478 | x: '0', 479 | y: '16', 480 | text: 'Ξ', 481 | colorA: '#FFFFFF', 482 | colorB: '#000000', 483 | svg: false 484 | }, { 485 | id: 'shields', 486 | title: 'Shields', 487 | rotate: 45, 488 | font: 'Arial', 489 | fontSize: '28', 490 | x: '-3', 491 | y: '16', 492 | text: 'Ω', 493 | colorA: '#FFFFFF', 494 | colorB: '#000000', 495 | svg: false 496 | },{ 497 | id: 'crows', 498 | title: 'Crows', 499 | rotate: 45, 500 | font: 'Arial', 501 | fontSize: '28', 502 | x: '-3', 503 | y: '16', 504 | text: '¶', 505 | colorA: '#FFFFFF', 506 | colorB: '#000000', 507 | svg: false 508 | },{ 509 | id: 'marrow', 510 | title: 'Marrow', 511 | rotate: 65, 512 | font: 'Arial', 513 | fontSize: '32', 514 | x: '0', 515 | y: '8', 516 | text: 'Ɣ', 517 | colorA: '#FFFFFF', 518 | colorB: '#000000', 519 | svg: false 520 | },{ 521 | id: 'saints', 522 | title: 'Saints', 523 | rotate: 45, 524 | font: 'Arial', 525 | fontSize: '32', 526 | x: '-2', 527 | y: '16', 528 | text: 'ƕ', 529 | colorA: '#FFFFFF', 530 | colorB: '#000000', 531 | svg: false 532 | },{ 533 | id: 'range', 534 | title: 'Range', 535 | rotate: 60, 536 | font: 'Arial', 537 | fontSize: '23', 538 | x: '0', 539 | y: '10', 540 | text: 'Ʃ', 541 | colorA: '#FFFFFF', 542 | colorB: '#000000', 543 | svg: false 544 | },{ 545 | id: 'seeds', 546 | title: 'Seeds', 547 | rotate: 45, 548 | font: 'Arial', 549 | fontSize: '50', 550 | x: '-14', 551 | y: '4', 552 | text: 'ƾ', 553 | colorA: '#FFFFFF', 554 | colorB: '#000000', 555 | svg: false 556 | },{ 557 | id: 'corporate', 558 | title: 'Corporate', 559 | rotate: 45, 560 | font: 'Arial', 561 | fontSize: '50', 562 | x: '-14', 563 | y: '4', 564 | text: 'Ɏ', 565 | colorA: '#FFFFFF', 566 | colorB: '#000000', 567 | svg: false 568 | },{ 569 | id: 'particles', 570 | title: 'Particles', 571 | rotate: 45, 572 | font: 'Arial', 573 | fontSize: '32', 574 | x: '-8', 575 | y: '20', 576 | text: 'έ', 577 | colorA: '#FFFFFF', 578 | colorB: '#000000', 579 | svg: false 580 | },{ 581 | id: 'sleepy2', 582 | title: 'Sleepy 2', 583 | rotate: 45, 584 | font: 'Arial', 585 | fontSize: '20', 586 | x: '4', 587 | y: '12', 588 | text: 'Ϟ', 589 | colorA: '#FFFFFF', 590 | colorB: '#000000', 591 | svg: false 592 | },{ 593 | id: 'sleet', 594 | title: 'Sleet', 595 | rotate: 45, 596 | font: 'Arial', 597 | fontSize: '20', 598 | x: '4', 599 | y: '18', 600 | text: 'Џ', 601 | colorA: '#FFFFFF', 602 | colorB: '#000000', 603 | svg: false 604 | },{ 605 | id: 'acres', 606 | title: 'Acres', 607 | rotate: 45, 608 | font: 'Arial', 609 | fontSize: '20', 610 | x: '4', 611 | y: '18', 612 | text: '༗', 613 | colorA: '#FFFFFF', 614 | colorB: '#000000', 615 | svg: false 616 | },{ 617 | id: 'pain', 618 | title: 'Pain', 619 | rotate: 0, 620 | font: 'Arial', 621 | fontSize: '20', 622 | x: '0', 623 | y: '12', 624 | text: '␥', 625 | colorA: '#FFFFFF', 626 | colorB: '#000000', 627 | svg: false 628 | },{ 629 | id: 'temple', 630 | title: 'Temple', 631 | rotate: 0, 632 | font: 'Arial', 633 | fontSize: '32', 634 | x: '-6', 635 | y: '20', 636 | text: '⎈', 637 | colorA: '#FFFFFF', 638 | colorB: '#000000', 639 | svg: false 640 | },{ 641 | id: 'easypar', 642 | title: 'Easy Par', 643 | rotate: 20, 644 | font: 'Arial', 645 | fontSize: '16', 646 | x: '2', 647 | y: '25', 648 | text: '⎷', 649 | colorA: '#FFFFFF', 650 | colorB: '#000000', 651 | svg: false 652 | },{ 653 | id: 'noodles', 654 | title: 'Noodles', 655 | rotate: 20, 656 | font: 'Arial', 657 | fontSize: '16', 658 | x: '2', 659 | y: '10', 660 | text: '⌇', 661 | colorA: '#FFFFFF', 662 | colorB: '#000000', 663 | svg: false 664 | },{ 665 | id: 'community', 666 | title: 'Community', 667 | rotate: 0, 668 | font: 'Arial', 669 | fontSize: '20', 670 | x: '0', 671 | y: '12', 672 | text: '⌂', 673 | colorA: '#FFFFFF', 674 | colorB: '#000000', 675 | svg: false 676 | },{ 677 | id: 'caverns', 678 | title: 'Caverns', 679 | rotate: 25, 680 | font: 'Arial', 681 | fontSize: '20', 682 | x: '0', 683 | y: '16', 684 | text: '⎔', 685 | colorA: '#FFFFFF', 686 | colorB: '#000000', 687 | svg: false 688 | },{ 689 | id: 'digital', 690 | title: 'Digital', 691 | rotate: 25, 692 | font: 'Arial', 693 | fontSize: '20', 694 | x: '0', 695 | y: '16', 696 | text: '▓', 697 | colorA: '#FFFFFF', 698 | colorB: '#000000', 699 | svg: false 700 | },{ 701 | id: 'electric', 702 | title: 'Electric', 703 | rotate: 90, 704 | font: 'Arial', 705 | fontSize: '25', 706 | x: '0', 707 | y: '16', 708 | text: '⑀', 709 | colorA: '#FFFFFF', 710 | colorB: '#000000', 711 | svg: false 712 | },{ 713 | id: 'overcast', 714 | title: 'Overcast', 715 | rotate: 45, 716 | font: 'Arial', 717 | fontSize: '25', 718 | x: '-5', 719 | y: '10', 720 | text: '◓', 721 | colorA: '#FFFFFF', 722 | colorB: '#000000', 723 | svg: false 724 | },{ 725 | id: 'amulet', 726 | title: 'Amulet', 727 | rotate: 45, 728 | font: 'Arial', 729 | fontSize: '25', 730 | x: '-5', 731 | y: '10', 732 | text: '◙', 733 | colorA: '#FFFFFF', 734 | colorB: '#000000', 735 | svg: false 736 | },{ 737 | id: 'sliced', 738 | title: 'Sliced', 739 | rotate: 65, 740 | font: 'Arial', 741 | fontSize: '35', 742 | x: '0', 743 | y: '10', 744 | text: '◉', 745 | colorA: '#FFFFFF', 746 | colorB: '#000000', 747 | svg: false 748 | },{ 749 | id: 'windows', 750 | title: 'Windows', 751 | rotate: 65, 752 | font: 'Arial', 753 | fontSize: '25', 754 | x: '0', 755 | y: '10', 756 | text: '☗', 757 | colorA: '#FFFFFF', 758 | colorB: '#000000', 759 | svg: false 760 | },{ 761 | id: 'fortress', 762 | title: 'Fortress', 763 | rotate: 90, 764 | font: 'Arial', 765 | fontSize: '25', 766 | x: '0', 767 | y: '12', 768 | text: '♜', 769 | colorA: '#FFFFFF', 770 | colorB: '#000000', 771 | svg: false 772 | },{ 773 | id: 'tails', 774 | title: 'Tails', 775 | rotate: 45, 776 | font: 'Arial', 777 | fontSize: '20', 778 | x: '-10', 779 | y: '16', 780 | text: '✧', 781 | colorA: '#FFFFFF', 782 | colorB: '#000000', 783 | svg: false 784 | },{ 785 | id: 'bricks', 786 | title: 'Bricks', 787 | rotate: 0, 788 | font: 'Arial', 789 | fontSize: '28', 790 | x: '-6', 791 | y: '14', 792 | text: '⻡', 793 | colorA: '#FFFFFF', 794 | colorB: '#000000', 795 | svg: false 796 | },{ 797 | id: 'olives', 798 | title: 'Olives', 799 | rotate: 55, 800 | font: 'Arial', 801 | fontSize: '20', 802 | x: '0', 803 | y: '14', 804 | text: '❍', 805 | colorA: '#FFFFFF', 806 | colorB: '#000000', 807 | svg: false 808 | },{ 809 | id: 'friends', 810 | title: 'Friends', 811 | rotate: 45, 812 | font: 'Arial', 813 | fontSize: '20', 814 | x: '2', 815 | y: '16', 816 | text: '⚉', 817 | colorA: '#FFFFFF', 818 | colorB: '#000000', 819 | svg: false 820 | },{ 821 | id: 'surrender', 822 | title: 'Surrender', 823 | rotate: 25, 824 | font: 'Arial', 825 | fontSize: '20', 826 | x: '2', 827 | y: '16', 828 | text: '⚐', 829 | colorA: '#FFFFFF', 830 | colorB: '#000000', 831 | svg: false 832 | },{ 833 | id: 'kabuto', 834 | title: 'Kabuto', 835 | rotate: 45, 836 | font: 'Arial', 837 | fontSize: '20', 838 | x: '0', 839 | y: '12', 840 | text: '⚕', 841 | colorA: '#FFFFFF', 842 | colorB: '#000000', 843 | svg: false 844 | },{ 845 | id: 'bloom', 846 | title: 'Bloom', 847 | rotate: 0, 848 | font: 'Arial', 849 | fontSize: '10', 850 | x: '0', 851 | y: '10', 852 | text: '⚘', 853 | colorA: '#FFFFFF', 854 | colorB: '#000000', 855 | svg: false 856 | },{ 857 | id: 'common', 858 | title: 'Common', 859 | rotate: 45, 860 | font: 'Arial', 861 | fontSize: '22', 862 | x: '0', 863 | y: '12', 864 | text: '⚭', 865 | colorA: '#FFFFFF', 866 | colorB: '#000000', 867 | svg: false 868 | },{ 869 | id: 'doubloons', 870 | title: 'Doubloons', 871 | rotate: 45, 872 | font: 'Arial', 873 | fontSize: '16', 874 | x: '0', 875 | y: '16', 876 | text: 'ↂ', 877 | colorA: '#FFFFFF', 878 | colorB: '#000000', 879 | svg: false 880 | },{ 881 | id: 'escalator', 882 | title: 'Escalator', 883 | rotate: 45, 884 | font: 'Arial', 885 | fontSize: '32', 886 | x: '0', 887 | y: '12', 888 | text: '⟰', 889 | colorA: '#FFFFFF', 890 | colorB: '#000000', 891 | svg: false 892 | },{ 893 | id: 'acuteone', 894 | title: 'Acute One', 895 | rotate: 0, 896 | font: 'Arial', 897 | fontSize: '32', 898 | x: '-8', 899 | y: '15', 900 | text: '⟁', 901 | colorA: '#FFFFFF', 902 | colorB: '#000000', 903 | svg: false 904 | },{ 905 | id: 'timeless', 906 | title: 'Timeless', 907 | rotate: 0, 908 | font: 'Arial', 909 | fontSize: '22', 910 | x: '-2', 911 | y: '14', 912 | text: '⧗', 913 | colorA: '#FFFFFF', 914 | colorB: '#000000', 915 | svg: false 916 | },{ 917 | id: 'malice', 918 | title: 'Malice', 919 | rotate: 10, 920 | font: 'Arial', 921 | fontSize: '22', 922 | x: '-12', 923 | y: '16', 924 | text: '☃', 925 | colorA: '#FFFFFF', 926 | colorB: '#000000', 927 | svg: false 928 | },{ 929 | id: 'pollen', 930 | title: 'Pollen', 931 | rotate: 45, 932 | font: 'Arial', 933 | fontSize: '22', 934 | x: '0', 935 | y: '16', 936 | text: '✺', 937 | colorA: '#FFFFFF', 938 | colorB: '#000000', 939 | svg: false 940 | },{ 941 | id: 'direction', 942 | title: 'Direction', 943 | rotate: 45, 944 | font: 'Arial', 945 | fontSize: '22', 946 | x: '0', 947 | y: '16', 948 | text: '➲', 949 | colorA: '#FFFFFF', 950 | colorB: '#000000', 951 | svg: false 952 | },{ 953 | id: 'blueprints', 954 | title: 'Blueprints', 955 | rotate: 45, 956 | font: 'Arial', 957 | fontSize: '22', 958 | x: '0', 959 | y: '16', 960 | text: '❖', 961 | colorA: '#FFFFFF', 962 | colorB: '#000000', 963 | svg: false 964 | }] 965 | }, 966 | mounted() { 967 | 968 | let that = this; 969 | this.patterns.forEach(function(pattern) { 970 | let min = 10 971 | let max = 50 972 | let color1 = Math.floor(Math.random() * 360) 973 | let offset = 30 974 | let flexZone = Math.floor(Math.random() * 30) 975 | let color2 = color1 + offset + flexZone 976 | let coinToss = Math.random() > .5 977 | let colorA = getColor(`hsl(${color1}, 100%, ${coinToss ? min : max}%)`) 978 | let colorB = getColor(`hsl(${color2}, 100%, ${coinToss ? max : min}%)`) 979 | 980 | console.log(colorA, colorB); 981 | 982 | pattern.colorA = colorA; 983 | pattern.colorB = colorB; 984 | 985 | let patternEl = document.querySelector('#' + pattern.id) 986 | patternEl.setAttribute('patternTransform', 'rotate(' + pattern.rotate + ')') 987 | document.querySelector('#' + pattern.id + '_container input.colorA').value = colorB; 988 | document.querySelector('#' + pattern.id + '_container input.colorB').value = colorA; 989 | that.$nextTick(function() { 990 | pattern.svg = ''; 991 | }) 992 | }) 993 | }, 994 | methods: { 995 | updateColorA(pattern, event) { 996 | console.log(event.target.value) 997 | pattern.colorA = event.target.value; 998 | pattern.svg = ''; 999 | }, 1000 | updateColorB(pattern, event) { 1001 | pattern.colorB = event.target.value; 1002 | pattern.svg = ''; 1003 | } 1004 | } 1005 | }) 1006 | 1007 | // Color generator by Tom Hodgins @innovati 1008 | function getColor(c) { 1009 | let canvas = document.createElement('canvas') 1010 | canvas.width = canvas.height = 1 1011 | let ctx = canvas.getContext('2d') 1012 | ctx.fillStyle = c 1013 | ctx.fillRect(0, 0, 1, 1) 1014 | let [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data 1015 | let newColor = '#' + 1016 | r.toString(16).padStart(2, 0) + 1017 | g.toString(16).padStart(2, 0) + 1018 | b.toString(16).padStart(2, 0) 1019 | return newColor; 1020 | } --------------------------------------------------------------------------------