img/title.svg

<svg width="800" height="300" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g>
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="translate"
      values="0 0; 0 0; 400 0; 400 0; 0 0; 0 0"
      dur="10s"
      calcMode="spline"
      keyTimes="0; .78; .80; .90; .92; 1"
      keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
      repeatCount="indefinite" />
    <path d="M49.908,123.182V209.421C49.908,216.293,46.978,219.968,39.574,219.968C38.614999999999995,219.968,37.869,219.915,36.803999999999995,219.862V235.575C38.18899999999999,235.682,39.361,235.682,40.745999999999995,235.682C58.803,235.682,69.19,227.37199999999999,69.19,209.688V123.18199999999999H49.908ZM59.496,111.57000000000001C65.62100000000001,111.57000000000001,70.629,106.882,70.629,101.129C70.629,95.32300000000001,65.62100000000001,90.63600000000001,59.49600000000001,90.63600000000001C53.31600000000001,90.63600000000001,48.31000000000001,95.32300000000001,48.31000000000001,101.129C48.31000000000001,106.882,53.31700000000001,111.57000000000001,59.49600000000001,111.57000000000001Z" fill="#CCC" />
  </g>
  <g>
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="translate"
      values="0 0; 0 0; 400 0; 400 0; 0 0; 0 0"
      dur="10s"
      calcMode="spline"
      keyTimes="0; .76; .78; .92; .94; 1"
      keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
      repeatCount="indefinite" />
    <path d="M124.708,206.598C148.678,206.598,163.912,189.71200000000002,163.912,164.411C163.912,139.055,148.678,122.116,124.708,122.116S85.503,139.055,85.503,164.411C85.503,189.712,100.738,206.598,124.708,206.598ZM124.814,191.151C111.55099999999999,191.151,105.05199999999999,179.32500000000002,105.05199999999999,164.357S111.55099999999999,137.404,124.814,137.404C137.86499999999998,137.404,144.363,149.389,144.363,164.357S137.865,191.151,124.814,191.151ZM150.329,95.909H99.086V107.68100000000001H150.329V95.909Z" fill="#CCC" />
  </g>
  <g>
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="translate"
      values="0 0; 0 0; 400 0; 400 0; 0 0; 0 0"
      dur="10s"
      calcMode="spline"
      keyTimes="0; .74; .76; .94; .96; 1"
      keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
      repeatCount="indefinite" />
    <path d="M221.135,123.182H204.995V103.58H185.712V123.182H174.1V138.097H185.712V183.58700000000002C185.605,198.98100000000002,196.792,206.54500000000002,211.28,206.11900000000003C216.767,205.95900000000003,220.549,204.89300000000003,222.626,204.20100000000002L219.377,189.12600000000003C218.311,189.39300000000003,216.127,189.87200000000004,213.73000000000002,189.87200000000004C208.883,189.87200000000004,204.995,188.16800000000003,204.995,180.39100000000005V138.09700000000004H221.135V123.18200000000004Z" fill="#CCC" />
  </g>
  <g>
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="translate"
      values="0 0; 0 0; 400 0; 400 0; 0 0; 0 0"
      dur="10s"
      calcMode="spline"
      keyTimes="0; .72; .74; .96; .98; 1"
      keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
      repeatCount="indefinite" />
    <path d="M260.805,206.651C273.64300000000003,206.651,281.313,200.632,284.829,193.76100000000002H285.468V205H304.005V150.24099999999999C304.005,128.61499999999998,286.373,122.11599999999999,270.766,122.11599999999999C253.56100000000004,122.11599999999999,240.35100000000003,129.78699999999998,236.08900000000003,144.702L254.09400000000002,147.259C256.011,141.665,261.444,136.87099999999998,270.87300000000005,136.87099999999998C279.82200000000006,136.87099999999998,284.72200000000004,141.45199999999997,284.72200000000004,149.49599999999998V149.81499999999997C284.72200000000004,155.35499999999996,278.91600000000005,155.62099999999998,264.48100000000005,157.16599999999997C248.60700000000006,158.87099999999998,233.42600000000004,163.61199999999997,233.42600000000004,182.04199999999997C233.42600000000004,198.12899999999996,245.19800000000004,206.65099999999998,260.80500000000006,206.65099999999998ZM265.812,192.482C257.769,192.482,252.01600000000002,188.807,252.01600000000002,181.722C252.01600000000002,174.318,258.461,171.229,267.091,170.00400000000002C272.151,169.311,282.272,168.03300000000002,284.77500000000003,166.00900000000001V175.65C284.77500000000003,184.75900000000001,277.425,192.482,265.812,192.482Z" fill="#CCC" />
  </g>
  <g>
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="translate"
      values="0 0; 0 0; 400 0; 400 0; 0 0; 0 0"
      dur="10s"
      calcMode="spline"
      keyTimes="0; .7; .72; .98; 1; 1"
      keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"
      repeatCount="indefinite" />
    <path d="M323.394,205H342.677V123.182H323.394V205ZM333.089,111.57C339.214,111.57,344.221,106.88199999999999,344.221,101.12899999999999C344.221,95.323,339.214,90.636,333.089,90.636C326.91,90.636,321.903,95.323,321.903,101.12899999999999C321.903,106.88199999999999,326.91,111.57,333.089,111.57Z" fill="#CCC"/>
  </g>
</svg>