<body>
<css-doodle id="mydoodle">
:doodle {
@grid:21 / 100%;
background-color:#772667;
}
--startPos: 50% 50%;
:container { will-change: transform; transform: scale(1.2) rotate(0deg);}
@size:150%; mix-blend-mode: multiply;border-radius:0;;
background: @multi(5, ( linear-gradient( @p(#a2dd5f,#dd5fce,#dd5fce,#cedd5f,#1d83e2), @lp() ) var(--startPos) / @pn(30%,34%,40%,58%,100%) @lp() no-repeat ));
</css-doodle>
</body> body {
width: 100vmax;
height: 100vmax;
background-color: black;
overflow: hidden;
}(function () {
/*data structures*/
/*https://github.com/sweaver2112/Enhanced-Unicode-Character-Blocks*/
const characterSets = [
{ key: "Geometric Shapes", min: 9632, max: 9727 },
{ key: "Musical Symbols", min: 119040, max: 119295 },
{ key: "Arrows", min: 8592, max: 8703 },
{ key: "Braille Patterns", min: 10240, max: 10495 },
{ key: "Alchemical Symbols", min: 128768, max: 128895 },
{ key: "Math Operators", min: 8704, max: 8959 },
{ key: "Dingbats", min: 9984, max: 10175 },
{ key: "Ornamental Dingbats", min: 128592, max: 128639 },
{ key: "Box Drawing", min: 9472, max: 9599 },
{ key: "Misc Math Symbols-A", min: 10176, max: 10223 },
{ key: "Misc Math Symbols-B", min: 10624, max: 10751 },
{ key: "Block Elements", min: 9600, max: 9631 },
{ key: "Yijing Hexagram Symbols", min: 19904, max: 19967 },
{ key: "Supplemental Arrows-A", min: 10224, max: 10239 },
{ key: "Supplemental Arrows-B", min: 10496, max: 10623 },
{ key: "Supplemental Math Operators", min: 10752, max: 11007 },
{ key: "Egyptian Hieroglyphs", min: 77824, max: 78895 },
{ key: "General Punctuation", min: 8192, max: 8303 },
{ key: "Halfwidth and Fullwidth Forms", min: 65280, max: 65519 },
{ key: "CJK Symbols and Punctuation", min: 12288, max: 12351 },
{ key: "Mahjong Tiles", min: 126976, max: 127023 },
{ key: "Domino Tiles", min: 127024, max: 127135 },
{ key: "Playing Cards", min: 127136, max: 127231 },
{ key: "Emoticons", min: 0x1F600, max: 0x1F64F },
{ key: "Misc Symbols and Pictographs", min: 127744, max: 128511 },
{ key: "Misc Symbols", min: 9728, max: 9983 },
{ key: "Transport and Map Symbols", min: 128640, max: 128767 },
{ key: "Arabic", min: 1536, max: 1791 },
{ key: "Cyrillic", min: 1024, max: 1279 },
{ key: "Latin Extended Additional", min: 7680, max: 7935 },
{ key: "Enclosed Alphanumerics", min: 9312, max: 9471 },
{ key: "Greek and Coptic", min: 880, max: 1023 },
{ key: "Hangul Compatibility Jamo", min: 12592, max: 12687 },
{ key: "Modifier Tone Letters", min: 42752, max: 42783 },
{ key: "Number Forms", min: 8528, max: 8591 },
{ key: "Phonetic Extensions", min: 7424, max: 7551 },
{ key: "Spacing Modifier Letters", min: 688, max: 767 },
{ key: "Supplemental Punctuation", min: 11776, max: 0x2E42 /*truncated*/ },
{ key: "Vertical Forms", min: 65040, max: 0xFE19 /*truncated*/ },
{ key: "Combining Diacritical Marks", min: 768, max: 879 },
{
key: "Emoticons+",
ranges: [
{ min: 0X26F9, max: 0x26F9 }, /*misc symbols - baller*/
{ min: 0X26C4, max: 0x26C4 }, /*snowman */
{ min: 0X1F31A, max: 0x1F31D },
{ min: 0X1F383, max: 0x1F383 },
{ min: 0X1F385, max: 0x1F385 },
{ min: 0X1F3C2, max: 0x1F3C4 },
{ min: 0X1F3CA, max: 0X1F3CC },
{ min: 0x1F440, max: 0x1F440 },
{ min: 0x1F464, max: 0x1F483 },
{ min: 0x1F486, max: 0x1F487 },
{ min: 0X1F48F, max: 0X1F48F }, /*couple closed eyes*/
{ min: 0X1F491, max: 0X1F491 }, /*couple open eyes*/
{ min: 0X1F4A9, max: 0X1F4A9 }, /*poo*/
{ min: 0X1F574, max: 0X1F575 },
{ min: 0X1F5FF, max: 0X1F5FF }, /*stonehenge*/
{ min: 0X1F600, max: 0x1F64F }, /*emoticons*/
{ min: 0X1F6B4, max: 0X1F6B6 }, /*transport - bikers*/
{ min: 0X1F6F8, max: 0X1F6F8 }, /*ufo guy*/
{ min: 0X1F910, max: 0x1F917 }, /* suppl-pictographs zipper - somehappyguy */
{ min: 0X1F920, max: 0x1F93E }, /* cowboy - dunker*/
{ min: 0X1F970, max: 0x1F970 },
{ min: 0X1F973, max: 0x1F976 }, /*reveler - frozen*/
{ min: 0X1F97A, max: 0x1F97A }, /*scared sad face*/
{ min: 0X1F9B0, max: 0x1F9B3 },
{ min: 0X1F9B8, max: 0x1F9B9 }, /*hero girls*/
{ min: 0X1F9D0, max: 0x1F9DF }, /*monocle - zombie*/
{ min: 0X1F9F8, max: 0x1F9F8 }, /*teddy bear*/
{ min: 0x1F400, max: 0x1F43C }, /*minus the pig nose*/
{ min: 0x1F980, max: 0x1F9A2 }, /*crab-swan*/ ]
},
{
key: "Animals",
ranges: [
{ min: 0x1F400, max: 0x1F43D },
{ min: 0x1F577, max: 0x1F577 },
{ min: 0x1F638, max: 0x1F640 },
{ min: 0x1F648, max: 0x1F64A },
{ min: 0x1F980, max: 0x1F9A2 }, /*crab-swan*/ ] },
{
key: "Hands",
ranges: [
{ min: 0x261A, max: 0x261F }, /*misc symbols left - down */
{ min: 0x270A, max: 0x270D }, /*dingbats */
{ min: 0x1F64C, max: 0x1F64C }, /*hands out*/
{ min: 0x1F64F, max: 0x1F64F }, /*hands together*/
{ min: 0x1F446, max: 0x1F450 }, /*pointing up - hands out*/
{ min: 0x1F58E, max: 0x1F5A3 }, /*pen - pointing down*/
{ min: 0x1F918, max: 0x1F91F }, /*suppl - love - rock */
{ min: 0x1F932, max: 0x1F932 }, /*fists */
{ min: 0x1F9E4, max: 0x1F9E4 }, /*glove */ ]
},
{
key: "Hearts",
ranges: [
{ min: 0x2661, max: 0x2661 }, /*misc symbols*/
{ min: 0x2665, max: 0x2665 }, /*misc symbols*/
{ min: 0x2762, max: 0x2767 },
{ min: 0x1F394, max: 0x1F394 }, /*text heart*/
{ min: 0x1F48C, max: 0x1F48C }, /*letter*/
{ min: 0x1F48F, max: 0x1F48F },
{ min: 0x1F491, max: 0x1F491 },
{ min: 0x1F493, max: 0x1F49F }, /*misc picto - heart*/
{ min: 0x1F5A4, max: 0x1F5A4 }, /*black*/
{ min: 0x1F60D, max: 0x1F60D },
{ min: 0x1F63B, max: 0x1F63B },
{ min: 0x1F970, max: 0x1F970 },
{ min: 0x1F9E1, max: 0x1F9E1 }, /* suppl orange heart */ ]
},
{
key: "Plants & Food",
ranges: [
{ min: 0x2E19, max: 0x2E19 },
{ min: 0x1F32D, max: 0x1F37F },
{ min: 0x1F384, max: 0x1F384 }, /*xmas tree*/
{ min: 0x1F38B, max: 0x1F38B },
{ min: 0x1F38D, max: 0x1F38D },
{ min: 0x1F391, max: 0x1F391 },
{ min: 0x1F490, max: 0x1F490 }, /*lone flower*/
{ min: 0x1F4AE, max: 0x1F4AE },
{ min: 0x1F940, max: 0x1F940 }, /*wilted flower*/
{ min: 0x1F942, max: 0x1F944 }, /*glasses-fork*/
{ min: 0x1F950, max: 0x1F96F },
{ min: 0x1F9C0, max: 0x1F9C2 }, /*suppl*/ ],
},
{
key: "Halloween",
ranges: [
{ min: 0x1f383, max: 0x1f383 },
{ min: 0x1f479, max: 0x1f479 },
{ min: 0x1f47b, max: 0x1f47b },
{ min: 0x1f47f, max: 0x1f47f },
{ min: 0x1f480, max: 0x1f480 },
{ min: 0x1f608, max: 0x1f608 },
{ min: 0x1f987, max: 0x1f987 },
{ min: 0x1f577, max: 0x1f578 },
{ min: 0x1f571, max: 0x1f571 } ] },
{
key: "Flowers",
ranges: [
{ min: 0x1f331, max: 0x1f331 },
{ min: 0x1f337, max: 0x1f33c },
{ min: 0x1f33e, max: 0x1f343 },
{ min: 0x1f490, max: 0x1f490 },
{ min: 0x1f4ae, max: 0x1f4ae },
{ min: 0x1f940, max: 0x1f940 },]
}];
const paletteFuncs = [spectrum, desaturated, saturated, triads, analogs, splitComplements, monochrome, shades, complements]
const blendModes = ["normal", "color-burn", "difference", "multiply", "exclusion", "soft-light", "hard-light"]
const positions = {
all: ["0 100%", "0 0", "100% 100%", "100% 0", "50% 50%", "50% 0", "0 50%", "100% 50%", "50% 100%"],
diamond: ["50% 0", "0 50%", "100% 50%", "50%, 100%"],
diamondAndOne: ["50% 50%", "50% 0", "0 50%", "100% 50%", "50% 100%"],
perimeter: ["0 100%", "0 0", "100% 100%", "100% 0"],
perimeterAndOne: ["0 100%", "0 0", "100% 100%", "100% 0", "50% 50%"],
triangle: ["0 0", "0 100%", "100% 100%"]
}
/*INITIALIZE*/
var dood = $("#mydoodle")
dood.click(function (e) {
let r = Math.random()
r > .8 ? dood[0].update(radial()) : r > .6 ? dood[0].update(lines()) : r > .3 ? dood[0].update(boxes()) : dood[0].update(lines())
})
/* Generator Functions */
function lines() {
//layout
let gridSize = getRandomIntInclusive(5, 64)
let density = getRandomIntInclusive(1, 25)
let coverageFactor = Math.random() > .5 ? 1 : getRandomIntInclusive(1, Math.floor(density * .95))
let gradAngle = Math.random() > .8 ? getRandomIntInclusive(1, 3) : getRandomIntInclusive(5, 175)
let canvasAngle = getRandomIntInclusive(0, 45)
//colors
let colorFunc = Math.random() > .5 ? "@pd" : "@pn"
let paletteMultiplier = getRandomIntInclusive(1, 20)
let bigPal = bigPalette(paletteMultiplier)
return `:doodle {
@grid:1x${gridSize} / 100%;
background-color:${tinycolor.random().toHexString()};
}
:container {
transform: rotate(@p(${canvasAngle}deg,-${canvasAngle}deg)) scale(2);
will-change: transform;
mix-blend-mode:${Math.random()>.5?pick(blendModes):"normal"};
}
background-image: repeating-linear-gradient( @pd(${gradAngle}deg, -${gradAngle}deg), @multi(@calc(@size()), ( ${colorFunc}(${bigPal}) calc(@n() * 100% / (@size() * ${density})), @lp() calc((@n() + ${coverageFactor}) * 100% / (@size() * ${density})) )) );
`
}
function boxes() {
//layout
let gridSize = getRandomIntInclusive(5, 50)
let canvasAngle = Math.random() > .5 ? getRandomIntInclusive(0, 45) : 0
let scale = canvasAngle == 0 ? 1 : 2
let positionFunc = Math.random() > .5 ? "@pd" : "@p"
let cr = Math.random()
let myPositions = pick(Object.values(positions))
let startingPositions = cr > .75 ? `${positionFunc}(${myPositions})` : cr > .45 ? pick(myPositions) : "50% 50%"
let myStops = getRandomStops(5,Math.random()>.5,Math.random()>.5).map(stop => {
return stop + "%"
})
//colors, overlay, blend mode, border-radius
cr = Math.random()
let colorFunc = cr > .66 ? "@p" : cr > .33 ? "@pd" : "@pn"
let scaleAndOverlay = ""
let boxBlends = blendModes.filter(bm => {
return bm != "normal"
})
if (Math.random() > .33) {
let borderRadius = (colorFunc != "@p" && positionFunc != "@p" && Math.random() > .5) ? "50%" : 0
scaleAndOverlay = `@size:150%; mix-blend-mode: ${pick(boxBlends)};border-radius:${borderRadius};`
scale = 2
}
return `:doodle {
@grid:${gridSize} / 100%;
background-color:${tinycolor.random().toHexString()};
}
--startPos: ${startingPositions};
:container { will-change: transform; transform: scale(${scale}) rotate(${canvasAngle}deg);}
${scaleAndOverlay};
background: @multi(5, ( linear-gradient( ${colorFunc}(${getPalette()}), @lp() ) var(--startPos) / @pn(${myStops}) @lp() no-repeat ));`
}
function characters() {
let set = flatten(pick(characterSets))
let pr = Math.random()
let picker = pr > .66 ? "@p" : pr > .33 ? "@pd" : "@pn"
if (Math.random() > .5) {
let num = getRandomIntInclusive(1, 4)
set = Math.random() > .5 ? randomPicks(set, num) : randomSlice(set, num)
}
let codeSelector = `\\@hex(${picker}(${set}))`
let r = Math.random()
let rotation = r > .75 ? "@p(0, 45deg, -45deg, 90deg, -90deg, 180deg)" : r > .5 ? "@pd(45deg,-45deg)" : r > .25 ? (Math.random() > .5 ? "45deg" : "-45deg") : 0
let blendModePicker = Math.random() > .5 ? "@p" : "@pd"
r = Math.random()
let myBlends = r > .66 ? randomSlice(blendModes) : r > .33 ? randomPicks(blendModes) : blendModes
let mixBlendMode = Math.random() > .5 ? `${blendModePicker}(${myBlends})` : pick(blendModes)
let fontSize = Math.random > .5 ? "@r(2vmax, 5vmax)" : `${getRandomIntInclusive(2,5)}vmax`
let scale = Math.random > .5 ? "@r(.3, 2)" : getRandomIntInclusive(.3, 2)
let skew = Math.random() > .75 ? getRandomIntInclusive(-20, 20) : 0
let pal = Math.random() > .5 ? getPalette() : bigPalette(getRandomIntInclusive(2, 5))
return `:doodle {
@grid: ${getRandomIntInclusive(10, 50)} / 100%;
background-color: ${tinycolor.random().toHexString()};
font-size:${fontSize};
}
mix-blend-mode: ${mixBlendMode};
:after {
content:${codeSelector};
color: ${Math.random() > .5 ? "@p" : "@pd"}(${pal});
transform: skew(${skew}deg) scale(${scale}) rotate(${rotation});
}`
}
function radial() {
let seed = getRandomColor()
let rotation = getRandomIntInclusive(10, 180)
let palFunc = pick(paletteFuncs)
let firstStops = getColorStops(bigPalette(getRandomIntInclusive(1, 5), seed.clone(), palFunc))
let otherStops = getColorStops(bigPalette(getRandomIntInclusive(1, 2), seed.clone().spin(rotation), palFunc))
let size1 = getRandomIntInclusive(2, 75)
let sr = Math.random()
let size2 = size1 * (sr > .66 ? 3 : sr > .33 ? 2 : .5)
return `:doodle {
@grid:1 / 100%;
}
:container {
background-color:${tinycolor.random().toHexString()};
background-blend-mode:${pick(blendModes)};
background-image:
${Math.random() > .5 ? "radial-gradient" : "repeating-radial-gradient"}(${firstStops}),
${Math.random() > .5 ? "radial-gradient" : "repeating-radial-gradient"}(${otherStops});
background-size: ${size1}px ${size1}px, ${size2}px ${size2}px;
}
`
function getColorStops(pal) {
let stopFuncs = [getStripesWithTransparencyAllSharpTransitions, getStripesWithTransparencyOneSharpTransition, getStripesNoSharpTransitions]
let stops = getRandomStops(getRandomIntInclusive(3, 15), Math.random()>.5, Math.random()>.5)
let colorStops = pick(stopFuncs)(stops, pal)
colorStops = colorStops.match(/.*?(?=, $|$)/)[0]
return colorStops
/*string generators*/
function getStripesNoSharpTransitions(stops, pal) {
let colorStops = ""
for (let i = 0; i < stops.length; i++) {
colorStops += `${pal[i%pal.length]} ${stops[i]}%, `
}
return colorStops
}
function getStripesWithTransparencyOneSharpTransition(stops, pal) {
let colorStops = ""
for (let i = 0; i < stops.length - 2; i = i + 3) {
colorStops += `${pal[i%pal.length]} ${stops[i]}%, ${pal[i%pal.length]} ${stops[i+1]}%, transparent ${stops[i+1]+1}%, transparent ${stops[i+2]}%, `
}
return colorStops
}
function getStripesWithTransparencyAllSharpTransitions(stops, pal) {
let colorStops = ""
for (let i = 0; i < stops.length - 2; i = i + 2) {
let color = pal[i % pal.length]
if (i == 0) {
colorStops += `${color} ${stops[i]}%, ${color} ${stops[i+1]}%, transparent ${stops[i+1]+1}%, transparent ${stops[i+2]}%, `
} else {
colorStops += `${color} ${stops[i]+1}%, ${color} ${stops[i+1]}%, transparent ${stops[i+1]+1}%, transparent ${stops[i+2]}%, `
}
}
return colorStops
}
}
}
/* Utility Functions */
function getRandomStops(num, startWithZero, endWith100) {
let stops = []
let first = startWithZero ? 0 : getRandomIntInclusive(1, 40)
stops[0] = first
for (var i = 1; i < num; i++) {
let next = getRandomIntInclusive(stops[i - 1], stops[i - 1] + 40)
if (next >= 100) {
stops[i] = 100
break
} else {
stops[i] = next
}
}
if(endWith100) stops[stops.length - 1] = 100
return stops
}
function getPalette(seed, palette) {
if (!palette) palette = pick(paletteFuncs)
if (!seed) seed = getRandomColor()
return palette(seed)
}
function bigPalette(multiplier, seed = getRandomColor(), palFunc = pick(paletteFuncs), rotation = getRandomIntInclusive(2, 180)) {
let bigPalette = []
let rotateRandomly = !rotation && Math.random() > .5
for (let i = 1; i <= multiplier; i++) {
if (rotateRandomly) {
rotation = getRandomIntInclusive(2, 180)
} else {
rotation += rotation
}
bigPalette.push(...getPalette(seed.clone().spin(rotation), palFunc))
}
return bigPalette
}
function getRandomColor() {
/*tinycolor's randoms are too dark sometimes*/
let hue = Math.floor(Math.random() * 360)
let saturation = Math.floor(Math.random() * (100 - 30) + 30)
return tinycolor(`hsl(${hue}, ${saturation}, 50%)`)
}
function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)]
}
function randomSlice(arr, num) {
num = num || getRandomIntInclusive(1, arr.length)
let start = getRandomIntInclusive(0, arr.length - 1)
while (start + num > arr.length) {
start--
}
return arr.slice(start, start + num)
}
function randomPicks(arr, num) {
num = num || getRandomIntInclusive(1, arr.length)
let picks = []
for (let i = 0; i < num; i++) {
picks.push(pick(arr))
}
return picks
}
function getRandomIntInclusive(min, max) {
min = Math.ceil(min)
max = Math.floor(max)
return Math.floor(Math.random() * (max - min + 1)) + min
}
function flatten(set) {
let flat = []
let ranges = set.ranges || [{
min: set.min,
max: set.max
}]
ranges.forEach(range => {
for (let i = range.min; i <= range.max; i++) {
flat.push(i)
}
})
return flat
}
/*palette functions*/
function spectrum(seed) {
let c1 = tinycolor(seed).spin(getRandomIntInclusive(-160, -130)).toHexString()
let c2 = tinycolor(seed).spin(getRandomIntInclusive(-92, -52)).toHexString()
let c3 = seed.toHexString()
let c4 = tinycolor(seed).spin(getRandomIntInclusive(52, 92)).toHexString()
let c5 = tinycolor(seed).spin(getRandomIntInclusive(130, 160)).toHexString()
return [c1, c2, c3, c4, c5]
}
function desaturated(seed) {
const desatFactor = (tinycolor(seed).toHsl().s / 2) * 100
let isDark = tinycolor(seed).isDark()
let bigRando = getRandomIntInclusive(10, 30)
let c1 = isDark ? tinycolor(seed).desaturate(desatFactor).brighten(bigRando).toHexString() : tinycolor(seed).desaturate(desatFactor).darken(bigRando).toHexString()
let c2 = tinycolor(seed).desaturate(desatFactor).spin(getRandomIntInclusive(100, 140)).toHexString()
let c3 = tinycolor(seed).desaturate(desatFactor).toHexString()
let c4 = tinycolor(seed).desaturate(desatFactor).spin(getRandomIntInclusive(10, 50)).lighten(bigRando).toHexString()
let c5 = tinycolor(seed).desaturate(desatFactor).spin(getRandomIntInclusive(70, 110)).toHexString()
return [c1, c2, c3, c4, c5]
}
function saturated(seed) {
const satFactor = (tinycolor(seed).toHsl().s / 2) * 100
let smallRando = getRandomIntInclusive(0, 20)
let c1 = tinycolor(seed).spin(30).saturate(satFactor).lighten(smallRando).toHexString()
let c2 = tinycolor(seed).spin(15).saturate(satFactor).darken(smallRando).toHexString()
let c3 = tinycolor(seed).saturate(satFactor).toHexString()
let c4 = tinycolor(seed).saturate(satFactor).spin(getRandomIntInclusive(50, 130)).toHexString()
let c5 = tinycolor(seed).saturate(satFactor).spin(getRandomIntInclusive(90, 150)).toHexString()
return [c1, c2, c3, c4, c5]
}
function triads(seed) {
let smallRando = getRandomIntInclusive(5, 25)
let c1 = tinycolor(seed).desaturate(smallRando).lighten(smallRando).toHexString()
let c2 = tinycolor(seed).spin(getRandomIntInclusive(-150, -90)).toHexString()
let c3 = seed.toHexString()
let c4 = tinycolor(seed).spin(120).toHexString()
let c5 = tinycolor(seed).spin(getRandomIntInclusive(90, 150)).saturate(smallRando).darken(smallRando).toHexString()
return [c1, c2, c3, c4, c5]
}
function analogs(seed) {
let smallRando = getRandomIntInclusive(0, 20)
let c1 = tinycolor(seed).spin(getRandomIntInclusive(-30, -15)).toHexString()
let c2 = tinycolor(seed).spin(getRandomIntInclusive(-15, 0)).saturate(smallRando).darken(smallRando).toHexString()
let c3 = seed.toHexString()
let c4 = tinycolor(seed).spin(getRandomIntInclusive(0, 15)).desaturate(smallRando).lighten(smallRando).toHexString()
let c5 = tinycolor(seed).spin(getRandomIntInclusive(15, 30)).toHexString()
return [c1, c2, c3, c4, c5]
}
function splitComplements(seed) {
let smallRando = getRandomIntInclusive(0, 20)
let c1 = tinycolor(seed).spin(getRandomIntInclusive(-180, -130)).saturate(smallRando).darken(smallRando).toHexString()
let c2 = tinycolor(seed).spin(-150).toHexString()
let c3 = seed.toHexString()
let c4 = tinycolor(seed).spin(getRandomIntInclusive(-180, -130)).toHexString()
let c5 = tinycolor(seed).spin(150).desaturate(smallRando).lighten(smallRando).toHexString()
return [c1, c2, c3, c4, c5]
}
function monochrome(seed) {
let isDark = tinycolor(seed).isDark()
let smallRando = getRandomIntInclusive(0, 10)
let biggerRando = getRandomIntInclusive(20, 40)
let c1 = isDark ? tinycolor(seed).lighten(biggerRando).toHexString() : tinycolor(seed).darken(biggerRando).toHexString()
let c2 = isDark ? tinycolor(seed).desaturate(getRandomIntInclusive(15, 40)).lighten(smallRando).toHexString() :
tinycolor(seed).desaturate(getRandomIntInclusive(15, 40)).darken(smallRando).toHexString()
let c3 = seed.toHexString()
let c4 = isDark ? tinycolor(seed).saturate(getRandomIntInclusive(15, 40)).lighten(smallRando).toHexString() :
tinycolor(seed).saturate(getRandomIntInclusive(15, 40)).darken(smallRando).toHexString()
let c5 = isDark ? tinycolor(seed).lighten(biggerRando).toHexString() :
tinycolor(seed).darken(biggerRando).toHexString()
return [c1, c2, c3, c4, c5]
}
function shades(seed) {
let closest = getRandomIntInclusive(5, 25)
let farthest = getRandomIntInclusive(20, 40)
let c1 = tinycolor(seed).lighten(farthest).toHexString()
let c2 = tinycolor(seed).lighten(closest).toHexString()
let c3 = seed.toHexString()
let c4 = tinycolor(seed).darken(closest).toHexString()
let c5 = tinycolor(seed).darken(farthest).toHexString()
return [c1, c2, c3, c4, c5]
}
function complements(seed) {
let isDark = tinycolor(seed).isDark()
let c1 = tinycolor(seed).saturate(getRandomIntInclusive(5, 15)).darken(getRandomIntInclusive(10, 20)).toHexString()
let c2 = tinycolor(seed).desaturate(getRandomIntInclusive(0, 20)).lighten(getRandomIntInclusive(5, 25)).toHexString()
let c3 = seed.toHexString()
let c4 = tinycolor(seed).spin(180).toHexString()
let c5 = isDark ? tinycolor(seed).spin(getRandomIntInclusive(160, 200)).desaturate(getRandomIntInclusive(5, 15)).lighten(getRandomIntInclusive(10, 20)).toHexString() :
tinycolor(seed).spin(getRandomIntInclusive(160, 200)).saturate(getRandomIntInclusive(0, 20)).darken(getRandomIntInclusive(10, 20)).toHexString()
return [c1, c2, c3, c4, c5]
}
})("sweaverD.com")
External CSS
This Pen doesn't use any external CSS resources.