<div class="circle"></div>

<div class="container">
  <div class="card" id="card"></div>
  <div class="card__info">
    <svg width="64" height="64" xmlns="http://www.w3.org/2000/svg" class="card__logo">
      <polygon fill="#ffffff" id="svg_1" points="27.1,24.1 24.5,39.9 28.6,39.9 31.2,24.1 27.1,24.1  " class="st0" />
      <path fill="#ffffff" id="svg_2" d="m50.8,24.1l0,0c-1,0 -1.7,0.3 -2.1,1.3l-6.1,14.6l4.3,0c0,0 0.7,-2 0.9,-2.4c0.5,0 4.6,0 5.2,0c0.1,0.6 0.5,2.4 0.5,2.4l3.8,0l-3.3,-15.9l-3.2,0zm-1.9,10.2c0.3,-0.9 1.6,-4.4 1.6,-4.4c0,0 0.3,-0.9 0.5,-1.5l0,0l0.3,1.4c0,0 0.8,3.8 1,4.6l-3.4,0l0,-0.1z" class="st0" />
      <path fill="#ffffff" id="svg_3" d="m39.4,30.5c-1.4,-0.7 -2.3,-1.2 -2.3,-2c0,-0.7 0.7,-1.4 2.3,-1.4c1.3,0 2.3,0.3 3.1,0.6l0.4,0.2l0.6,-3.4c-0.8,-0.3 -2.1,-0.7 -3.7,-0.7l0,0c-4,0 -6.9,2.2 -6.9,5.2c0,2.3 2,3.6 3.6,4.3c1.6,0.8 2.1,1.3 2.1,2c0,1.1 -1.3,1.5 -2.5,1.5c-1.6,0 -2.5,-0.2 -3.9,-0.8l-0.5,-0.3l-0.6,3.5c1,0.4 2.7,0.8 4.6,0.8c4.3,0 7.1,-2.1 7.1,-5.4c0.1,-1.6 -1,-3 -3.4,-4.1z" class="st0" />
      <path fill="#ffffff" id="svg_4" d="m21.1,24.1l0,0l-4,10.8l-0.4,-2.2c0,0 0,0 0,0l-1.4,-7.3c-0.2,-1 -1,-1.3 -1.9,-1.3l-6.5,0c-0.1,0 -0.1,0.1 -0.2,0.1c0,0.1 0,0.2 0.1,0.2c1,0.3 1.9,0.6 2.7,1c0.9,0.4 1.5,1.2 1.8,2.1l3.3,12.4l4.3,0l6.4,-15.8l-4.2,0z" class="st0" />
    </svg>
    <div class="card__chip"></div>
    <span class="card__number">
      <span class="card__number-group">1234</span>
      <span class="card__number-group">5678</span>
      <span class="card__number-group">9034</span>
      <span class="card__number-group">2233</span>
    </span>
    <span class="card__date">
      <span class="card__date-txt">
        <small>GOOD</small>
        <small>THRU</small>
      </span>
      07/22</span>
    <span class="card__name">CARDHOLDER NAME</span>
  </div>
</div>

<a class="btn" id="btn">NEW CARD</a>

:root {
  --bg: #edf1f5;
  --white: #fdfdfd;
  --c1: #000a52;
  --c2: #0d2264;
  --c3: #d33f49;
}
/* Reset */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::selection {
  background-color: transparent;
}
body {
  width: 100%;
  height: 100vh;
  min-width: 500px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Nanum Gothic Coding", monospace;
  font-size: 18px;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.18);
  background-color: var(--c2);
}
@media (max-width: 800px) {
  body {
    transform: scale(0.6);
  }
}

small {
  font-size: 8px;
  font-weight: lighter;
  line-height: 1;
}
.circle {
  position: absolute;
  width: 400px;
  height: 400px;
  background-color: var(--c1);
  border-radius: 50%;
  z-index: 40;
  opacity: 0.5;
}
.container {
  position: relative;
}
.card {
  position: relative;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 490px;
  height: 280px;
  overflow: hidden;
  background-color: var(--c1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 20px;
  z-index: 40;
}

.card__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  padding: 30px;
}
.card__chip {
  width: 55px;
  height: 40px;
  border-radius: 8px;
  margin-bottom: 15px;
  background-color: #bebfb9;
}
.card__logo {
  position: absolute;
  top: 20px;
  right: 30px;
}
.card__date {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 15px;
  font-size: 18px;
}
.card__number {
  display: flex;
  font-weight: 500;
}
.card__number-group {
  display: flex;
  margin-right: 20px;
  font-size: 26px;
  letter-spacing: 3px;
}
.card__name {
  letter-spacing: 4px;
  font-size: 16px;
}
.card__date-txt {
  display: flex;
  flex-direction: column;
  margin: 0 10px;
}
.cube {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 70px;
  z-index: 50;
  animation: cube 0.15s ease;
}
.cube--1 {
  background-image: linear-gradient(
    to right,
    var(--c1) 94%,
    var(--c2) 94%,
    var(--c2) 100%,
    var(--c1) 100%
  );
}
.cube--2 {
  background-image: linear-gradient(
    to bottom,
    var(--c1) 94%,
    var(--c2) 94%,
    var(--c2) 100%,
    var(--c1) 100%
  );
}
.cube--3 {
  background-image: radial-gradient(
    circle at 50% 50%,
    var(--c2) 25%,
    var(--c1) 25%
  );
  background-size: 10px 10px;
}
.cube--4 {
  background-image: radial-gradient(
    circle at 50% 50%,
    var(--c1) 15%,
    var(--c2) 15%,
    var(--c2) 20%,
    var(--c1) 20%
  );
}
.cube--5 {
  background-image: radial-gradient(
    circle at 50% 50%,
    var(--c3) 20%,
    var(--c1) 20%
  );
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 45px;
  position: absolute;
  bottom: calc(50% - 250px);
  font-size: 14px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  outline: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transition: 0.3s ease;
  background-color: var(--c3);
  color: var(--white);
  z-index: 2000;
}
.btn:active {
  transform: scale(0.975);
}
@keyframes cube {
  0% {
    height: 0;
    width: 0;
  }
  100% {
    height: 70px;
    width: 70px;
  }
}

const root = document.documentElement;
const card = document.querySelector("#card");
const btn = document.querySelector("#btn");
const cubes = document.querySelectorAll(".cube");
const schema = {
  schema0: {
    s1: "#000A52",
    s2: "#031067",
    s3: "#D33F49"
  },
  schema1: {
    s1: "#082172",
    s2: "#09278a",
    s3: "#456990"
  },
  schema2: {
    s1: "#4F3FB2",
    s2: "#5844d2",
    s3: "#2BCAC7"
  }
};
/************/
let createCube = (e) => {
  card.innerHTML = "";
  let s = Math.floor(Math.random() * 3);

  for (var i = 0; i < 28; i++) {
    setTimeout(() => {
      root.style.setProperty("--c1", schema[`schema${s}`].s1);
      root.style.setProperty("--c2", schema[`schema${s}`].s2);
      root.style.setProperty("--c3", schema[`schema${s}`].s3);
      let n = Math.floor(Math.random() * 8) + 1;
      let newCube = document.createElement("div");
      newCube.className = `cube cube--${n}`;
      card.appendChild(newCube);
    }, 15 * i);
  }
};
btn.addEventListener("click", createCube);
createCube();