100名成员，点击可再生

下载代码

html

css

分享到微信朋友圈

html

css

*,
*:after,
*:before {
  box-sizing: border-box;
}
:root {
  --short: 0;
  --size: 120px;
  --backdrop: hsl(190, 30%, 75%);
  --bg: hsl(190, 30%, 90%);
  --pixel: 6px;
  --skin: #ebd6ad;
  --top: hsl(180, 50%, 25%);
  --footwear: hsl(0, 60%, 50%);
  --hair-color: red;
  --sleeve: hsl(200, 50%, 50%);
  --mouth-color: hsl(0, 0%, 100%);
  --eye: hsl(0, 0%, 0%);
  --bottoms: hsl(280, 90%, 50%);
  --lens: hsl(180, 90%, 90%);
  --specs: red;
  --glasses: 0;
  --shades: 0;
  --sleeves: 0;
  --trousers: 0;
  --shorts: 0;
  --left-turn: 0;
  --right-turn: 0;
  --left-eye: 0;
  --right-eye: 0;
  --neck-shift: 0;
  --neck-slim: 0;
  --beard-color: red;
  --moustache: 0;
  --chinstrap: 0;
  --sideburns: 0;
  --beard: 0;
  --moustache-full: 0;
  --beard-long: 0;
  --mouth-position: 9;
  --mouth-width: 2;
  --shirt-top: 0;
  --shirt: 0;
  --tie: 0;
  --tie-color: green;
  --shirt-bottom: 0;
  --hair-top-width: 8;
  --hair-top-position: 0;
  --fringe-width-left: 0;
  --fringe-position-left: 0;
  --fringe-width-right: 0;
  --fringe-position-right: 0;
  --sides: 0;
  --side-length: 0;
  --hair-length: 0;
  --hair-bangs-length: 0;
  --hair-bangs-position: 0;
  --ponytail: 0;
  --hat-color: pink;
  --hat-peak-color: red;
  --cap: 0;
  --trilby: 0;
  --beanie: 0;
  --sides-position: 0;
  --hat-peak-offset: 0;
}
body {
  background: var(--bg);
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-content: center;
  margin: auto auto;
  grid-template-columns: repeat(auto-fit, var(--size));
  grid-gap: 10px;
  padding: 10px 0;
  max-width: calc(90px + (10 * var(--size)));
  grid-template-rows: repeat(auto-fit, var(--size));
  align-items: center;
  justify-items: center;
}
hr {
  --ears: linear-gradient(var(--skin), var(--skin)) calc(5 * var(--pixel)) calc((6 + var(--short)) * var(--pixel)) / calc(10 * var(--pixel)) calc(1 * var(--pixel));
  --head: linear-gradient(var(--skin), var(--skin)) calc(6 * var(--pixel)) calc((3 + var(--short)) * var(--pixel)) / calc(8 * var(--pixel)) calc((7 - var(--short)) * var(--pixel));
  --body: linear-gradient(var(--top), var(--top)) calc(6 * var(--pixel)) calc(11 * var(--pixel)) / calc(8 * var(--pixel)) calc(5 * var(--pixel));
  --neck: linear-gradient(var(--skin), var(--skin)) calc((var(--neck-shift) + 7) * var(--pixel)) calc(10 * var(--pixel)) / calc((5 - var(--neck-slim)) * var(--pixel)) calc(1 * var(--pixel));
  --leg--left: linear-gradient(var(--skin), var(--skin)) calc(6 * var(--pixel)) calc(16 * var(--pixel)) / calc(1 * var(--pixel)) calc(1 * var(--pixel));
  --leg--right: linear-gradient(var(--skin), var(--skin)) calc(13 * var(--pixel)) calc(16 * var(--pixel)) / calc(1 * var(--pixel)) calc(1 * var(--pixel));
  --foot--right: linear-gradient(var(--footwear), var(--footwear)) calc((13 - var(--right-turn)) * var(--pixel)) calc(17 * var(--pixel)) / calc(2 * var(--pixel)) calc(1 * var(--pixel));
  --foot--left: linear-gradient(var(--footwear), var(--footwear)) calc((var(--left-turn) + 5) * var(--pixel)) calc(17 * var(--pixel)) / calc(2 * var(--pixel)) calc(1 * var(--pixel));
  --sleeve--left: linear-gradient(var(--sleeve), var(--sleeve)) calc(5 * var(--pixel)) calc(11 * var(--pixel)) / calc(1 * var(--pixel)) calc(var(--sleeves) * var(--pixel));
  --sleeve--right: linear-gradient(var(--sleeve), var(--sleeve)) calc(14 * var(--pixel)) calc(11 * var(--pixel)) / calc(1 * var(--pixel)) calc(var(--sleeves) * var(--pixel));
  --arm--left: linear-gradient(var(--skin), var(--skin)) calc(5 * var(--pixel)) calc(11 * var(--pixel)) / calc(1 * var(--pixel)) calc(4 * var(--pixel));
  --arm--right: linear-gradient(var(--skin), var(--skin)) calc(14 * var(--pixel)) calc(11 * var(--pixel)) / calc(1 * var(--pixel)) calc(4 * var(--pixel));
  --mouth: linear-gradient(var(--mouth-color), var(--mouth-color)) calc(var(--mouth-position) * var(--pixel)) calc(8 * var(--pixel)) / calc(var(--mouth-width) * var(--pixel)) calc(1 * var(--pixel));
  --glasses--left-top: linear-gradient(var(--specs), var(--specs)) calc(6 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((3 * var(--pixel)) * var(--glasses)) calc((0.5 * var(--pixel)) * var(--glasses));
  --glasses--left-right: linear-gradient(var(--specs), var(--specs)) calc(8.5 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((0.5 * var(--pixel)) * var(--glasses)) calc((2.5 * var(--pixel)) * var(--glasses));
  --glasses--left-bottom: linear-gradient(var(--specs), var(--specs)) calc(6 * var(--pixel)) calc((var(--short) + 6.5) * var(--pixel)) / calc((3 * var(--pixel)) * var(--glasses)) calc((0.5 * var(--pixel)) * var(--glasses));
  --glasses--left-left: linear-gradient(var(--specs), var(--specs)) calc(6 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((0.5 * var(--pixel)) * var(--glasses)) calc((2.5 * var(--pixel)) * var(--glasses));
  --glasses--right-top: linear-gradient(var(--specs), var(--specs)) calc(11 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((3 * var(--pixel)) * var(--glasses)) calc((0.5 * var(--pixel)) * var(--glasses));
  --glasses--right-right: linear-gradient(var(--specs), var(--specs)) calc(13.5 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((0.5 * var(--pixel)) * var(--glasses)) calc((2.5 * var(--pixel)) * var(--glasses));
  --glasses--right-bottom: linear-gradient(var(--specs), var(--specs)) calc(11 * var(--pixel)) calc((var(--short) + 6.5) * var(--pixel)) / calc((3 * var(--pixel)) * var(--glasses)) calc((0.5 * var(--pixel)) * var(--glasses));
  --glasses--right-left: linear-gradient(var(--specs), var(--specs)) calc(11 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((0.5 * var(--pixel)) * var(--glasses)) calc((2.5 * var(--pixel)) * var(--glasses));
  --glasses--lens-left: linear-gradient(var(--lens), var(--lens)) calc(6 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((3 * var(--pixel)) * var(--glasses)) calc((2.5 * var(--pixel)) * var(--glasses));
  --glasses--lens-right: linear-gradient(var(--lens), var(--lens)) calc(11 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((3 * var(--pixel)) * var(--glasses)) calc((2.5 * var(--pixel)) * var(--glasses));
  --glasses--bridge: linear-gradient(var(--specs), var(--specs)) calc(8.5 * var(--pixel)) calc((var(--short) + 5) * var(--pixel)) / calc((2.5 * var(--pixel)) * var(--glasses)) calc((0.5 * var(--pixel)) * var(--glasses));
  --shades--left: linear-gradient(var(--specs), var(--specs)) calc(6 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((3 * var(--pixel)) * var(--shades)) calc((3 * var(--pixel)) * var(--shades));
  --shades--right: linear-gradient(var(--specs), var(--specs)) calc(11 * var(--pixel)) calc((var(--short) + 4) * var(--pixel)) / calc((3 * var(--pixel)) * var(--shades)) calc((3 * var(--pixel)) * var(--shades));
  --shades--bridge: linear-gradient(var(--specs), var(--specs)) calc(8.5 * var(--pixel)) calc((var(--short) + 5) * var(--pixel)) / calc((3 * var(--pixel)) * var(--shades)) calc((0.5 * var(--pixel)) * var(--shades));
  --eye--left: linear-gradient(var(--eye), var(--eye)) calc((var(--left-eye) + 7) * var(--pixel)) calc((5 + var(--short)) * var(--pixel)) / var(--pixel) var(--pixel);
  --eye--right: linear-gradient(var(--eye), var(--eye)) calc((12 - var(--right-eye)) * var(--pixel)) calc((5 + var(--short)) * var(--pixel)) / var(--pixel) var(--pixel);
  --shorts--top: linear-gradient(var(--bottoms), var(--bottoms)) calc(6 * var(--pixel)) calc(15 * var(--pixel)) / calc(var(--shorts) * (8 * var(--pixel))) calc(var(--shorts) * var(--pixel));
  --trouser--top: linear-gradient(var(--bottoms), var(--bottoms)) calc(6 * var(--pixel)) calc(15 * var(--pixel)) / calc(var(--trousers) * (8 * var(--pixel))) calc(var(--trousers) * var(--pixel));
  --trouser--left: linear-gradient(var(--bottoms), var(--bottoms)) calc(6 * var(--pixel)) calc(15 * var(--pixel)) / calc(var(--trousers) * var(--pixel)) calc((2 * var(--trousers)) * var(--pixel));
  --trouser--right: linear-gradient(var(--bottoms), var(--bottoms)) calc(13 * var(--pixel)) calc(15 * var(--pixel)) / calc(var(--trousers) * var(--pixel)) calc((2 * var(--trousers)) * var(--pixel));
  --beard--top: linear-gradient(var(--beard-color), var(--beard-color)) calc((8 - var(--moustache-full)) * var(--pixel)) calc(7 * var(--pixel)) / calc(((var(--moustache-full) * 2) + (var(--moustache) * 4)) * var(--pixel)) calc(var(--moustache) * var(--pixel));
  --beard--bottom: linear-gradient(var(--beard-color), var(--beard-color)) calc(6 * var(--pixel)) calc(9 * var(--pixel)) / calc((8 * var(--chinstrap)) * var(--pixel)) calc((var(--chinstrap) + var(--beard-long)) * var(--pixel));
  --beard--left: linear-gradient(var(--beard-color), var(--beard-color)) calc(6 * var(--pixel)) calc(7 * var(--pixel)) / calc(var(--sideburns) * var(--pixel)) calc((3 * var(--sideburns)) * var(--pixel));
  --beard--right: linear-gradient(var(--beard-color), var(--beard-color)) calc(13 * var(--pixel)) calc(7 * var(--pixel)) / calc(var(--sideburns) * var(--pixel)) calc((3 * var(--sideburns)) * var(--pixel));
  --beard--middle: linear-gradient(var(--beard-color), var(--beard-color)) calc(6 * var(--pixel)) calc(7 * var(--pixel)) / calc((8 * var(--beard)) * var(--pixel)) calc((3 * var(--beard)) * var(--pixel));
  --shirt-top: linear-gradient(var(--shirt-color), var(--shirt-color)) calc(8 * var(--pixel)) calc(11 * var(--pixel)) / calc((4 * var(--shirt)) * var(--pixel)) calc(var(--shirt) * var(--pixel));
  --shirt-bottom: linear-gradient(var(--shirt-color), var(--shirt-color)) calc(9 * var(--pixel)) calc(12 * var(--pixel)) / calc((2 * var(--shirt)) * var(--pixel)) calc(var(--shirt) * var(--pixel));
  --tie-strip: linear-gradient(var(--tie-color), var(--tie-color)) calc(9.5 * var(--pixel)) calc(11 * var(--pixel)) / calc(var(--tie) * var(--pixel)) calc((3 * var(--tie)) * var(--pixel));
  --hair-center: linear-gradient(var(--hair-color), var(--hair-color)) calc(6 * var(--pixel)) calc((var(--short) + 2) * var(--pixel)) / calc(8 * var(--pixel)) var(--pixel);
  --hair-top: linear-gradient(var(--hair-color), var(--hair-color)) calc((6 + var(--hair-top-position)) * var(--pixel)) calc((var(--short) + 1) * var(--pixel)) / calc(var(--hair-top-width) * var(--pixel)) var(--pixel);
  --hair-fringe-left: linear-gradient(var(--hair-color), var(--hair-color)) calc((6 + var(--fringe-position-left)) * var(--pixel)) calc((var(--short) + 3) * var(--pixel)) / calc(var(--fringe-width-left) * var(--pixel)) var(--pixel);
  --hair-fringe-right: linear-gradient(var(--hair-color), var(--hair-color)) calc((6 + var(--fringe-position-right)) * var(--pixel)) calc((var(--short) + 3) * var(--pixel)) / calc(var(--fringe-width-right) * var(--pixel)) var(--pixel);
  --hair-side-left: linear-gradient(var(--hair-color), var(--hair-color)) calc(5 * var(--pixel)) calc(((var(--short) + 2) + var(--sides-position)) * var(--pixel)) / calc(var(--sides) * var(--pixel)) calc(var(--side-length) * var(--pixel));
  --hair-side-right: linear-gradient(var(--hair-color), var(--hair-color)) calc(14 * var(--pixel)) calc(((var(--short) + 2) + var(--sides-position)) * var(--pixel)) / calc(var(--sides) * var(--pixel)) calc(var(--side-length) * var(--pixel));
  --hair-bottom: linear-gradient(var(--hair-color), var(--hair-color)) calc((var(--ponytail) + 5) * var(--pixel)) calc((var(--short) + 6) * var(--pixel)) / calc((10 - (2 * var(--ponytail))) * var(--pixel)) calc(var(--hair-length) * var(--pixel));
  --hair-bangs: linear-gradient(var(--hair-color), var(--hair-color)) calc(4 * var(--pixel)) calc((var(--short) + 2 + var(--hair-bangs-position)) * var(--pixel)) / calc(12 * var(--pixel)) calc(var(--hair-bangs-length) * var(--pixel));
  --cap-top: linear-gradient(var(--hat-color), var(--hat-color)) calc(6 * var(--pixel)) calc((var(--short) + 1) * var(--pixel)) / calc((8 * var(--cap)) * var(--pixel)) calc(2 * var(--pixel));
  --cap-peak: linear-gradient(var(--hat-peak-color), var(--hat-peak-color)) calc((4 + var(--hat-peak-offset)) * var(--pixel)) calc((var(--short) + 2) * var(--pixel)) / calc((8 * var(--cap)) * var(--pixel)) calc(1 * var(--pixel));
  --hat-top: linear-gradient(var(--hat-color), var(--hat-color)) calc(6 * var(--pixel)) calc((var(--short) + 1) * var(--pixel)) / calc((8 * var(--trilby)) * var(--pixel)) calc(2 * var(--pixel));
  --hat-peak: linear-gradient(var(--hat-peak-color), var(--hat-peak-color)) calc((4 + var(--hat-peak-offset)) * var(--pixel)) calc((var(--short) + 2) * var(--pixel)) / calc((10 * var(--trilby)) * var(--pixel)) calc(1 * var(--pixel));
  --beanie-top: linear-gradient(var(--hat-color), var(--hat-color)) calc(6 * var(--pixel)) calc((var(--short) + 1) * var(--pixel)) / calc((8 * var(--beanie)) * var(--pixel)) calc(2 * var(--pixel));
  --beanie-peak: linear-gradient(var(--hat-peak-color), var(--hat-peak-color)) calc(5 * var(--pixel)) calc((var(--short) + 2) * var(--pixel)) / calc((10 * var(--beanie)) * var(--pixel)) calc(1 * var(--pixel));
  --beanie-left: linear-gradient(var(--hat-color), var(--hat-color)) calc(5 * var(--pixel)) calc(((var(--short) + 2) + var(--sides-position)) * var(--pixel)) / calc(var(--beanie) * var(--pixel)) calc(3 * var(--pixel));
  --beanie-right: linear-gradient(var(--hat-color), var(--hat-color)) calc(14 * var(--pixel)) calc(((var(--short) + 2) + var(--sides-position)) * var(--pixel)) / calc(var(--beanie) * var(--pixel)) calc(3 * var(--pixel));
  height: var(--size);
  box-sizing: border-box;
  width: var(--size);
  margin: 0;
  animation: fade 0.1s calc(var(--delay) * 1s) both;
  position: relative;
  border: 0;
  background: var(--mouth),
              var(--hat-peak),
              var(--hat-top),
              var(--cap-peak),
              var(--cap-top),
              var(--beanie-peak),
              var(--beanie-top),
              var(--beanie-left),
              var(--beanie-right),
              var(--beard--top),
              var(--beard--bottom),
              var(--beard--left),
              var(--beard--middle),
              var(--beard--right),
              var(--shades--left),
              var(--shades--right),
              var(--shades--bridge),
              var(--tie-strip),
              var(--shirt-top),
              var(--shirt-bottom),
              var(--hair-top),
              var(--hair-center),
              var(--hair-fringe-left),
              var(--hair-fringe-right),
              var(--hair-side-left),
              var(--hair-side-right),
              var(--glasses--left-top),
              var(--glasses--left-right),
              var(--glasses--left-bottom),
              var(--glasses--left-left),
              var(--glasses--right-top),
              var(--glasses--right-right),
              var(--glasses--right-bottom),
              var(--glasses--right-left),
              var(--glasses--bridge),
              var(--eye--left),
              var(--eye--right),
              var(--glasses--lens-left),
              var(--glasses--lens-right),
              var(--ears),
              var(--head),
              var(--neck),
              var(--trouser--top),
              var(--trouser--left),
              var(--trouser--right),
              var(--shorts--top),
              var(--body),
              var(--leg--left),
              var(--leg--right),
              var(--foot--left),
              var(--foot--right),
              var(--sleeve--left),
              var(--sleeve--right),
              var(--arm--left),
              var(--arm--right),
              var(--hair-bottom),
              var(--hair-bangs),
              var(--backdrop);
  background-repeat: no-repeat;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
}

JavaScript

const COLORS = {
  LIPSTICK: [
    'hsl(5, 90%, 50%)',
    'hsl(2, 72%, 31%)',
    'hsl(235, 27%, 30%)',
    'hsl(328, 91%, 47%)',
    'hsl(212, 18%, 60%)',
  ],
  TIE: [
    'hsl(232, 4%, 35%)',
    'hsl(2, 72%, 31%)',
    'hsl(55, 74%, 52%)',
    'hsl(56, 33%, 84%)',
    'hsl(224, 51%, 29%)',
    'hsl(60, 2%, 64%)',
    'hsl(157, 20%, 40%)',
  ],
  CAP_BASE: [
    'hsl(232, 4%, 35%)',
    'hsl(232, 4%, 99%)',
    'hsl(232, 4%, 5%)',
    'hsl(232, 4%, 65%)',
  ],
  BEANIE: [
    'hsl(349, 100%, 59%)',
    'hsl(241, 61%, 59%)',
    'hsl(211, 100%, 50%)',
    'hsl(199, 94%, 67%)',
    'hsl(130, 65%, 57%)',
    'hsl(48, 100%, 50%)',
    'hsl(35, 100%, 50%)',
    'hsl(3, 100%, 59%)',
  ],
  CAP_PEAK: [
    'hsl(349, 100%, 59%)',
    'hsl(241, 61%, 59%)',
    'hsl(211, 100%, 50%)',
    'hsl(199, 94%, 67%)',
    'hsl(130, 65%, 57%)',
    'hsl(48, 100%, 50%)',
    'hsl(35, 100%, 50%)',
    'hsl(3, 100%, 59%)',
  ],
  TRILBY: [
    'hsl(232, 4%, 35%)',
    'hsl(33, 43%, 54%)',
    'hsl(55, 74%, 52%)',
    'hsl(56, 33%, 84%)',
    'hsl(60, 2%, 64%)',
    'hsl(30, 55%, 34%)',
    'hsl(195, 27%, 56%)'
  ],
  EYES: [
    'hsl(32, 29%, 40%)',
    'hsl(32, 29%, 30%)',
    'hsl(32, 29%, 20%)',
    'hsl(206, 40%, 40%)',
    'hsl(206, 40%, 50%)',
    'hsl(206, 40%, 60%)',
    'hsl(95, 51%, 40%)',
    'hsl(137, 68%, 40%)',
    'hsl(157, 20%, 40%)',
  ],
  MOUTH: [
    'hsl(18, 65%, 81%)',
    'hsl(18, 47%, 73%)',
    'hsl(15, 45%, 67%)',
    'hsl(8, 42%, 63%)',
    'hsl(354, 69%, 63%)',
  ],
  SHIRT: [
    'hsl(0, 0%, 100%)',
    'hsl(212, 95%, 8%)',
    'hsl(0, 0%, 81%)',
    'hsl(25, 67%, 90%)',
    'hsl(203, 39%, 65%)',
  ],
  SKIN: [
    'hsl(49, 100%, 75%)',
    'hsl(23, 85%, 90%)',
    'hsl(38, 75%, 78%)',
    'hsl(26, 56%, 70%)',
    'hsl(26, 42%, 52%)',
    'hsl(18, 38%, 37%)',
  ],
  TOPS: [
    'hsl(20, 27%, 39%)',
    'hsl(47, 100%, 65%)',
    'hsl(343, 68%, 56%)',
    'hsl(337, 100%, 79%)',
    'hsl(151, 97%, 29%)',
    'hsl(65, 15%, 29%)',
    'hsl(75, 5%, 16%)',
    'hsl(0, 0%, 94%)',
    'hsl(0, 0%, 37%)',
    'hsl(207, 57%, 15%)',
    'hsl(206, 45%, 79%)',
    'hsl(197, 100%, 38%)',
    'hsl(216, 46%, 64%)',
    'hsl(274, 17%, 50%)',
    'hsl(275, 36%, 33%)',
    'hsl(344, 97%, 89%)',
    'hsl(37, 100%, 60%)',
    'hsl(12, 92%, 60%)',
    'hsl(124, 27%, 19%)',
    'hsl(93, 52%, 61%)',
    'hsl(354, 63%, 52%)',
    'hsl(352, 35%, 28%)',
    'hsl(214, 53%, 43%)',
    'hsl(149, 41%, 51%)',
    'hsl(72, 5%, 82%)',
  ],
  BEARD: [
    'hsl(35, 36%, 0%)',
    'hsl(17, 81%, 23%)',
    'hsl(43, 90%, 54%)',
    'hsl(26, 0%, 82%)',
  ],
  SPECS: [
    'hsl(0, 0%, 10%)',
    'hsl(0, 0%, 90%)',
    'hsl(0, 0%, 100%)',
    'hsl(0, 20%, 50%)',
    'hsl(210, 20%, 50%)',
    'hsl(0, 80%, 50%)',
    'hsl(200, 80%, 50%)',
  ],
  BOTTOMS: [
    'hsl(34, 45%, 45%)',
    'hsl(0, 0%, 20%)',
    'hsl(216, 20%, 25%)',
    'hsl(37, 23%, 46%)',
    'hsl(0, 13%, 16%)',
    'hsl(203, 35%, 25%)',
    'hsl(70, 10%, 30%)',
  ],
  HAIR: [
    'hsl(30, 28%, 34%)',
    'hsl(32, 50%, 74%)',
    'hsl(18, 90%, 16%)',
    'hsl(35, 36%, 10%)',
    'hsl(17, 81%, 33%)',
    'hsl(43, 90%, 64%)',
    'hsl(26, 0%, 92%)',
  ],
  HAIR_VIBRANT: [
    'hsl(300, 66%, 50%)',
    'hsl(235, 80%, 50%)',
    'hsl(165, 72%, 40%)',
  ],
  FEET: [
    'hsl(42, 69%, 53%)',
    'hsl(41, 72%, 32%)',
    'hsl(241, 99%, 40%)',
    'hsl(62, 80%, 98%)',
    'hsl(14, 96%, 79%)',
    'hsl(359, 63%, 45%)',
    'hsl(211, 75%, 61%)',
    'hsl(0, 5%, 15%)',
  ],
}

const RANDOM_IN_RANGE = (min, max) =>
  Math.floor(Math.random() * (max - min + 1) + min)
const RANDOM_FROM_ARR = ARR => ARR[Math.floor(Math.random() * ARR.length)]

const GENERATE_HR = () => {
  // Clear the body
  document.body.innerHTML = ''
  for (let i = 0; i < 100; i++) {
    const MEMBER = document.createElement('hr')
    // Create Hulk
    if (Math.random() > 0.99) {
      // Green skin, black hair, big teeth, purple shorts, different shade green for arms
      MEMBER.style.setProperty('--skin', 'green')
      MEMBER.style.setProperty('--hair-top-width', 0)
      MEMBER.style.setProperty('--hair-color', 'black')
      MEMBER.style.setProperty('--bottoms', 'purple')
      MEMBER.style.setProperty('--footwear', 'green')
      MEMBER.style.setProperty('--mouth-width', 4)
      MEMBER.style.setProperty('--mouth-position', 8)
      MEMBER.style.setProperty('--shorts', 1)
      MEMBER.style.setProperty('--top', 'green')
      MEMBER.style.setProperty('--sleeves', 3)
      MEMBER.style.setProperty('--sleeve', 'hsl(90, 60%, 20%)')
    } else {
      // Set a skin tone
      MEMBER.style.setProperty('--skin', RANDOM_FROM_ARR(COLORS.SKIN))
      // Set eye color
      MEMBER.style.setProperty('--eye', RANDOM_FROM_ARR(COLORS.EYES))
      /**
       * Choices...
       * Hat, hair
       * Hair color
       * Hulk
       */

const FEMALE = Math.random() > 0.5
      const SHORT = Math.random() > 0.75
      const GLASSES = Math.random() > 0.85
      if (SHORT) {
        MEMBER.style.setProperty('--short', 0.5)
      }
      if (GLASSES) {
        MEMBER.style.setProperty('--glasses', 1)
        MEMBER.style.setProperty('--specs', RANDOM_FROM_ARR(COLORS.SPECS))
      }
      if (!GLASSES && Math.random() > 0.9) {
        MEMBER.style.setProperty('--shades', 1)
        MEMBER.style.setProperty('--specs', 'hsl(0, 0%, 0%)')
      }
      // Give them trousers or shorts
      if ((FEMALE && Math.random() > 0.1) || !FEMALE) {
        MEMBER.style.setProperty('--bottoms', RANDOM_FROM_ARR(COLORS.BOTTOMS))
        if (Math.random() > 0.9) {
          MEMBER.style.setProperty('--shorts', 1)
        } else {
          // Give them trousers
          MEMBER.style.setProperty('--trousers', 1)
        }
      }
      const TOP_COLOR = RANDOM_FROM_ARR(COLORS.TOPS)
      MEMBER.style.setProperty(
        '--sleeves',
        RANDOM_IN_RANGE(FEMALE && Math.random() > 0.5 ? 0 : 1, 3)
      )
      MEMBER.style.setProperty(
        '--sleeve',
        Math.random() > 0.9 ? 'white' : TOP_COLOR
      )
      MEMBER.style.setProperty('--top', TOP_COLOR)
      MEMBER.style.setProperty('--left-turn', Math.random() > 0.5 ? 1 : 0)
      MEMBER.style.setProperty('--right-turn', Math.random() > 0.5 ? 1 : 0)
      MEMBER.style.setProperty(
        '--left-eye',
        Math.random() > 0.5 && !GLASSES ? 1 : 0
      )
      MEMBER.style.setProperty(
        '--right-eye',
        Math.random() > 0.5 && !GLASSES ? 1 : 0
      )
      MEMBER.style.setProperty('--neck-shift', Math.random() > 0.5 ? 1 : 0)
      // Slim neck looked a little weird
      // MEMBER.style.setProperty('--neck-slim', Math.random() > 0.5 ? 1 : 0)
      MEMBER.style.setProperty('--footwear', RANDOM_FROM_ARR(COLORS.FEET))
      // Beard comes in various forms. Moustache, Sides, Chinstrap, Full
      if (!FEMALE && Math.random() > 0.9 && !SHORT) {
        const BEARD_COLOR = RANDOM_FROM_ARR(COLORS.BEARD)
        MEMBER.style.setProperty('--beard-color', BEARD_COLOR)
        // Needs a width and to be centered. Default is 4 at 8.
        // But we can go 6 at 7
        MEMBER.style.setProperty('--moustache', Math.random() > 0.2 ? 1 : 0)
        if (Math.random() > 0.75) {
          MEMBER.style.setProperty('--moustache-full', 1)
        }
        const CHINSTRAP = Math.random() > 0.2
        MEMBER.style.setProperty('--chinstrap', CHINSTRAP ? 1 : 0)
        MEMBER.style.setProperty('--sideburns', Math.random() > 0.2 ? 1 : 0)
        // Needs a width and to be centered
        MEMBER.style.setProperty('--beard', Math.random() > 0.2 ? 1 : 0)
        MEMBER.style.setProperty(
          '--beard-long',
          Math.random() > 0.8 && CHINSTRAP ? 1 : 0
        )
        // Mouth is tricky. Default 9 and 2.
        // Could be 1, 2, 3, 4
        // Width determines the left.
      }
      const MOUTH_WIDTH = RANDOM_IN_RANGE(2, 4)
      const MOUTH_POSITION = 7 + RANDOM_IN_RANGE(1, 4 - MOUTH_WIDTH)
      MEMBER.style.setProperty('--mouth-width', MOUTH_WIDTH)
      MEMBER.style.setProperty('--mouth-position', MOUTH_POSITION)
      MEMBER.style.setProperty('--mouth-color', RANDOM_FROM_ARR(COLORS.MOUTH))
      if (FEMALE && Math.random() > 0.8) {
        MEMBER.style.setProperty(
          '--mouth-color',
          RANDOM_FROM_ARR(COLORS.LIPSTICK)
        )
      }
      // Are they wearing an undershirt. If so make that sleeve length long.
      if (Math.random() > 0.75) {
        MEMBER.style.setProperty('--sleeves', 3)
        MEMBER.style.setProperty('--shirt-color', RANDOM_FROM_ARR(COLORS.SHIRT))
        MEMBER.style.setProperty('--shirt', 1)
        if (Math.random() > 0.5) {
          MEMBER.style.setProperty('--tie-color', RANDOM_FROM_ARR(COLORS.TIE))
          MEMBER.style.setProperty('--tie', 1)
        }
      }
      // Hair is a different bag. Need to work out different parts.
      // Top of the hair Up to 8 in length starting at 6
      const HAIR_WIDTH = RANDOM_IN_RANGE(0, 8)
      const HAIR_POSITION = RANDOM_IN_RANGE(0, 8 - HAIR_WIDTH)
      MEMBER.style.setProperty('--hair-top-width', HAIR_WIDTH)
      MEMBER.style.setProperty('--hair-top-position', HAIR_POSITION)
      //Fringe left
      if (Math.random() > 0.75) {
        const FRINGE_WIDTH = RANDOM_IN_RANGE(0, 4)
        const FRINGE_POSITION = RANDOM_IN_RANGE(0, 4 - FRINGE_WIDTH)
        MEMBER.style.setProperty('--fringe-width-left', FRINGE_WIDTH)
        MEMBER.style.setProperty('--fringe-position-left', FRINGE_POSITION)
      }
      // Fringe right
      if (Math.random() > 0.75) {
        const FRINGE_WIDTH = RANDOM_IN_RANGE(0, 4)
        const FRINGE_POSITION = 4 + RANDOM_IN_RANGE(0, 4 - FRINGE_WIDTH)
        MEMBER.style.setProperty('--fringe-width-right', FRINGE_WIDTH)
        MEMBER.style.setProperty('--fringe-position-right', FRINGE_POSITION)
      }
      // Sides
      MEMBER.style.setProperty('--sides', 1)
      const SIDE_LENGTH = RANDOM_IN_RANGE(0, 4)
      const HAIR_LENGTH = RANDOM_IN_RANGE(1, 6)
      const BANG_LENGTH = RANDOM_IN_RANGE(1, 4 + HAIR_LENGTH)
      const BANGS_POSITION = RANDOM_IN_RANGE(0, 4 + (HAIR_LENGTH - BANG_LENGTH))
      MEMBER.style.setProperty('--side-length', SIDE_LENGTH)
      const LONG_HAIR =
        Math.random() > 0.5 && (SIDE_LENGTH === 0 || SIDE_LENGTH === 4)
      if (LONG_HAIR) {
        MEMBER.style.setProperty('--hair-length', HAIR_LENGTH)
        if (SIDE_LENGTH === 4 && LONG_HAIR && Math.random() > 0.5) {
          MEMBER.style.setProperty('--hair-bangs-length', BANG_LENGTH)
          MEMBER.style.setProperty('--hair-bangs-position', BANGS_POSITION)
        } else if (Math.random() > 0.5 && HAIR_LENGTH > 4) {
          // Ponytail? Offset the left and width to accomodate.
          MEMBER.style.setProperty('--ponytail', 1)
        }
      }
      // Add bangs
      // Hair length
      // Do color last. If balding, make transparent
      MEMBER.style.setProperty('--hair-color', RANDOM_FROM_ARR(COLORS.HAIR))
      if (Math.random() > 0.9) {
        MEMBER.style.setProperty(
          '--hair-color',
          RANDOM_FROM_ARR(COLORS.HAIR_VIBRANT)
        )
      }
      if (Math.random() > 0.9) {
        MEMBER.style.setProperty('--hair-color', 'transparent')
      }
      // Cap, Trilby, or Beanie? Set the hair color and create a hair shape.
      // Only thing different will be the peak.
      if (Math.random() > 0.8) {
        // You get a hat!
        if (Math.random() > 0.5) {
          // Cap
          const CAP_BASE = RANDOM_FROM_ARR(COLORS.CAP_BASE)
          const CAP_PEAK = RANDOM_FROM_ARR(COLORS.CAP_PEAK)
          MEMBER.style.setProperty('--hat-color', CAP_BASE)
          MEMBER.style.setProperty('--cap', 1)
          MEMBER.style.setProperty(
            '--hat-peak-color',
            Math.random() > 0.5 ? CAP_PEAK : CAP_BASE
          )
          MEMBER.style.setProperty('--hat-peak-offset', RANDOM_IN_RANGE(0, 4))
          MEMBER.style.setProperty('--sides-position', 1)
          MEMBER.style.setProperty('--side-length', SIDE_LENGTH - 1)
        } else if (Math.random() > 0.5) {
          // Trilby
          const HAT_COLOR = RANDOM_FROM_ARR(COLORS.TRILBY)
          MEMBER.style.setProperty('--hat-color', HAT_COLOR)
          MEMBER.style.setProperty('--trilby', 1)
          MEMBER.style.setProperty('--hat-peak-color', HAT_COLOR)
          MEMBER.style.setProperty('--hat-peak-offset', 1)
          MEMBER.style.setProperty('--sides-position', 1)
          MEMBER.style.setProperty('--side-length', SIDE_LENGTH - 1)
        } else {
          // Beanie
          const HAT_COLOR = RANDOM_FROM_ARR(COLORS.BEANIE)
          MEMBER.style.setProperty('--hat-color', HAT_COLOR)
          MEMBER.style.setProperty('--beanie', 1)
          MEMBER.style.setProperty('--hat-peak-color', HAT_COLOR)
          MEMBER.style.setProperty('--hair-bangs-position', BANGS_POSITION + 3)
        }
      }
    }
    MEMBER.style.setProperty('--delay', i * 0.01)
    document.body.appendChild(MEMBER)
  }
}

GENERATE_HR()

window.addEventListener('click', GENERATE_HR)

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg