logo.svg

<svg fill="none" viewBox="0 0 600 100" width="600" height="100" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml">
    <style>
      * {
        margin: 0;
        padding: 0;
        color: inherit;
        text-decoration: none;
        list-style: none;
        outline: none;
        box-sizing: border-box;
      }

      .body {
        --color-main: #ff9b71;
        --color-primary: #ff4444;
        --color-secondary: #e8e677;
        --color-background: #0d1117;
        --color-link: #fef29e;
        --color-link-active: #ff4444;

        height: auto;
        width: 100%;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        justify-content: center;

        background-image: radial-gradient(var(--color-main), var(--color-primary), var(--color-secondary));
        animation: border 5s linear infinite;
        background-size: 200% 200%;
        background-position: 0 0;
        border: 24px solid;
        border-color: var(--color-background);
      }

      .container {
        background: var(--color-background);
        height: calc(100% - 10px);
        width: calc(100% - 10px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      h1 {
        font-size: 3.5rem;
        font-weight: 800;
        font-family: "Open Sans", sans-serif;
        text-align: center;
      }
      h1 a {
        display: block;
      }
      h1 a span {
        overflow: hidden;
        transition: transform 0.25s cubic-bezier(0.5, 0, 0.25, 1.25);
        display: block;
      }
      h1 a span em {
        display: block;
      }
      h1 a span:nth-child(1) {
        color: var(--color-main);
        margin-bottom: 6px;
        animation: intro 1.5s cubic-bezier(0.5, 0, 0.25, 1.3) -1s 1;
      }
      h1 a span:nth-child(1) em {
        margin-top: 30px;
        line-height: 0rem;
        margin-bottom: -10px;
      }
      h1 a span:nth-child(2) {
        color: var(--color-primary);
        margin-bottom: 6px;
        animation: intro 1.5s cubic-bezier(0.5, 0, 0.25, 1.2) -0.9s 1;
      }
      h1 a span:nth-child(2) em {
        margin-top: -6px;
        line-height: 1rem;
      }
      h1 a span:nth-child(3) {
        color: var(--color-secondary);
        animation: intro 1.5s cubic-bezier(0.5, 0, 0.25, 1.1) -0.8s 1;
      }
      h1 a span:nth-child(3) em {
        margin-top: -36px;
        line-height: 3rem;
      }
      h1 a:hover span,
      h1 a:focus span {
        transition: transform 0.125s cubic-bezier(0.5, 0, 0.25, 2.5);
      }
      h1 a:hover span:nth-child(1),
      h1 a:focus span:nth-child(1) {
        transform: translateX(1vw);
      }
      h1 a:hover span:nth-child(3),
      h1 a:focus span:nth-child(3) {
        transform: translateX(-1vw);
      }
      .hi {
        display: inline-block;
        transform-origin: 70% 70%;
        animation: hi 3s linear -2s infinite;
      }

      @keyframes border {
        0% { background-position: 0 0; }
        20% { background-position: 100% 0; }
        40% { background-position: 100% 100%; }
        60% { background-position: 0 100%; }
        100% { background-position: 0 0; }
      }

      @keyframes hi {
        25% { transform: rotate(0deg); }
        30% { transform: rotate(15deg); }
        35% { transform: rotate(0deg); }
        40% { transform: rotate(15deg); }
        45% { transform: rotate(0deg); }
        80% { transform: rotate(0deg); }
        85% { transform: rotate(15deg); }
        90% { transform: rotate(0deg); }
        95% { transform: rotate(15deg); }
        100% { transform: rotate(0deg); }
      }

      @keyframes intro {
        0%, 75% { transform: translateX(-100vw); }
        100% { transform: translateX(0); }
      }

      @keyframes fade {
        0%, 75% { opacity: 0; }
        100% { opacity: 1; }
      }

      @media (prefers-color-scheme: light) {
        .body {
          --color-main: #e5be9f;
          --color-primary: #d2a683;
          --color-secondary: #a47d5c;
          --color-background: #ffffff;
          --color-link: #00BBF9;
          --color-link-active: #F15BB5;
        }
      }

      @media (prefers-reduced-motion) {
        .body {
          animation: none;
        }

        .hi {
          animation: none;
        }

        ul li {
          opacity: 1;
          animation: none;
        }

        h1 a span:nth-child(1),
        h1 a span:nth-child(2),
        h1 a span:nth-child(3) {
          animation: none;
        }
      }
    </style>
    <div class='body'>
      <div class='container'>
        <h1>
          <a href="https://github.com/nikolalsvk">
            <span><em>FE-Theme</em></span>
            <span><em>FE-Theme</em></span>
            <span><em>FE-Theme</em></span>
          </a>
        </h1>
      </div>
    </div>
  </div>
  </foreignObject>
</svg>