we.type | MP_sliced-text

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : MP_sliced-text.html                   |
|                  Author : Maximilian Pesch                      |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sliced</title>
  <style>
   @font-face {
      font-family: Konsole;
      src: url(../_fonts//Konsolev1.1-VF.ttf);
   }
   
   * {
      box-sizing: border-box;
   }

   :root {
      --background-color: white;
      --text-color: black;
   }

   body {
      font-family: Konsole;
      place-content: center;
      margin: 0;
   }
   
   /* defines the wrapper container */
   .wrapper {
      /* uses grid layout */
      display: grid; 
      /* sets the font family to Konsole */
      font-family: Konsole; 
      /* centers the content vertically and horizontally */
      place-content: center; 
      /* sets the background color using a CSS variable */
      background-color: var(--background-color); 
      /* sets the minimum height to 100% of the viewport height */
      min-height: 100vh; 
      /* sets the font size using a clamp function */
      font-size: clamp(1.5rem, 1rem + 18vw, 15rem); 
      /* sets the font weight to bold */
      font-weight: 700; 
      /* transforms the text to uppercase */
      text-transform: uppercase; 
      /* sets the text color using a CSS variable */
      color: var(--text-color); 
   }

   .wrapper > div {
      grid-area: 1/1/-1/-1;
   }
   /* defines the top element */
   .top {
      clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
      /* links the animation name, its duration, and process, and that it repeats infinitely */
      animation: orbital 9s linear infinite;
   }
   /* defines the bottom element */
   .bottom {
      clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
      color: transparent;
      /* sets the background color to white */
      background: -webkit-linear-gradient(177deg, white 53%, var(--text-color) 65%);
      background: linear-gradient(177deg, white 53%, var(--text-color) 65%);
      background-clip: text;
      -webkit-background-clip: text;
      transform: translateX(-0.02em);
      /* links the animation to the top element, sets its duration, and process, its repeats and that it goes in reverse */
      animation: orbital 9s linear infinite reverse;
      /* adds a delay of 2 seconds */
      animation-delay: 2s; 
   }
   /* defines the animation, sets up a full rotation */
   @keyframes orbital {
      0% {
         transform: rotate(0deg);
      }
      25% {
         transform: rotate(0deg);
      }
      50% {
         transform: rotate(180deg);
      }
      75% {
         transform: rotate(180deg);
      }
      100% {
         transform: rotate(360deg);
      }
   }
   </style>
</head>

<body>
   <section class="wrapper">
      <div class="top">Sliced </div>
      <div class="bottom" aria-hidden="true">Sliced</div>
   </section>
</body>
</html>