Status card - YarTechnology

Back

Live Code Preview

Code Sections

HTML Code

<div class="parent">
  <div class="a tl"></div>
  <div class="a t"></div>
  <div class="a tr"></div>
  <div class="a l"></div>
  <div class="a c"></div>
  <div class="a r"></div>
  <div class="a bl"></div>
  <div class="a b"></div>
  <div class="a br"></div>
  <div class="card">
    <svg height="300" width="300" class="outer bb">
      <path
        class="bak"
        pathLength="360"
        d="M0 110V70A70 70 135 0170 0H230A70 70 45 01300 70L300 110A40 40 135 01260 150H40A40 40 0 000 190V230A70 70 45 0070 300H230A70 70 135 00300 230V190"
      ></path>
      <path
        class="bak20"
        pathLength="360"
        d="M0 110V70A70 70 135 0170 0H230A70 70 45 01300 70L300 110A40 40 135 01260 150H40A40 40 0 000 190V230A70 70 45 0070 300H230A70 70 135 00300 230V190"
      ></path>
      <path
        class="blur patt"
        pathLength="360"
        d="M0 110V70A70 70 135 0170 0H230A70 70 45 01300 70L300 110A40 40 135 01260 150H40A40 40 0 000 190V230A70 70 45 0070 300H230A70 70 135 00300 230V190"
      ></path>
      <path
        class="patt"
        pathLength="360"
        d="M0 110V70A70 70 135 0170 0H230A70 70 45 01300 70L300 110A40 40 135 01260 150H40A40 40 0 000 190V230A70 70 45 0070 300H230A70 70 135 00300 230V190"
      ></path>
    </svg>
    <svg height="300" width="300" style="--z: -1" class="outer bb1">
      <path
        class="patt"
        pathLength="360"
        d="M0 110V70A70 70 135 0170 0H230A70 70 45 01300 70L300 110A40 40 135 01260 150H40A40 40 0 000 190V230A70 70 45 0070 300H230A70 70 135 00300 230V190"
      ></path>
    </svg>
    <svg height="300" width="300" style="--z: 0" class="outer bb1">
      <path
        class="patt"
        pathLength="360"
        d="M0 110V70A70 70 135 0170 0H230A70 70 45 01300 70L300 110A40 40 135 01260 150H40A40 40 0 000 190V230A70 70 45 0070 300H230A70 70 135 00300 230V190"
      ></path>
    </svg>
    <svg height="300" width="300" style="--z: 1" class="outer bb1">
      <path
        class="patt"
        pathLength="360"
        d="M0 110V70A70 70 135 0170 0H230A70 70 45 01300 70L300 110A40 40 135 01260 150H40A40 40 0 000 190V230A70 70 45 0070 300H230A70 70 135 00300 230V190"
      ></path>
    </svg>
    <div class="inner-blur-thing"></div>
    <div class="inner">
      <div class="inner-bg"></div>
    </div>
    <div style="--z: -3" class="inner-border"></div>
    <div style="--z: 0" class="inner-border"></div>
    <div style="--z: 3" class="inner-border"></div>
    <div style="--z: -2" class="percent top">69%</div>
    <div style="--z: -2" class="percent">69%</div>
    <div style="--z: 0" class="percent">69%</div>
    <div style="--z: 2" class="percent">69%</div>
    <div class="percent bak">69%</div>
    <div class="txt charging">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M11 15H6L13 1V9H18L11 23V15Z" pathLength="10"></path>
      </svg>
      CHARGING
    </div>
    <div class="txt health">
      <svg viewBox="0 0 512 258.25" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M472.06 38.53V68.15H499.9C503.26 68.15 506.28 69.52 508.45 71.7 510.64 73.89 512 76.95 512 80.25V178.01C512 181.33 510.61 184.38 508.44 186.55 506.27 188.71 503.22 190.11 499.9 190.11H472.06V219.72C472.06 240.92 454.71 258.25 433.53 258.25H38.53C17.33 258.25 0 240.93 0 219.72V38.53C0 17.35 17.37 0 38.53 0H433.53C454.75 0 472.06 17.31 472.06 38.53ZM446.6 216.95V41.3C446.6 32.61 439.45 25.46 430.77 25.46H41.3C32.59 25.46 25.46 32.59 25.46 41.3V216.95C25.46 225.63 32.63 232.79 41.3 232.79H430.77C439.46 232.79 446.6 225.67 446.6 216.95Z"
        ></path>
        <path
          d="M360.18 48.54c8.57 0 15.59 7.13 15.59 15.59v129.99c0 8.46-7.13 15.59-15.59 15.59H69.88c-8.46 0-15.58-7.02-15.58-15.59v-129.99c0-8.57 7.01-15.59 15.58-15.59z"
        ></path>
        <path
          fill="url(#myGradient)"
          d="M360.18 48.54c8.57 0 15.59 7.13 15.59 15.59v129.99c0 8.46-7.13 15.59-15.59 15.59H69.88c-8.46 0-15.58-7.02-15.58-15.59v-129.99c0-8.57 7.01-15.59 15.58-15.59z"
          class="fd"
        ></path>
        <defs>
          <linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="myGradient">
            <stop style="stop-color:#0fa2; stop-opacity:1" offset="0%"></stop>
            <stop style="stop-color:#0fa; stop-opacity:1" offset="100%"></stop>
            <stop style="stop-color:#0fa2; stop-opacity:1" offset="200%"></stop>
          </linearGradient>
        </defs>
      </svg>
      96% BATTERY HEALTH
    </div>
    <div class="txt cycles">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z"
        ></path>
      </svg>
      215 CYCLES
    </div>
    <div class="bar-hb"></div>
    <div style="--z: 0" class="bar">
      <div class="bar-slider"></div>
    </div>
    <div class="bar bak"><div class="bar-slider"></div></div>
  </div>
