<div class="world">
  <div class="title">L O G O <br>P E N .</div>
  <div class="container">
    <div class="logo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <button id="logify">Generate</button>
  <button id="colourise">
    <div class="iconcolour1"></div>
    <div class="iconcolour2"></div>
    <div class="iconcolour3"></div>
  </button>
  <button id="squarify"></button>
  <button id="circleup"></button>
  <button id="angularise"></button>
  <div class="bottomline">by <a href="https://rjmr.uk" target="_blank">just rachel</a>
  </div>
</div>
/* An abstract 'logo'* generator with a bit of a mondrian feel to it.

Works best in chrome. */

@import url(https://fonts.googleapis.com/css?family=Montserrat);

:root {
  --colour0: black;
  --colour1: red;
  --colour2: yellow;
  --colour3: blue;
  --colour4: white;
  --radius: 0%;
  --radius2: 0%;
  --radius3: 0%;
  --linewidth: 5px;
  --translate: -20px;
  --angle: 0;
  --angle2: 45deg;
  --titleopacity: 0;
  --specialwidth: 0px;
  --specialheight: 0px;
}
* {
  box-sizing: border-box;
}
body {
  background-color: #000;
}
.container {
  position: absolute;
  margin: auto;
  max-width: 150px;
  height: 150px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  overflow: hidden;
}
.logo {
  display: flex;
  flex-wrap: wrap;
}

/* RANDOM CLASS PROPERTIES */
/* RANDOM CLASS PROPERTIES */
/* RANDOM CLASS PROPERTIES */
/* RANDOM CLASS PROPERTIES */
/* RANDOM CLASS PROPERTIES */

.logo div {
  flex: 10%;
  height: 50px;
  min-width: 50px;
  border-radius: var(--radius);
}
div.line1:before {
  content: "";
  position: absolute;
  height: 400px;
  width: var(--linewidth);
  background: var(--colour0);
  transform: translateY(-200px) rotate(var(--angle));
}
div.line2:before {
  content: "";
  position: absolute;
  height: var(--linewidth);
  width: 400px;
  background: var(--colour0);
  transform: translateX(-200px) rotate(var(--angle));
}
div.triangle:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background: var(--colour0);
  transform: rotate(var(--angle2)) translate(15px);
  border-radius: var(--radius);
}
div.trianglelarge:before {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  background: var(--colour0);
  border-style: solid;
  border-width: 1px;
  border-color: var(--colour0);
  transform: rotate(var(--angle2)) translate(var(--translate));
  border-radius: var(--radius);
}
div.trianglecolour:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background: var(--colour3);
  border-style: solid;
  border-width: 1px;
  border-color: var(--colour3);
  transform: rotate(var(--angle2)) translate(15px);
  border-radius: var(--radius3);
}
/*
div.triangleextralarge:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--colour2);
  border-style: solid;
  border-width: 1px;
  border-color: var(--colour2);
  transform: rotate(45deg) translate(-60px);
  border-radius: 0%;
} */
div.triangleinvert,
div.triangleinvertlarge {
  background: var(--colour0);
  border-radius: var(--radius2);
}
div.triangleinvert:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background: white;
  transform: rotate(var(--angle2)) translate(15px);
  border-radius: var(--radius);
}
div.triangleinvertlarge:before {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  background: white;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  transform: rotate(var(--angle2)) translate(20px);
  border-radius: var(--radius2);
}
div.tone1 {
  background-color: var(--colour1);
  border-radius: var(--radius2);
  transform: rotate(var(--angle));
}
div.tone2 {
  background-color: var(--colour2);
  border-radius: var(--radius2);
  transform: rotate(var(--angle));
}
div.thespecialdot:before {
  content: "";
  position: absolute;
  width: var(--specialwidth);
  height: var(--specialheight);
  background-color: var(--colour4);
  border-radius: var(--radius2);
  transform: rotate(var(--angle));
}

/* BUTTON SETTINGS */
/* BUTTON SETTINGS */
/* BUTTON SETTINGS */
/* BUTTON SETTINGS */
/* BUTTON SETTINGS */
/* BUTTON SETTINGS */

