NamedCSSColours = {
"amount": 141,
"colours": [
{"name": "AliceBlue","rgb": "240, 248, 255", "hex": "F0F8FF"},
{"name": "AntiqueWhite","rgb": "250, 235, 215", "hex": "FAEBD7"},
{"name": "Aqua","rgb": "0, 255, 255", "hex": "00FFFF"},
{"name": "Aquamarine","rgb": "127, 255, 212", "hex": "7FFFD4"},
{"name": "Azure","rgb": "240, 255, 255", "hex": "F0FFFF"},
{"name": "Beige","rgb": "245, 245, 220", "hex": "F5F5DC"},
{"name": "Bisque","rgb": "255, 228, 196", "hex": "FFE4C4"},
{"name": "Black","rgb": "0, 0, 0", "hex": "000000"},
{"name": "BlanchedAlmond","rgb": "255, 235, 205", "hex": "FFEBCD"},
{"name": "Blue","rgb": "0, 0, 255", "hex": "0000FF"},
{"name": "BlueViolet","rgb": "138, 43, 226", "hex": "8A2BE2"},
{"name": "Brown","rgb": "165, 42, 42", "hex": "A52A2A"},
{"name": "BurlyWood","rgb": "222, 184, 135", "hex": "DEB887"},
{"name": "CadetBlue","rgb": "95, 158, 160", "hex": "5F9EA0"},
{"name": "Chartreuse","rgb": "127, 255, 0", "hex": "7FFF00"},
{"name": "Chocolate","rgb": "210, 105, 30", "hex": "D2691E"},
{"name": "Coral","rgb": "255, 127, 80", "hex": "FF7F50"},
{"name": "CornflowerBlue","rgb": "100, 149, 237", "hex": "6495ED"},
{"name": "Cornsilk","rgb": "255, 248, 220", "hex": "FFF8DC"},
{"name": "Crimson","rgb": "220, 20, 60", "hex": "DC143C"},
{"name": "Cyan","rgb": "0, 255, 255", "hex": "00FFFF"},
{"name": "DarkBlue","rgb": "0, 0, 139", "hex": "00008B"},
{"name": "DarkCyan","rgb": "0, 139, 139", "hex": "008B8B"},
{"name": "DarkGoldenRod","rgb": "184, 134, 11", "hex": "B8860B"},
{"name": "DarkGray","rgb": "169, 169, 169", "hex": "A9A9A9"},
{"name": "DarkGreen","rgb": "0, 100, 0", "hex": "006400"},
{"name": "DarkKhaki","rgb": "189, 183, 107", "hex": "BDB76B"},
{"name": "DarkMagenta","rgb": "139, 0, 139", "hex": "8B008B"},
{"name": "DarkOliveGreen","rgb": "85, 107, 47", "hex": "556B2F"},
{"name": "DarkOrange","rgb": "255, 140, 0", "hex": "FF8C00"},
{"name": "DarkOrchid","rgb": "153, 50, 204", "hex": "9932CC"},
{"name": "DarkRed","rgb": "139, 0, 0", "hex": "8B0000"},
{"name": "DarkSalmon","rgb": "233, 150, 122", "hex": "E9967A"},
{"name": "DarkSeaGreen","rgb": "143, 188, 143", "hex": "8FBC8F"},
{"name": "DarkSlateBlue","rgb": "72, 61, 139", "hex": "483D8B"},
{"name": "DarkSlateGray","rgb": "47, 79, 79", "hex": "2F4F4F"},
{"name": "DarkTurquoise","rgb": "0, 206, 209", "hex": "00CED1"},
{"name": "DarkViolet","rgb": "148, 0, 211", "hex": "9400D3"},
{"name": "DeepPink","rgb": "255, 20, 147", "hex": "FF1493"},
{"name": "DeepSkyBlue","rgb": "0, 191, 255", "hex": "00BFFF"},
{"name": "DimGray","rgb": "105, 105, 105", "hex": "696969"},
{"name": "DodgerBlue","rgb": "30, 144, 255", "hex": "1E90FF"},
{"name": "FireBrick","rgb": "178, 34, 34", "hex": "B22222"},
{"name": "FloralWhite","rgb": "255, 250, 240", "hex": "FFFAF0"},
{"name": "ForestGreen","rgb": "34, 139, 34", "hex": "228B22"},
{"name": "Fuchsia","rgb": "255, 0, 255", "hex": "FF00FF"},
{"name": "Gainsboro","rgb": "220, 220, 220", "hex": "DCDCDC"},
{"name": "GhostWhite","rgb": "248, 248, 255", "hex": "F8F8FF"},
{"name": "Gold","rgb": "255, 215, 0", "hex": "FFD700"},
{"name": "GoldenRod","rgb": "218, 165, 32", "hex": "DAA520"},
{"name": "Gray","rgb": "128, 128, 128", "hex": "808080"},
{"name": "Green","rgb": "0, 128, 0", "hex": "008000"},
{"name": "GreenYellow","rgb": "173, 255, 47", "hex": "ADFF2F"},
{"name": "HoneyDew","rgb": "240, 255, 240", "hex": "F0FFF0"},
{"name": "HotPink","rgb": "255, 105, 180", "hex": "FF69B4"},
{"name": "IndianRed ","rgb": "205, 92, 92", "hex": "CD5C5C"},
{"name": "Indigo","rgb": "75, 0, 130", "hex": "4B0082"},
{"name": "Ivory","rgb": "255, 255, 240", "hex": "FFFFF0"},
{"name": "Khaki","rgb": "240, 230, 140", "hex": "F0E68C"},
{"name": "Lavender","rgb": "230, 230, 250", "hex": "E6E6FA"},
{"name": "LavenderBlush","rgb": "255, 240, 245", "hex": "FFF0F5"},
{"name": "LawnGreen","rgb": "124, 252, 0", "hex": "7CFC00"},
{"name": "LemonChiffon","rgb": "255, 250, 205", "hex": "FFFACD"},
{"name": "LightBlue","rgb": "173, 216, 230", "hex": "ADD8E6"},
{"name": "LightCoral","rgb": "240, 128, 128", "hex": "F08080"},
{"name": "LightCyan","rgb": "224, 255, 255", "hex": "E0FFFF"},
{"name": "LightGoldenRodYellow","rgb": "250, 250, 210", "hex": "FAFAD2"},
{"name": "LightGray","rgb": "211, 211, 211", "hex": "D3D3D3"},
{"name": "LightGreen","rgb": "144, 238, 144", "hex": "90EE90"},
{"name": "LightPink","rgb": "255, 182, 193", "hex": "FFB6C1"},
{"name": "LightSalmon","rgb": "255, 160, 122", "hex": "FFA07A"},
{"name": "LightSeaGreen","rgb": "32, 178, 170", "hex": "20B2AA"},
{"name": "LightSkyBlue","rgb": "135, 206, 250", "hex": "87CEFA"},
{"name": "LightSlateGray","rgb": "119, 136, 153", "hex": "778899"},
{"name": "LightSteelBlue","rgb": "176, 196, 222", "hex": "B0C4DE"},
{"name": "LightYellow","rgb": "255, 255, 224", "hex": "FFFFE0"},
{"name": "Lime","rgb": "0, 255, 0", "hex": "00FF00"},
{"name": "LimeGreen","rgb": "50, 205, 50", "hex": "32CD32"},
{"name": "Linen","rgb": "250, 240, 230", "hex": "FAF0E6"},
{"name": "Magenta","rgb": "255, 0, 255", "hex": "FF00FF"},
{"name": "Maroon","rgb": "128, 0, 0", "hex": "800000"},
{"name": "MediumAquaMarine","rgb": "102, 205, 170", "hex": "66CDAA"},
{"name": "MediumBlue","rgb": "0, 0, 205", "hex": "0000CD"},
{"name": "MediumOrchid","rgb": "186, 85, 211", "hex": "BA55D3"},
{"name": "MediumPurple","rgb": "147, 112, 219", "hex": "9370DB"},
{"name": "MediumSeaGreen","rgb": "60, 179, 113", "hex": "3CB371"},
{"name": "MediumSlateBlue","rgb": "123, 104, 238", "hex": "7B68EE"},
{"name": "MediumSpringGreen","rgb": "0, 250, 154", "hex": "00FA9A"},
{"name": "MediumTurquoise","rgb": "72, 209, 204", "hex": "48D1CC"},
{"name": "MediumVioletRed","rgb": "199, 21, 133", "hex": "C71585"},
{"name": "MidnightBlue","rgb": "25, 25, 112", "hex": "191970"},
{"name": "MintCream","rgb": "245, 255, 250", "hex": "F5FFFA"},
{"name": "MistyRose","rgb": "255, 228, 225", "hex": "FFE4E1"},
{"name": "Moccasin","rgb": "255, 228, 181", "hex": "FFE4B5"},
{"name": "NavajoWhite","rgb": "255, 222, 173", "hex": "FFDEAD"},
{"name": "Navy","rgb": "0, 0, 128", "hex": "000080"},
{"name": "OldLace","rgb": "253, 245, 230", "hex": "FDF5E6"},
{"name": "Olive","rgb": "128, 128, 0", "hex": "808000"},
{"name": "OliveDrab","rgb": "107, 142, 35", "hex": "6B8E23"},
{"name": "Orange","rgb": "255, 165, 0", "hex": "FFA500"},
{"name": "OrangeRed","rgb": "255, 69, 0", "hex": "FF4500"},
{"name": "Orchid","rgb": "218, 112, 214", "hex": "DA70D6"},
{"name": "PaleGoldenRod","rgb": "238, 232, 170", "hex": "EEE8AA"},
{"name": "PaleGreen","rgb": "152, 251, 152", "hex": "98FB98"},
{"name": "PaleTurquoise","rgb": "175, 238, 238", "hex": "AFEEEE"},
{"name": "PaleVioletRed","rgb": "219, 112, 147", "hex": "DB7093"},
{"name": "PapayaWhip","rgb": "255, 239, 213", "hex": "FFEFD5"},
{"name": "PeachPuff","rgb": "255, 218, 185", "hex": "FFDAB9"},
{"name": "Peru","rgb": "205, 133, 63", "hex": "CD853F"},
{"name": "Pink","rgb": "255, 192, 203", "hex": "FFC0CB"},
{"name": "Plum","rgb": "221, 160, 221", "hex": "DDA0DD"},
{"name": "PowderBlue","rgb": "176, 224, 230", "hex": "B0E0E6"},
{"name": "Purple","rgb": "128, 0, 128", "hex": "800080"},
{"name": "RebeccaPurple","rgb": "102, 51, 153", "hex": "663399"},
{"name": "Red","rgb": "255, 0, 0", "hex": "FF0000"},
{"name": "RosyBrown","rgb": "188, 143, 143", "hex": "BC8F8F"},
{"name": "RoyalBlue","rgb": "65, 105, 225", "hex": "4169E1"},
{"name": "SaddleBrown","rgb": "139, 69, 19", "hex": "8B4513"},
{"name": "Salmon","rgb": "250, 128, 114", "hex": "FA8072"},
{"name": "SandyBrown","rgb": "244, 164, 96", "hex": "F4A460"},
{"name": "SeaGreen","rgb": "46, 139, 87", "hex": "2E8B57"},
{"name": "SeaShell","rgb": "255, 245, 238", "hex": "FFF5EE"},
{"name": "Sienna","rgb": "160, 82, 45", "hex": "A0522D"},
{"name": "Silver","rgb": "192, 192, 192", "hex": "C0C0C0"},
{"name": "SkyBlue","rgb": "135, 206, 235", "hex": "87CEEB"},
{"name": "SlateBlue","rgb": "106, 90, 205", "hex": "6A5ACD"},
{"name": "SlateGray","rgb": "112, 128, 144", "hex": "708090"},
{"name": "Snow","rgb": "255, 250, 250", "hex": "FFFAFA"},
{"name": "SpringGreen","rgb": "0, 255, 127", "hex": "00FF7F"},
{"name": "SteelBlue","rgb": "70, 130, 180", "hex": "4682B4"},
{"name": "Tan","rgb": "210, 180, 140", "hex": "D2B48C"},
{"name": "Teal","rgb": "0, 128, 128", "hex": "008080"},
{"name": "Thistle","rgb": "216, 191, 216", "hex": "D8BFD8"},
{"name": "Tomato","rgb": "255, 99, 71", "hex": "FF6347"},
{"name": "Turquoise","rgb": "64, 224, 208", "hex": "40E0D0"},
{"name": "Violet","rgb": "238, 130, 238", "hex": "EE82EE"},
{"name": "Wheat","rgb": "245, 222, 179", "hex": "F5DEB3"},
{"name": "White","rgb": "255, 255, 255", "hex": "FFFFFF"},
{"name": "WhiteSmoke","rgb": "245, 245, 245", "hex": "F5F5F5"},
{"name": "Yellow","rgb": "255, 255, 0", "hex": "FFFF00"},
{"name": "YellowGreen","rgb": "154, 205, 50", "hex": "9ACD32"}
]
}
let offsetx = 0;
let offsety = 0;
let centerx = 0;
let centery = 0;
let canvas = document.querySelector('.hearts');
const randomcolour = () => {
let random = Math.floor(Math.random() * NamedCSSColours.amount);
return NamedCSSColours.colours[random].name;
}
const createElement = (x,y, rotationoffset) => {
let elm = document.createElement('i');
elm.innerHTML = '♥';
let col = randomcolour();
elm.style.color = col;
let elmx = (x - offsetx)|0;
let elmy = (y - offsety)|0;
let angle = Math.atan2(-y, -x)
angle = (angle * 180 / Math.PI)|0;
elm.style.transform = `rotate(${angle + rotationoffset}deg)`;
let scale = Math.random() + 0.2;
scale = scale.toFixed(2);
elm.style.scale = scale;
elm.style.left = elmx + centerx + 'px';
elm.style.top = elmy + centery + 'px';
canvas.appendChild(elm);
return elm;
}
const create = (heartcount = 500, rotationoffset = 180) => {
let canvascoords = canvas.getBoundingClientRect();
centerx = canvascoords.width / 2;
centery = canvascoords.height / 2;
let h = document.querySelector('.hearts i');
let elmcoords = h.getBoundingClientRect();
offsetx = elmcoords.width / 2;
offsety = elmcoords.height / 2;
let max = Math.min((window.innerWidth - 100) / 2, 200);
for(i = 0; i < heartcount; i++) {
let oncircle = Math.random() * 7;
let r = Math.random() * max;
let sx = r * Math.cos(oncircle);
let sy = r * Math.sin(oncircle);
createElement(sx|0,sy|0,rotationoffset);
}
}
create();
document.querySelector('form').addEventListener('change', (e) => {
let heartcount = document.querySelector('#heartcount').value;
let rotationoffset = document.querySelector('#rotationoffset').value;
canvas.innerHTML = '<i>♥</i>';
hearts = [];
let skew = document.querySelector('#skew').checked;
document.querySelector('#s').innerHTML = skew ? 'body .hearts i {font-style: normal;}' : '';
create(+heartcount,+rotationoffset);
});
const allRanges = document.querySelectorAll(".range-wrap");
allRanges.forEach(wrap => {
const range = wrap.querySelector(".range");
const bubble = wrap.querySelector(".bubble");
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
});
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = val;
// Sorta magic numbers based on size of the native UI thumb
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
!