</div>

CSS Code

.parent {
  width: 240px;
  height: 240px;
  perspective: 3000px;
}

.card:hover {
  transform: rotateX(5deg) rotateY(10deg);
  .inner .inner-bg .disabled-kuz-low-end-devices {
    transform: translateZ(-10px) rotateX(5deg) rotateY(10deg);
  }

  div.bar.bak {
    opacity: 0.7;
  }
}

.a:hover ~ .card,
.card:hover {
  .outer .patt {
    stroke-dasharray: 0 90 280 999;
    stroke-dashoffset: 10;
  }
}

.a {
  position: absolute;
  width: 100px;
  height: 100px;
  /* z-index: 19; */
  transform: translateZ(600px);
  /* border: 1px solid red; */

  &:hover ~ .card .bar.bak {
    opacity: 1;
  }
}

.tl {
  top: -30px;
  left: -30px;

  &:hover ~ .card {
    transform: rotateX(-20deg) rotateY(20deg);
    .inner .inner-bg .disabled-kuz-low-end-devices {
      transform: translateZ(-10px) rotateX(-20deg) rotateY(20deg);
    }
  }
}

.t {
  top: -30px;
  left: 70px;

  &:hover ~ .card {
    transform: rotateX(-20deg);
    .inner .inner-bg .disabled-kuz-low-end-devices {
      transform: translateZ(-10px) rotateX(-20deg);
    }
  }
}

.tr {
  top: -30px;
  left: 170px;

  &:hover ~ .card {
    transform: rotateX(-20deg) rotateY(-20deg);
    .inner .inner-bg .disabled-kuz-low-end-devices {
      transform: translateZ(-10px) rotateX(-20deg) rotateY(-20deg);
    }
  }
}

.l {
  top: 70px;
  left: -30px;

  &:hover ~ .card {
    transform: rotateY(20deg);
    .inner .inner-bg .disabled-kuz-low-end-devices {
      transform: translateZ(-10px) rotateY(20deg);
    }
  }
}

