hi.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="1920" height="1080" version="1.1" viewBox="0 0 508 285.75" style="width:100%" id="svg47" sodipodi:docname="hi.svg" inkscape:version="0.92.3 (2405546, 2018-03-11)">
   <metadata id="metadata51">
      <rdf:RDF>
         <cc:Work rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
         </cc:Work>
      </rdf:RDF>
   </metadata>
   <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1018" id="namedview49" showgrid="false" inkscape:zoom="0.57708333" inkscape:cx="1204.4019" inkscape:cy="532.21431" inkscape:window-x="1920" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg47" />
   <style id="style2">
    .animate {
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap; 
      margin: 0 auto;
      letter-spacing: .15em;
      transform: translateX(-9000px);
    }

    @keyframes appear {
      from {
        opacity:0;
        transform: translateX(-500px);
      }
      
      to {
        opacity:1;
        transform: translateX(0);
      }
    }
    #arrow {
      animation: shake-vertical .7s cubic-bezier(0.455, 0.030, 0.515, 0.955) 5s 2 both;
    }
     
     #comment {
        opacity:0;
        animation:fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 4s forwards;
     }

   @keyframes shake-vertical {
      0%,
      100% {
         transform: translateY(0);
      }
      
      50% {
         transform: translateY(-4px);
      }
   }
     @keyframes fade-in {
         0% {
            opacity: 0;
         }
         100% {
            opacity: 1;
         }
      }

  </style>
   <defs id="defs9">
      <linearGradient id="linearGradient3962" x1="0" x2="490.75" y1="0" y2="226.07" gradientUnits="userSpaceOnUse">
         <stop stop-color="#004ca1" stop-opacity=".68627" offset="0" id="stop4" />
         <stop stop-color="#00c4e0" stop-opacity=".89804" offset="1" id="stop6" />
      </linearGradient>
   </defs>
   <g transform="translate(0 -11.25)" id="g13">
      <rect x=".1322" y="11.514" width="508" height="285.49" fill="url(#linearGradient3962)" opacity=".981" style="paint-order:stroke fill markers" id="rect11" />
   </g>
   <g font-size="25.4px" letter-spacing="0px" word-spacing="0px" id="g33" font-family="Montserrat" stroke-width=".26458">
      <g id="g31">
         <text class="animate" x="45.890739" y="60" style="line-height:1.25;animation: appear 1s ease-in-out forwards;" xml:space="preserve" id="text17">
            <tspan x="45.890739" y="60" font-size="25.4px" id="tspan15" stroke-width=".26458" fill="#ffffff">Hi!</tspan>
         </text>
         <text class="animate" x="45.890739" y="100" style="line-height:1.25;animation: appear 1s ease-in-out forwards;animation-delay: 1s" xml:space="preserve" id="text21">
            <tspan x="45.890739" y="100" font-size="25.4px" id="tspan19" stroke-width=".26458" fill="#ffffff">I am Lorenzo Spinelli</tspan>
         </text>
         <text class="animate" x="47.624996" y="130" style="line-height:1.25;animation: appear 1.2s ease-in-out forwards;animation-delay: 2s" xml:space="preserve" id="text25">
            <tspan x="47.624996" y="130" font-size="25.4px" id="tspan23" stroke-width=".26458" fill="#ffffff">Web2 and Web3 developer</tspan>
         </text>
         <text class="animate" x="45.877335" y="160" style="line-height:1.25;animation: appear 1s ease-in-out forwards;animation-delay: 2.5s" xml:space="preserve" id="text29">
            <tspan x="45.877335" y="160" font-size="25.4px" id="tspan27" stroke-width=".26458" fill="#ffffff">based in Florence, Italy</tspan>
         </text>
      </g>
   </g>
   <g id="comment">
      <g font-family="Montserrat" font-size="25.4px" letter-spacing="0px" stroke-width=".26458" word-spacing="0px" id="g45">
         <g id="g43">
            <text class="animate" x="40" y="250" style="line-height:1;animation: appear 1.5s ease-in-out forwards;animation-delay: 3.5s" xml:space="preserve" id="text37">
               <tspan x="40" y="250" fill="#ffffff" font-size="14px" stroke-width=".26458" id="tspan35">What about you?</tspan>
            </text>
            <text x="299.59207" y="19.826714" style="line-height:1;letter-spacing:0.15000001em;white-space:nowrap;overflow:hidden" xml:space="preserve" id="text41">
               <tspan x="299.59207" y="19.826714" font-size="14px" id="tspan39" style="font-size:14px;fill:#ffffff;stroke-width:0.26458001">Leave a comment</tspan>
            </text>
         </g>
      </g>
      <path id="arrow" d="m 490.83422,8.3994902 5.02507,10.2122048 m -4.86296,13.778373 -0.16211,-23.9905778 -5.02505,10.6985008" style="fill:none;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
   </g>
</svg>