button {
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  width: 150px;
  height: 150px;
  background: #f3f3f3;
  border-style: solid;
  border-width: 0px;
  font-family: "montserrat";
  font-size: 20px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
  transition: all 0.5s;
}
button:hover {
  border-style: solid;
  border-width: 10px;
  border-color: #ffd54f;
}
.logify-clicked {
  opacity: 0;
}
#colourise {
  position: absolute;
  margin: auto;
  left: 190px;
  top: 0px;
  bottom: 120px;
  right: 0px;
  width: 25px;
  height: 25px;
  background: white;
  border-style: solid;
  border-width: 5px;
  border-color: black;
  font-family: "montserrat";
  padding: 0px;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
  overflow: hidden;
}
.iconcolour1 {
  position: absolute;
  top: 8px;
  left: 1px;
  width: 7px;
  height: 8px;
  background: #ffc107;
}
.iconcolour2 {
  position: absolute;
  top: 0;
  left: 8px;
  width: 8px;
  height: 8px;
  background: #f06292;
}
.iconcolour3 {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  background: #00bcd4;
}
#squarify {
  position: absolute;
  margin: auto;
  left: 190px;
  top: 0px;
  bottom: 70px;
  right: 0px;
  width: 25px;
  height: 25px;
  background: grey;
  border-style: solid;
  border-width: 5px;
  border-color: black;
  font-family: "montserrat";
  padding: 0px;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
}
#circleup {
  position: absolute;
  margin: auto;
  left: 190px;
  top: 0px;
  bottom: 20px;
  right: 0px;
  width: 25px;
  height: 25px;
  background: grey;
  border-style: solid;
  border-width: 5px;
  border-color: black;
  border-radius: 100%;
  font-family: "montserrat";
  padding: 0px;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
}
#angularise {
  position: absolute;
  margin: auto;
  left: 190px;
  top: 0px;
  bottom: -35px;
  right: 0px;
  width: 25px;
  height: 25px;
  background: #ffffff00;
  border-style: solid;
  border-width: 0px;
  border-color: black;
  font-family: "montserrat";
  padding: 0px;
  font-size: 18px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 1;
  overflow: hidden;
}
#angularise:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  right: 0;
  width: 5px;
  height: 15px;
  background: grey;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  transform: skewX(-35deg);
}
#angularise:focus,
#circleup:focus,
#squarify:focus,
#colourise:focus {
  outline: none;
}

/* WORLD AND TITLE SETTING */
/* WORLD AND TITLE SETTING */
/* WORLD AND TITLE SETTING */
/* WORLD AND TITLE SETTING */
/* WORLD AND TITLE SETTING */

.world {
  position: absolute;
  margin: auto;
  top: -100px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}
