readme.svg

<svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(30, 30, 40);">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        @keyframes mainLoadAnimation{
          0%{
            opacity: 0;
          }
          50%{
            opacity: 0;
          }
          100%{
            opacity: 1;
          }
        }
        @keyframes menuLoadAnimation{
          0%{
            opacity: 0;
            transform: translate(0, 100%);
          }
          25%{
            opacity: 0;
            transform: translate(0, 100%);
          }
          100%{
            transform: translate(0, 0);
            opacity: 1;
          }
        }
        
        @keyframes demoUnderlineAnimation{
          0%{
            background-position: bottom right;
          }
          30%{
            background-position: bottom right;
          }
          40%{
            background-position: bottom left;
          }
          60%{
            background-position: bottom left;
          }
          70%{
            background-position: bottom right;
          }
          100%{
            background-position: bottom right;
          }
        }
        
        .header1{
          animation: menuLoadAnimation 1s cubic-bezier(0.77, 0, 0.175, 1);
          width: 100%;
          margin-top: 50px;
          cursor: default;
          font-family: Ubuntu;
          font-weight: light;
          font-size: 30px;
          text-align: center;
          word-spacing: 20px;
          color: white;
        }
        .header1 a{
          background: linear-gradient(to left, transparent 51%, white 51%);
          background-repeat: no-repeat;
          background-size: 200% 3px;
          background-position: bottom right;
          font-family: Ubuntu;
          font-weight: bold;
          text-decoration: none;
          color: white;
          display: inline-block;
          cursor: pointer;
          animation: demoUnderlineAnimation 7.5s ease;
          animation-iteration-count: infinite;
        }
        .pcontainer{
          overflow: hidden;
        }
        
        .container{
          animation: mainLoadAnimation 3s ease;
          height: auto;
          margin-top: 50px;
          margin-left: 1%;
          margin-right: 1%;
          margin-bottom: 25px;
          padding: 15px;
          border-radius: 5px;
          background-color: rgb(45, 45, 55);
          color: white;
          font-family: Ubuntu;
        }
        .container h1{
          text-align: center;
        }
      </style>
      
      <div class="header1">
        <p class="pcontainer">
          adamecki-website
          <a href="#0">demo</a>
        </p>
      </div>
      
      <div class="container">
        <h1>zbudowana w svelte</h1>
        <p>po pobraniu wykonaj <b>npm run dev</b> w katalogu głównym aplikacji</p>
      </div>
    </div>
  </foreignObject>
</svg>