images/header.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  style="z-index:1;position:relative" width="854" height="180" viewBox="0 -5 854 170">
  <style>
    @font-face {
      font-family: 'Inter';
      src: url('https://fonts.gstatic.com/s/inter/v7/UcCnR5Jpu8EPujjLmUhFeaxu.woff2') format('woff2');
      font-weight: 400; 
      font-style: normal;
    }
    .text {
      font-size: 40px;
      font-weight: 700;
      font-family: 'Inter', sans-serif; 
    }
    .text-stroke {
      stroke: black;
      stroke-width: 3px;
      fill: none;
    }
    .text-fill {
      fill: #DD6387;
    }
    .desc {
      font-size: 17px;
      font-weight: 400;
      font-family: 'Inter', sans-serif; 
    }
  </style>
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#7b4397" />
      <stop offset="100%" stop-color="#dc2430" />
    </linearGradient>
  </defs>

  <g transform="translate(427, 100) scale(1, 1) translate(-427, -100)">
    <path d="" fill="url(#linear)" opacity="0.4">
      <animate
        attributeName="d"
        dur="20s"
        repeatCount="indefinite"
        keyTimes="0;0.333;0.667;1"
        calcmod="spline"
        keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
        begin="0s"
        values="M0 0L 0 120Q 213.5 160 427 130T 854 155L 854 0 Z;M0 0L 0 145Q 213.5 160 427 140T 854 130L 854 0 Z;M0 0L 0 165Q 213.5 135 427 165T 854 130L 854 0 Z;M0 0L 0 120Q 213.5 160 427 130T 854 155L 854 0 Z">
      </animate>
    </path>
    <path d="" fill="url(#linear)" opacity="0.4">
      <animate
        attributeName="d"
        dur="20s"
        repeatCount="indefinite"
        keyTimes="0;0.333;0.667;1"
        calcmod="spline"
        keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1"
        begin="-10s"
        values="M0 0L 0 135Q 213.5 180 427 150T 854 160L 854 0 Z;M0 0L 0 150Q 213.5 120 427 120T 854 140L 854 0 Z;M0 0L 0 145Q 213.5 125 427 150T 854 165L 854 0 Z;M0 0L 0 135Q 213.5 180 427 150T 854 160L 854 0 Z">
      </animate>
    </path>
  </g>


  <text text-anchor="middle" alignment-baseline="middle" x="50%" y="32%" class="text"
    style="fill:#f7f5f5;" stroke="#none" stroke-width="1">Yesman Choque Mamani</text>
  <text text-anchor="middle" alignment-baseline="middle" x="50%" y="52%" class="desc"
    style="fill:#f7f5f5;">Software Engineer</text>
</svg>