Just random text, color, fontface, lineargradient, fontsize, fontweight.
Last active
April 15, 2019 06:58
-
-
Save 4096void/47ca64638391e174ea6b1a1338538ec7 to your computer and use it in GitHub Desktop.
random × random
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| /* utils */ | |
| function data() { | |
| let rs = []; | |
| let roll = n => Math.random() * n; | |
| for (let i = 0; i < 100; i++) { | |
| rs.push(roll(100)); | |
| } | |
| return rs; | |
| } | |
| function font() { | |
| let list = [ | |
| 'Arial', | |
| 'Helvetica', | |
| 'Times New Roman', | |
| 'Times', | |
| 'Courier New', | |
| 'Courier', | |
| 'Verdana', | |
| 'Georgia', | |
| 'Palatino', | |
| 'Garamond', | |
| 'Bookman', | |
| 'Comic Sans MS', | |
| 'Trebuchet MS', | |
| 'Arial Black', | |
| 'Impact', | |
| ]; | |
| return list[Math.floor(Math.random() * list.length)]; | |
| } | |
| const roll = n => Math.random() * n; | |
| const rollBetween = (n, m) => Math.floor(roll(m - n)) + n; | |
| const rollIn = l => l[rollBetween(0, l.length)] | |
| function chineseChar() { | |
| let rs = [ | |
| rollBetween(0x4E00, 0x9FFF), | |
| rollBetween(0x3400, 0x4DBF), | |
| rollBetween(0x20000, 0x2A6DF), | |
| rollBetween(0x2A700, 0x2B73F), | |
| rollBetween(0x2B740, 0x2B81F), | |
| rollBetween(0x2B820, 0x2CEAF), | |
| rollBetween(0xF900, 0xFAFF), | |
| rollBetween(0x2F800, 0x2FA1F), | |
| ]; | |
| return String.fromCharCode(rollIn(rs)); | |
| } | |
| function chineseNChars(n) { | |
| let rs = []; | |
| while (n > 0) { | |
| rs.push(chineseChar()); | |
| n -= 1; | |
| } | |
| return rs; | |
| } | |
| const rgb = () => `${roll(255)},${roll(255)},${roll(255)}`; | |
| /* basic */ | |
| d3.select('body') | |
| .style('background', '#f0f0f0'); | |
| /* update */ | |
| var divs = d3.selectAll('div') | |
| .data(data()); | |
| /* enter */ | |
| divs.enter() | |
| .append('div') | |
| .transition() | |
| .duration(300) | |
| .style('font-size', d => `${d}px` ) | |
| .text(d => `${d}\n${window.btoa(d)}\n${chineseNChars(rollBetween(10, 20)).join('')}`) | |
| .style('color', () => `rgba(${rgb()},100%)`) | |
| .style('padding', () => `${roll(1)}em ${roll(1)}em ${roll(1)}em ${roll(1)}em`) | |
| .style('font-weight', () => `${roll(500)}`) | |
| .style('font-family', font) | |
| .style('background-image', function () { | |
| let deg = `${roll(360)}deg`; | |
| let start = `rgba(${rgb()},100%)`; | |
| let end = `rgba(${rgb(0)},100%)`; | |
| return `linear-gradient(${deg},${start},${end})`; | |
| }); | |
| /* exit */ | |
| divs | |
| .exit() | |
| .remove(); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment