Random CSS Pattern Generator

index.html

<div id="random-pattern">
  <button id="change">CHANGE</button>
  <div id="code">
  </div>
</div>

random-css-pattern-generator.markdown

Random CSS Pattern Generator

A Pen by Bansal on CodePen.

License.

script.js

var patterns = [
  "pattern-checks-sm",
  "pattern-checks-md",
  "pattern-checks-lg",
  "pattern-checks-xl",
  "pattern-grid-sm",
  "pattern-grid-md",
  "pattern-grid-lg",
  "pattern-grid-xl",
  "pattern-dots-sm",
  "pattern-dots-md",
  "pattern-dots-lg",
  "pattern-dots-xl",
  "pattern-cross-dots-sm",
  "pattern-cross-dots-md",
  "pattern-cross-dots-lg",
  "pattern-cross-dots-xl",
  "pattern-diagonal-lines-sm",
  "pattern-diagonal-lines-md",
  "pattern-diagonal-lines-lg",
  "pattern-diagonal-lines-xl",
  "pattern-horizontal-lines-sm",
  "pattern-horizontal-lines-md",
  "pattern-horizontal-lines-lg",
  "pattern-horizontal-lines-xl",
  "pattern-vertical-lines-sm",
  "pattern-vertical-lines-md",
  "pattern-vertical-lines-lg",
  "pattern-vertical-lines-xl",
  "pattern-diagonal-stripes-sm",
  "pattern-diagonal-stripes-md",
  "pattern-diagonal-stripes-lg",
  "pattern-diagonal-stripes-xl",
  "pattern-horizontal-stripes-sm",
  "pattern-horizontal-stripes-md",
  "pattern-horizontal-stripes-lg",
  "pattern-horizontal-stripes-xl",
  "pattern-vertical-stripes-sm",
  "pattern-vertical-stripes-md",
  "pattern-vertical-stripes-lg",
  "pattern-vertical-stripes-xl",
  "pattern-triangles-sm",
  "pattern-triangles-md",
  "pattern-triangles-lg",
  "pattern-triangles-xl",
  "pattern-zigzag-sm",
  "pattern-zigzag-md",
  "pattern-zigzag-lg",
  "pattern-zigzag-xl"
];

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function changePattern() {
  var target = document.getElementById("random-pattern");
  var color = getRandomColor();
  var bg_color = getRandomColor();
  var pattern = patterns[Math.floor(Math.random() * patterns.length)];
  var code =
    '<div class="' +
    pattern +
    '" style="color:' +
    color +
    "; background-color:" +
    bg_color +
    '"> </div>';

  target.style.color = color;
  target.style.backgroundColor = bg_color;
  target.className = pattern;
  document.getElementById("code").innerText = code;
}

changePattern();

document.getElementById("change").addEventListener("click", function () {
  changePattern();
  return false;
});

style.css

#random-pattern {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

#random-pattern button {
  padding: 10px 30px;
  border: 3px solid black;
  font-size: 12px;
  line-height: 1;
  border-radius: 6px;
  font-weight: bold;
}
#code {
  background-color: black;
  color: white;
  font-family: monospace;
  padding: 10px;
  border-radius: 6px;
  margin: 20px 50px;
  -webkit-user-select: all; /* Chrome 49+ */
  -moz-user-select: all; /* Firefox 43+ */
  -ms-user-select: all; /* No support yet */
}

styles

<link href="https://unpkg.com/[email protected]/dist/pattern.min.css" rel="stylesheet" />