.c {
  top: 70px;
  left: 70px;
}

.r {
  top: 70px;
  left: 170px;

  &:hover ~ .card {
    transform: rotateY(-20deg);
    .inner .inner-bg .disabled-kuz-low-end-devices {
      transform: translateZ(-10px) rotateY(-20deg);
    }
  }
}

.bl {
  top: 170px;
  left: -30px;

  &:hover ~ .card {
    transform: rotateX(20deg) rotateY(20deg);
    .inner .inner-bg .disabled-kuz-low-end-devices {
      transform: translateZ(-10px) rotateX(20deg) rotateY(20deg);
    }
  }
}

.b {
  top: 170px;
  left: 70px;

  &:hover ~ .card {
    transform: rotateX(20deg);
    .inner .inner-bg .disabled-kuz-low-end-devices {
      transform: translateZ(-10px) rotateX(20deg);
    }
  }
}

.br {
  top: 170px;
  left: 170px;

  &:hover ~ .card {
    transform: rotateX(20deg) rotateY(-20deg);
    .inner .inner-bg .disabled-kuz-low-end-devices {
      transform: translateZ(-10px) rotateX(20deg) rotateY(-20deg);
    }
  }
}

.card {
  position: relative;
  width: 240px;
  height: 240px;
  transform-style: preserve-3d;
  transition: 0.7s;
  /* perspective-origin: 50% 50%; */
}

.outer {
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  overflow: visible;
  transition: 1s;
  transform: scale(1.05) translateZ(-50px);
  transform-origin: 170px;
  pointer-events: none;

  &.bb {
    transform: scale(1.0535) translateZ(-55px);
  }

  &.bb1 {
    transform: scale(1.0535) translateZ(calc(-55px + 5px * var(--z)));
    path {
      stroke-width: calc(6px - 3px * var(--z) * var(--z));
      /* stroke: hsl(1 calc(var(--z) * var(--z) * 100) 50); */
    }
  }

  path {
    stroke: #fff;
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 0 0 280 999;
    transition: 1s;

    &.blur {
      filter: blur(8px);
      opacity: 0.4;
    }

    &.bak {
      stroke: #ffffff09;
      stroke-dasharray: 0 0 360 0;
    }

    &.bak20 {
      stroke: #ffffff09;
      stroke-dasharray: 20 50;
      stroke-dashoffset: 0;
      animation: stronk 40s linear infinite;
    }
  }
}

@keyframes stronk {
  from {
    stroke-dashoffset: 360;
  }
}

.inner {
  position: absolute;
  inset: 1px;
  border-radius: 29px;
  background: #212121;
  overflow: hidden;
  /* pointer-events: none; */
  /* transition: 1s; */
  /* transform: scale(0.99) translateZ(1px); */
  transform-style: preserve-3d;
  perspective: 100px;

  .inner-bg {
    position: absolute;
    inset: -1000%;
    filter: blur(40px);
    opacity: 0.3;
    transform: translateZ(-10px);
    transition: 1s;

    background: conic-gradient(
      from 45deg,
      #fff 5%,
      #fff0 10% 40%,
      #fff 45% 55%,
      #fff0 60% 90%,
      #fff 95%
    );

    animation: speen 24s cubic-bezier(0.36, 0.2, 0.64, 0.8) infinite;
  }
}

@keyframes speen {
  50% {
    rotate: 180deg;
  }
  to {
    rotate: 360deg;
  }
}