.title {
  position: absolute;
  margin: auto;
  top: 170px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  color: white;
  width: 150px;
  height: 1px;
  font-family: "montserrat";
  font-size: 38px;
  text-align: left;
  text-transform: uppercase;
}
.bottomline {
  position: absolute;
  margin: auto;
  left: 0;
  top: 360px;
  right: 0;
  bottom: 0;
  letter-spacing: 2px;
  font-family: "montserrat";
  font-size: 12px;
  text-align: left;
  width: 150px;
  height: 1px;
  color: grey;
  line-height: 25px;
}
a {
  position: relative;
  letter-spacing: 2px;
  font-family: "montserrat";
  color: grey;
  font-size: 12px;
  text-decoration: none;
}
$("#logify").click(function() {
  $("#logify").addClass("logify-clicked");

  // random colour array

  var colors = ["#FFD54F", "#F48FB1", "#80DEEA"];
  var colors0 = ["#000"];
  var radiuspercent = ["0%", "100%"];
  var radiuspercent0 = ["0%"];
  var linewidth = ["5px"];
  var translate = ["-20px", "20px"];
  var angle = ["0"];
  var angle2 = ["45deg"];
  var special = ["25px", "50px", "100px"];
  function getColor() {
    return colors[Math.floor(Math.random() * colors.length)];
  }
  function getColor0() {
    return colors0[Math.floor(Math.random() * colors0.length)];
  }
  function getRadius() {
    return radiuspercent[Math.floor(Math.random() * radiuspercent.length)];
  }
  function getRadius0() {
    return radiuspercent0[Math.floor(Math.random() * radiuspercent0.length)];
  }
  function getLinewidth() {
    return linewidth[Math.floor(Math.random() * linewidth.length)];
  }
  function getTranslate() {
    return translate[Math.floor(Math.random() * translate.length)];
  }
  function getSpecial() {
    return special[Math.floor(Math.random() * special.length)];
  }
  function getAngle() {
    return angle[Math.floor(Math.random() * angle.length)];
  }
  function getAngle2() {
    return angle2[Math.floor(Math.random() * angle2.length)];
  }
  document.documentElement.style.setProperty("--radius", getRadius());
  document.documentElement.style.setProperty("--radius2", getRadius0());
  document.documentElement.style.setProperty("--radius3", getRadius());
  document.documentElement.style.setProperty("--colour0", getColor0());
  document.documentElement.style.setProperty("--colour1", getColor());
  document.documentElement.style.setProperty("--colour2", getColor());
  document.documentElement.style.setProperty("--colour3", getColor());
  document.documentElement.style.setProperty("--colour4", getColor());
  document.documentElement.style.setProperty("--linewidth", getLinewidth());
  document.documentElement.style.setProperty("--translate", getTranslate());
  document.documentElement.style.setProperty("--angle", getAngle());
  document.documentElement.style.setProperty("--angle2", getAngle2());
  document.documentElement.style.setProperty("--specialwidth", getSpecial());
  document.documentElement.style.setProperty("--specialheight", getSpecial());

  // code learned from https://codepen.io/Sarah_C/pen/PGQowr

  var classes = [
    "line1",
    "line2",
    "line3",
    "line4",
    "triangle",
    "triangleinvert",
    "trianglelarge",
    "triangleinvertlarge",
    "trianglecolour",
    "tone1",
    "tone2",
    "thespecialdot"
  ];

  $(".logo div").each(function() {
    $(this).removeClass();

    $(this).addClass(classes[~~(Math.random() * classes.length)]);
  });
});

$("#colourise").click(function() {
  var colors = [
    "#FFD54F",
    "#F48FB1",
    "#80DEEA",
    "#D4E157",
    "#7986CB",
    "#CE93D8",
    "#00CCCC",
    "#03A9F4",
    "#FF9800",
    "#EF5350",
    "#000"
  ];
  function getColor() {
    return colors[Math.floor(Math.random() * colors.length)];
  }
  document.documentElement.style.setProperty("--colour0", getColor());
  document.documentElement.style.setProperty("--colour1", getColor());
  document.documentElement.style.setProperty("--colour2", getColor());
  document.documentElement.style.setProperty("--colour3", getColor());
  document.documentElement.style.setProperty("--colour4", getColor());
});

$("#squarify").click(function() {
  var radiuspercent = ["0%"];

  function getRadius() {
    return radiuspercent[Math.floor(Math.random() * radiuspercent.length)];
  }
  document.documentElement.style.setProperty("--radius", getRadius());
  document.documentElement.style.setProperty("--radius2", getRadius());
  document.documentElement.style.setProperty("--radius3", getRadius());
});

$("#circleup").click(function() {
  var radiuspercent = ["5%", "10%", "20%", "30%", "50%", "100%"];

  function getRadius() {
    return radiuspercent[Math.floor(Math.random() * radiuspercent.length)];
  }
  document.documentElement.style.setProperty("--radius", getRadius());
  document.documentElement.style.setProperty("--radius2", getRadius());
  document.documentElement.style.setProperty("--radius3", getRadius());
});

$("#angularise").click(function() {
  var angle = ["0", "45deg", "-45deg", "22deg", "-22deg", "135deg", "-135deg"];

  function getAngle() {
    return angle[Math.floor(Math.random() * angle.length)];
  }
  document.documentElement.style.setProperty("--angle", getAngle());
  document.documentElement.style.setProperty("--angle2", getAngle());
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js