<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Geo Ordinals - Patterns</title>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Raleway:400,600&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
  position: relative;
}

html, body {
  height: 100%;
}

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: grid;
  place-content: center center;
  background: #271D1C;
}

.container {
  width: 1000px;
  height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  overflow: hidden;
}
.container__txt {
  background: #ffffff;
  padding: 48px;
  font-family: "Raleway", sans-serif;
}

.title {
  --gradient-color-1:#D92028; 
  --gradient-color-2:#C08E66;
  font-size: 32px;
  margin-bottom: 16px;
  font-weight: 600;
  background: linear-gradient(45deg, var(--gradient-color-1), var(--gradient-color-2) 80%);
  -webkit-background-clip: text;
          background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}

.blurb {
  font-size: 18px;
  margin-bottom: 32px;
  color: gray;
  line-height: 1.4;
}

.btn {
  width: 160px;
  height: 40px;
  outline: 0;
  border: 0;
  background: transparent;
  position: relative;
  padding: 0;
  
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transition: 0.2s;
}
.btn:hover {

  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.btn:active {

  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.btn .bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 40px 40px;
  justify-content: space-between;
  opacity: 0;
}

.btn .btn__txt {
  position: relative;
  z-index: 5;
  font-size: 14px;
  font-weight: 600;
  font-family: "Raleway", sans-serif;
}
.container__pattern {
  width: 500px;
  height: 500px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.item {
  position: relative;
  background: var(--bg-color);
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: var(--clip);
          clip-path: var(--clip);
  background: var(--fg-color);
}
  </style>
</head>
<body>

<div class="container">
  <div class="container__txt">
    <div class="title">Let's do some design with Geo Ordinals</div>
    <div class="blurb">Geo Ordinals are a collection of 77 pieces, all of which are 1/1, pure craft that you want to hold on bitcoin. Geo Ordinals are going to inscribe on 🦋 Palindromes with care.
    <br><br>Here is the generative algorithm for you to create a generative geometric pattern.
    <br> <br> Have fun and share with us. <a href="https://twitter.com/Geoordinals"><img src="https://cdn.jsdelivr.net/gh/GeoOrdinals/Generative-Pattern@097d8e46f3cca9be3e270c4615f9aa687c70d207/2021%20Twitter%20logo%20-%20blue.png" width="5%" height="5%"></a> 
    </div>
    <button class="btn actionBtn">
      <div class="btn__txt">Let's Make</div>
      <div class="bg"></div>
      <mat-ripple/>
    </button>
  </div>
  <div class="container__pattern"></div>
</div>

<script>
  let containerPattern = document.querySelector(".container__pattern");
let btnPattern = document.querySelector(".bg");
let actionBtn = document.querySelector(".actionBtn");
let title = document.querySelector(".title");

let colors = ["#D6BCA6", "#C08E66", "#D92028", "#583522"];
let clip = [
	'circle(50% at 50% 50%)',
	'polygon(0 0, 50% 0, 50% 100.5%, 0% 100.5%)',
	'circle(50% at 0 50%)',
	'polygon(0 0, 100.5% 0, 100.5% 50%, 0 50%)',
	'circle(50% at 100% 50%)',
	'polygon(50% 0, 100.5% 0, 100.5% 100.5%, 50% 100.5%)',
	'circle(50% at 50% 0)',
	'polygon(0 50%, 100.5% 50%, 100.5% 100.5%, 0 100.5%);',
	'circle(50% at 50% 100%)',
	'polygon(0 0, 50% 50%, 100.5% 100.5%, 0% 100.5%)',
	'circle(100% at 0 0)',
	'polygon(0 0, 100.5% 0, 100.5% 100.5%, 50% 50%)',
	'circle(100% at 100% 0)',
	'polygon(50% 50%, 100.5% 0, 100.5% 100.5%, 0 100.5%)',
	'circle(100% at 100% 100%)',
	'circle(100% at 0 100%)',
	'polygon(0 0, 100.5% 0, 50% 50%, 0 100.5%)',
	'circle(10% at 80% 80%)',
	'polygon(0 0, 100.5% 0, 100.5% 100.5%, 0 100.5%)',
	'circle(10% at 20% 20%)',
	'polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%)',
	'circle(10% at 80% 20%)',
	'circle(10% at 20% 80%)',
];

function random(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

for (let i = 0; i < 2; i++) {
  const item = document.createElement("div");
  item.className = "item";
  let bg = random(colors);
  let fg = random(colors);
  while (fg === bg) {
    fg = random(colors);
  }
  item.style.setProperty("--bg-color", bg);
  item.style.setProperty("--fg-color", fg);
  item.style.setProperty("--clip", random(clip));

  const inner = document.createElement("div");
  inner.className = "inner";

  item.append(inner);
  btnPattern.append(item);
  
  title.style.setProperty("--gradient-color-1", bg);
  title.style.setProperty("--gradient-color-2", fg);
}

function addPatterns() {
  containerPattern.innerHTML = "";

  for (let i = 0; i < 25; i++) {
    const item = document.createElement("div");
    item.className = "item";
    let bg = random(colors);
    let fg = random(colors);
    while (fg === bg) {
      fg = random(colors);
    }
    item.style.setProperty("--bg-color", bg);
    item.style.setProperty("--fg-color", fg);
    item.style.setProperty("--clip", random(clip));

    const inner = document.createElement("div");
    inner.className = "inner";

    item.append(inner);
    containerPattern.append(item);
  }
}
addPatterns();

actionBtn.addEventListener("click", addPatterns);
</script>

</body>
</html>

Inscription #14935633