.inner-border {
  position: absolute;
  inset: 0;
  border: double 2px transparent;
  background-image: linear-gradient(-45deg, #2221, #fff2, #3331);
  background-origin: border-box;
  clip-path: path(
    "M30 0H210A30 30 0 01240 30V210A30 30 0 01210 240H30A30 30 0 010 210V30A30 30 0 0130 0V2A28 28 0 002 30V210A28 28 0 0030 238H210A28 28 0 00238 210V30A28 28 0 00210 2H30"
  );
  clip-rule: evenodd;
  transform: translateZ(calc(var(--z) * 1px));
  pointer-events: none;
}

.percent {
  position: absolute;
  top: 24px;
  left: 34px;
  font-size: 42px;
  color: #ccc;
  transition: 0.4s;
  transform: translate3d(0px, 0px, calc(40px + var(--z) * 1.5px));
  cursor: default;
  pointer-events: none;

  &.top {
    pointer-events: all;
    color: #0000;
  }

  &.bak {
    color: #fff;
    transform: translate3d(0px, 0px, 1px);
    filter: blur(8px);
    opacity: 0.8;
  }
}

.percent.top:hover ~ .percent {
  text-shadow: 0 0 6px #fff3;
  transform: translate3d(0px, 0px, calc(60px + var(--z) * 1.5px));
}

.txt {
  position: absolute;
  font-family: monospace;
  cursor: default;
  display: flex;
  gap: 4px;
  fill: #888;
  font-size: 14px;
  font-weight: 500;
  color: #888;
  transition:
    0.4s,
    fill 0.2s,
    color 0.2s;
  transform: translate3d(0px, 0px, 20px);

  &:hover {
    transform: translate3d(0px, 0px, 40px);
    color: #aaa;
    fill: #aaa;
  }

  svg {
    width: 18px;
    transition: 0.5s;
  }
}

.charging {
  top: 104px;
  left: 28px;

  svg {
    stroke-width: 1.5px;
    stroke: #0f8;
    stroke-dasharray: 10 10;
    stroke-dashoffset: 10;
  }

  &:hover svg {
    stroke-dasharray: 10 10;
    stroke-dashoffset: 0;
  }
}

.health {
  top: 140px;
  left: 28px;

  svg .fd {
    opacity: 0;
    transition: 0.4s;
  }

  &:hover svg .fd {
    opacity: 1;
  }
}

.cycles {
  top: 164px;
  left: 28px;

  &:hover svg {
    rotate: 180deg;
    fill: #5d9;
  }
}

.bar-hb {
  position: absolute;
  width: 190px;
  height: 14px;
  top: 205px;
  left: 25px;
  transform: translate3d(0px, 0px, 10px);

  &:hover {
    ~ .bar:not(.bak) {
      transform: translate3d(0px, 0px, calc(30px + var(--z) * 2px));

      .bar-slider {
        background-color: #3eea8e6c;
      }
    }
  }
}

.bar {
  position: absolute;
  width: 180px;
  height: 4px;
  background: linear-gradient(90deg, #0000 128px, #ffffff05 0);
  top: 210px;
  left: 30px;
  border-radius: 2px;
  transform: translate3d(0px, 0px, calc(10px + var(--z) * 1.5px));
  transition: 0.4s;
  clip-path: path(
    "M2 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Zm30 0a1 1 0 000 4h22a1 1 0 000-4Z"
  );
  pointer-events: none;

  .bar-slider {
    width: 128px;
    border-radius: inherit;
    height: 4px;
    background: linear-gradient(90deg, #3eea8e00, #3eea8e70, #3eea8e00),
      linear-gradient(90deg, #3eea8e00, #3eea8e9a, #3eea8e00);
    background-size: 200%;
    animation: bg 4s linear infinite;
    transition: 0.3s;
  }

  &.bak {
    transform: translate3d(0px, 0px, 1px);
    filter: blur(6px);
    opacity: 0.1;
    clip-path: none;

    .bar-slider {
      width: 124px;
      border-radius: inherit;
      height: 4px;
      background: #3eea8e;
      background-size: 200%;
      animation: bg 4s linear infinite;
    }
  }
}

@keyframes bg {
  from {
    background-position: 200%, 0%;
  }
}