readme-typing-svg

readme-typing-svg.md

https://github.com/DenverCoder1/readme-typing-svg/

demo

https://camo.githubusercontent.com/6a4c4114adff4bdd78d5a14cfce203558423add295a8ea4f47d27cb655831d84/68747470733a2f2f726561646d652d747970696e672d7376672e6865726f6b756170702e636f6d3f636f6c6f723d3535663532342663656e7465723d74727565267643656e7465723d747275652677696474683d363030266c696e65733d48692b74686572652b2546302539462539312538422c2b492b616d2b78677166726d733b2b57656c636f6d652b746f2b4d792b50726f66696c6521

svg animate 🚀

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 50" style="background-color: #00000000;" width="600px" height="50px">
  <path id="path0">
    <!-- Single line -->
    <animate id="d0" attributeName="d" begin="0s;d1.end" dur="5000ms" fill="remove" values="m0,25 h0 ; m0,25 h600 ; m0,25 h600 ; m0,25 h0" keyTimes="0;0.8;0.8;1"/>
  </path>
  <text font-family="&quot;monospace&quot;, monospace" fill="#55f524" font-size="20" dominant-baseline="middle" x="50%" text-anchor="middle">
    <textPath xlink:href="#path0">
      Hi there 👋, I am xgqfrms.
    </textPath>
  </text>
  <path id="path1">
    <!-- Single line -->
    <animate id="d1" attributeName="d" begin="d0.end" dur="5000ms" fill="remove" values="m0,25 h0 ; m0,25 h600 ; m0,25 h600 ; m0,25 h0" keyTimes="0;0.8;0.8;1"/>
  </path>
  <text font-family="&quot;monospace&quot;, monospace" fill="#55f524" font-size="20" dominant-baseline="middle" x="50%" text-anchor="middle">
    <textPath xlink:href="#path1">
      Welcome to My Profile!
    </textPath>
  </text>
</svg>

https://github.com/xgqfrms/xgqfrms

<iframe height="300" style="width: 100%;" scrolling="no" title="SVG image animation demo" src="https://codepen.io/xgqfrms/embed/GRLdzJj?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen SVG image animation demo by xgqfrms (@xgqfrms) on CodePen. </iframe>

https://www.cnblogs.com/xgqfrms/p/18127767