Svg text stroke animation

index.html

<div id="wrapper" ontouchstart="">

    <video  autoplay="autoplay" muted="muted" preload="auto">
        <source src="https://i.imgur.com/gwV9AqQ.mp4" type="video/mp4">
    </video>
    <div class="bg"></div>

    <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1002.7 180.6">
            <path id="s" class="svgWords" d="M73.2,72.5c17.3,0,34.3,7.9,42.8,23.5s8.7,32.8,1.8,47.5-20.2,23.6-35.6,27-34.3,1.9-50.1-3.4a72.3,72.3,0,0,1-21.2-10.9c-.7-.5-2.9-3-3.6-3s-1.3,1-1.6,1.2l-4.1,3c19.8,18.7,51.4,25.2,77.7,20.9,12-1.9,23.5-6.5,32.5-14.6a53.9,53.9,0,0,0,17-31.6c3.8-24.1-6.5-50.8-29.5-61.4-9-4.2-18.7-5.4-28.5-5.4-3.1,0-6.1.1-9.1,0s-7.6-1.4-7.9-6.2,4.4-7.3,9.1-7.8a90.3,90.3,0,0,1,18,.3A55.4,55.4,0,0,1,88,52.8c1.1.2,3.5,1.6,4.5,1.4s2.4-1.8,3.1-2.3l2.6-2c-7.3-4.3-16.2-5.5-24.5-5.8s-15.5-.7-21.6,3.4S46,57.1,47.3,62.8C50.2,74.7,63.8,72.5,73.2,72.5Zm-12,35.6c-17.5,0-35.1-7.4-43.9-23.2C9.4,70.7,8.5,51.8,15.4,37.1S35.6,13.5,51,10.1s34.4-1.9,50.1,3.3a73.2,73.2,0,0,1,21.1,11c.7.5,3,3,3.7,3s1.3-1,1.6-1.2l4.1-3.1C111.7,4.5,80.3-2,53.9,2.2,42,4.1,30.5,8.8,21.5,16.9a53.4,53.4,0,0,0-16.9,31c-3.9,23.6,5.5,49.9,27.6,61,9.6,4.8,20,6.3,30.5,6.3,6.1,0,17-1.9,16.8,7.2-.1,5.3-5.3,6.5-9.6,6.9a91.5,91.5,0,0,1-18.1-.4,52,52,0,0,1-6.7-1.1c-1-.3-3.5-1.6-4.5-1.4s-2.3,1.8-3,2.3l-2.7,2c7.1,4.1,15.6,5.3,23.7,5.8s15.4.8,21.8-3,6.7-8.7,5.8-14.4c-1.3-7.6-6.9-10.9-14.3-11Zm0-28.5c-9.8,0-18.2-3.9-20.9-13.9-2.2-8.2-.6-17.6,6.2-23.2s16.1-5.8,24.2-5.7,18,1.3,26.3,4.9a46.6,46.6,0,0,1,5,2.5c1.4.9,1.2,1.1,2.4.6s3.4-2.7,4.9-3.8C97.9,32.2,82.1,29.6,68.1,29.7c-12.2,0-25.4,2.9-32.1,14.2C30.3,53.3,31.1,67,37.3,76s15.3,10.7,25,10.7c8.1,0,16.4-.5,24.2,2.1,10.4,3.6,17.8,12.5,20.4,23s1.2,23.1-5.8,32-17.5,12.8-28.4,13.9a87.5,87.5,0,0,1-38.6-4.9,48.8,48.8,0,0,1-9-4.1,31.3,31.3,0,0,1-3.6-2.2c-.8-.5-2.2-2.1-3-2.2s-4.4,3.1-5.8,4.2c13.7,12,33.1,16.4,50.9,16.6,14.2.2,28.9-2.7,39.4-13s14.1-25.2,11.4-39.5S102.5,87,89.3,82.2C80.2,79,70.6,79.6,61.2,79.6Zm0,14.3c-13.6,0-26.1-5.5-32.3-18.1-5.1-10.4-5.3-24.1.2-34.3s15.8-16.1,27-18c13.2-2.3,27.7-.8,40.4,3.3,6.5,2.1,11.8,5.3,17.5,8.9,1.2.8.6.7,1.5.3a6.2,6.2,0,0,0,2-1.6l3-2.3C109.7,22.7,95.4,18,81.4,16.2s-28.5-1.4-41,4.9C19.1,31.9,12,59.3,23.1,80.1A38.8,38.8,0,0,0,47.7,99.4c7.8,2,15.8,1.6,23.7,1.6,10.5,0,19.4,4.1,21.8,15.1S90.9,138,79.9,141.7c-5.9,2-12.2,2.2-18.3,2a79.7,79.7,0,0,1-18.2-2.4,47.1,47.1,0,0,1-7.5-2.5c-1.9-.9-3.9-2.6-5.9-3.2s-2.2.9-3.3,1.8l-2.9,2.2c10.6,8.2,25.1,10.9,38.2,11.3,10.3.3,21.9-.8,30-7.9s10.7-19,7.9-29.6a25.2,25.2,0,0,0-20.6-19C73.4,93.4,67.1,93.9,61.2,93.9Z" />

            <path id="u" class="svgWords" d="M303.5,100.2v-90c0-.3-.2-1.7,0-1.9s6.2-.3,6.7,0,.5,3.7.5,5V85.7c0,9.2.4,18.7-1.2,27.8-3.9,22.5-18.5,42.3-38,53.9a87.1,87.1,0,0,1-70.3,8c-21.9-6.9-40.7-23-50.2-44-5.6-12.2-6.7-24.8-6.7-38V19.9c0-3.4-.1-6.9,0-10.3,0-.3-.2-1.1,0-1.3s6.8-.3,7.1,0,0,5,0,5.8V98.3a72.3,72.3,0,0,0,18.8,49.3c16.6,18.1,42.1,27,66.4,24.2s45.6-16.3,57.5-37A70.2,70.2,0,0,0,303.5,100.2Zm-14.2,0V13.3c0-.7-.6-4.4,0-5s6.5-.3,6.9,0,.1.5.2,1c.5,2.9,0,6.2,0,9.1V98.5a64.9,64.9,0,0,1-18.3,45.7c-16,16.5-40.3,23.8-62.8,19.9s-41.8-18-51.3-38.7c-4.8-10.7-5.5-21.6-5.5-33.1V11.1a10.5,10.5,0,0,1,0-2.5c.5-.7,2.1-.3,3.1-.3s3.7-.4,4.1.2a8.9,8.9,0,0,1,0,2.3v81c0,10.7.3,21,4.8,31,9.3,20.2,30,33.5,52,35.1s44.6-8.2,57.2-26.9A54.7,54.7,0,0,0,289.3,100.2Zm-14.3,0V17.5c0-2.6-.4-5.6,0-8.2,0-.2-.1-.9.1-1s6.2-.3,6.7,0,.3,2.8.3,3.8v78c0,8.4.4,16.8-2.4,25-6.9,20.2-26.3,33.8-47.2,35.6s-42.6-8.2-53.2-26.7a48.7,48.7,0,0,1-6.5-24.1V10.7a7.4,7.4,0,0,1,0-2.1c.3-.6,6.7-.8,7.1-.2s0,4.8,0,5.9V99.7c.1,18,11.6,33.4,28,40.3,19.1,7.9,42.8,3.3,56.5-12.4A41.6,41.6,0,0,0,275,100.2Zm-14.3,0V11.4a10.5,10.5,0,0,1,0-2.5c.4-.9-.4-.2.8-.6s5.9-.5,6.3,0,0,.8.1,1c.4,2.4,0,5.3,0,7.7V99.6c-.1,14.9-9.4,27.6-23,33.6-16.9,7.3-37.7,2.9-49.7-11.1a33.3,33.3,0,0,1-8.1-21.9c-.1-1.6,0-3.2,0-4.8V10.9c0-2.2-.6-2.6,1.7-2.6s4.8-.6,5.4,0a6.6,6.6,0,0,1,0,1.4V93.4c0,8.4.2,16.3,5.7,23.3,11.7,14.7,34.7,17.1,49.4,5.6C256.2,116.9,260.7,109.1,260.7,100.2Z" />

            <g id="m2" class="svgWords">
                <path d="M529.9,172.3H533c.6,0,3.4.4,3.9,0s0-.4.2-.9c.5-2.3,0-5.4,0-7.8V64.1c0-1.5.3-3.6-.1-5.1s-2.5-4.8-3.6-6.9l-3.5-6.6V172.3Z" />
                <path d="M614.4,109.1l18-34.1,28.5-54.2,6.6-12.5c-2,0-6.8-.9-8.2.3s-2,3.9-2.7,5.2L644,37.8,614.3,94.2c-1.1,2.1-3.1,4.6-3.6,6.9s-.3.2.1,1.3S613.3,107,614.4,109.1Z" />
                <path d="M558.5,172.3c1.2,0,6.4.7,7.1,0s0-2.9,0-3.4V118.4a25.7,25.7,0,0,0,0-4.8c-.3-1.7-1.7-3.5-2.5-5.1l-4.6-8.7v72.5Z" />
                <path d="M544.2,172.3c1.5,0,6.5.7,7.1-.4s0-4.3,0-5.5V88.5a6.7,6.7,0,0,0-.8-3.9l-6.3-11.9v99.6Z" />
                <path d="M515.7,8.3V163.7c0,2.3-.6,5.4,0,7.7.1.5-.1.6.2.9s6.6.3,6.9,0,0-4.5,0-5.3V47.2c0-8.1-.3-16.1,0-24.2V21.9l21.4,40.5,31.1,59.1c1.2,2.2,2.2,5.2,3.8,7.2s.3.6.7.8,3.2,0,4.3,0h3.5l-23.7-45L528.8,18c-1.5-2.8-2.8-5.8-4.5-8.6-.2-.2-.4-1-.6-1.1s-3.2,0-4,0Z" />
                <path d="M651.4,8.3h-5.7c-.7,0-2-.3-2.5.1s-1.7,3.1-2.2,4L630.3,32.7,604.9,80.6c-.7,1.4-2.6,3.7-2.7,5.2s.5,1.5.9,2.2l3.1,5.6,15.2-28.8,24.4-45.9Z" />
                <path d="M556,8.3h-8l21.9,41.8,34.5,65.6,5.1,9.7c.5.9,1.2,3.5,2.1,4.1s3.8.1,4.1-.4,0-3.2,0-4a18.2,18.2,0,0,0,0-3.3c-.3-1.2-1.3-2.4-1.8-3.5L583.5,60.6l-27-51.4Z" />
                <path d="M531.8,8.3l23.8,45.1,34.9,66.5c1.5,2.8,2.9,5.7,4.5,8.5.1.2.3.9.6,1.1s3.2,0,4.1,0h4L580,84.3,545,17.9c-1.5-2.8-2.8-5.7-4.5-8.5-.1-.2-.3-1-.6-1.1s-3.2,0-4,0Z" />
                <path d="M675.5,8.3,655.2,46.9l-32,61L615.8,122v2.6c0,1.1-.4,3.3,0,4.3s.5.6,1.8.6,1.8.3,2.3,0,1.6-3.2,2.1-4l12.4-23.6,33.8-64.1,8.4-15.9v147c0,.7-.3,2.2,0,2.9s.8.5,2.3.5,4.4.5,4.8-.2,0-4.9,0-6.1V12.5c0-.7.5-3.8,0-4.2s-3.4,0-4,0Z" />
                <path d="M662.2,172.3h3.1c.7,0,3.4.4,3.9,0s0-.3.2-.8,0-4.9,0-6.9V44.6l-6.5,12.3a6.5,6.5,0,0,0-.7,3.6V172.3Z" />
                <path d="M633.7,172.3c1.2,0,6.5.7,7.2,0a12.2,12.2,0,0,0,0-2.7V99l-3.5,6.5c-1.1,2.1-3.1,4.6-3.6,6.9s-.1,5.9-.1,8.5v51.4Z" />
                <path d="M648,172.3c1.5,0,6.5.7,7.1-.3s0-3.8,0-4.7V71.7l-5.2,9.8a13.1,13.1,0,0,0-1.9,4.4c-.6,5.2,0,10.9,0,16.1v70.3Z" />
            </g>

            <g id="m1" class="svgWords">
                <path d="M342.9,172.3H346c.6,0,3.4.4,3.9,0s0-.4.2-.9c.5-2.3,0-5.4,0-7.8V64.1c0-1.5.3-3.6-.1-5.1s-2.5-4.8-3.6-6.9l-3.5-6.6V172.3Z" />
                <path d="M427.4,109.1l18-34.1,28.5-54.2,6.6-12.5c-2,0-6.8-.9-8.2.3s-2,3.9-2.7,5.2L457,37.8,427.3,94.2c-1.1,2.1-3.1,4.6-3.6,6.9s-.3.2.1,1.3S426.3,107,427.4,109.1Z" />
                <path d="M371.5,172.3c1.2,0,6.4.7,7.1,0s0-2.9,0-3.4V118.4a25.7,25.7,0,0,0,0-4.8c-.3-1.7-1.7-3.5-2.5-5.1l-4.6-8.7v72.5Z" />
                <path d="M357.2,172.3c1.5,0,6.5.7,7.1-.4s0-4.3,0-5.5V88.5c0-1.7.1-2.3-.8-3.9l-6.3-11.9v99.6Z" />
                <path d="M328.7,8.3V163.7c0,2.3-.6,5.4,0,7.7.1.5-.1.6.2.9s6.6.3,6.9,0,0-4.5,0-5.3V47.2c0-8.1-.3-16.1,0-24.2V21.9l21.4,40.5,31.1,59.1c1.2,2.2,2.2,5.2,3.8,7.2s.3.6.8.8,3.1,0,4.2,0h3.5l-23.7-45L341.8,18c-1.5-2.8-2.8-5.8-4.5-8.6-.2-.2-.4-1-.6-1.1s-3.2,0-4,0Z" />
                <path d="M464.4,8.3h-5.7c-.7,0-2-.3-2.5.1s-1.7,3.1-2.1,4L443.3,32.7,417.9,80.6c-.7,1.4-2.6,3.7-2.7,5.2s.5,1.5.9,2.2l3.1,5.6,15.3-28.8,24.3-45.9Z" />
                <path d="M369,8.3h-8l21.9,41.8,34.5,65.6,5.1,9.7c.5.9,1.3,3.5,2.1,4.1s3.8.1,4.1-.4,0-3.2,0-4a12.2,12.2,0,0,0,0-3.3c-.3-1.2-1.3-2.4-1.8-3.5L396.5,60.6l-27-51.4Z" />
                <path d="M344.8,8.3l23.8,45.1,34.9,66.5c1.5,2.8,2.9,5.7,4.5,8.5.2.2.4.9.6,1.1s3.2,0,4.1,0h4L393,84.3,358,17.9c-1.5-2.8-2.8-5.7-4.5-8.5-.1-.2-.3-1-.6-1.1s-3.2,0-4,0Z" />
                <path d="M488.5,8.3,468.3,46.9l-32.1,61L428.8,122v2.6c0,1.1-.4,3.3,0,4.3s.5.6,1.8.6,1.9.3,2.3,0,1.6-3.2,2.1-4l12.4-23.6,33.9-64.1,8.3-15.9v147c0,.7-.3,2.2,0,2.9s.8.5,2.3.5,4.4.5,4.9-.2,0-4.9,0-6.1V12.5c0-.7.4-3.8-.1-4.2s-3.3,0-4,0Z" />
                <path d="M475.3,172.3h3c.7,0,3.4.4,3.9,0s.1-.3.2-.8,0-4.9,0-6.9V44.6L476,56.9a5.7,5.7,0,0,0-.7,3.6V172.3Z" />
                <path d="M446.7,172.3c1.2,0,6.5.7,7.2,0s0-2.3,0-2.7V99l-3.5,6.5c-1.1,2.1-3,4.6-3.6,6.9s-.1,5.9-.1,8.5v51.4Z" />
                <path d="M461,172.3c1.5,0,6.5.7,7.1-.3s0-3.8,0-4.7V71.7l-5.2,9.8c-.7,1.5-1.7,2.8-1.9,4.4-.6,5.2,0,10.9,0,16.1v70.3Z" />
            </g>

            <g id="e" class="svgWords">
                <path d="M721.3,8.3c-1.1,0-4.1-.5-4.6.3a8.8,8.8,0,0,0,0,2.3V170.8a7.5,7.5,0,0,0,0,1.5c.7.7,6,0,7.2,0V11.5a12.2,12.2,0,0,0,0-2.7C723.4,7.9,722.6,8.3,721.3,8.3Z" />
                <path d="M735.6,8.3c-1.1,0-4.1-.5-4.6.3s0,1.8,0,2.3V170.8c0,.2-.2,1.3,0,1.5s5.9,0,7.1,0V11.5c0-.7.3-2.1,0-2.7S736.9,8.3,735.6,8.3Z" />
                <path d="M707.1,8.3c-1.1,0-4.1-.5-4.6.3s0,1.8,0,2.3V170.8c0,.2-.2,1.3,0,1.5s5.9,0,7.1,0V11.5c0-.7.3-2.1,0-2.7S708.4,8.3,707.1,8.3Z" />
                <path d="M754,43.9h56.5c5.5,0,11.1.5,16.6,0,.2,0,1,.2,1.1,0s0-3,0-3.5.4-3.2,0-3.6h-1a42.8,42.8,0,0,0-6.2,0H754.2c-1.8,0-1.8.4-1.8-1.5s-.7-5,.5-5.6,4.1,0,5.4,0h67.5c.7,0,2.1.2,2.4-.2s.2-6.7-.2-7-3.6,0-4.5,0H755.8c-.5,0-3,.4-3.4,0s-.3-6.8,0-7.1,3.1,0,3.6,0h67.8c.8,0,3.6.5,4.3,0s.6-6.6.1-7.1-2.2,0-2.6,0H748.8c-.5,0-3.1-.4-3.5,0s0,.8-.1,1.1c-.4,3.2,0,6.8,0,10V44.3h7.3C752.8,43.7,752.9,43.9,754,43.9Z" />
                <path d="M825.6,165.2H758c-1.2,0-4,.5-5.1,0s-.3-.2-.4-.1h0a.8.8,0,0,0-.1-.4c-.6-.9-.1-4.4,0-5.6s.2-1.1,1.8-1.1h67.1a38.7,38.7,0,0,0,5.9,0c.2,0,.9.2,1,0s0-3.5,0-4.1.8-2.8-1.1-3c-5.5-.5-11.1,0-16.6,0H753.9c-1.9,0-1.5,0-1.5-2s-.6-4.6,0-5.1.6,0,.7,0,4,0,5.5,0H826c1.1,0,1.8.2,2.2-.5s.3-6.3-.3-6.7-3.8,0-4.7,0H752.4v-.3h-7.2v34.1c0,2.2-.1,1.9,2.1,1.9h76.6c.8,0,3.5.5,4.2,0s.6-6.4.1-6.9S826.3,165.2,825.6,165.2Z" />
                <path d="M752.4,117.7v-5.6c0-.9-.4-2.7,0-3.5s1.5-.5,2.7-.5h34.3c.3,0,1.7.2,1.9,0s0-3,0-3.6.3-3.1-.1-3.5a7.4,7.4,0,0,0-2.1,0h-34c-2.8,0-2.7.4-2.7-2.5,0-.7-.5-4.2,0-4.6s1.2,0,1.4,0h34.1c.8,0,2.2.3,2.9,0s.4,0,.5-1.2.6-5.2,0-5.8-.4,0-.9-.2c-2.5-.7-6.1,0-8.7,0H756.8c-1,0-3.9.4-4.4-.2s-.1-4.9,0-5.8-.3-.8.5-1.1,2.4,0,3.2,0h29.6c.9,0,5,.6,5.6,0s.1-6.9-.2-7.1-2.1,0-2.5,0H758.8c-1,0-5.6.6-6.3,0s-.1-4.8-.1-5.7V47.9c0-.9-.3-2.5,0-3.3s.1-.2.1-.3h-7.3v92h7.2Z" />
                <path d="M752.5,165.1Z" />
            </g>

            <g id="r" class="svgWords">
                <path d="M874.4,172.1Z" />
                <path d="M901.9,97.8h35.6c5.2,0,10.3.1,15.3-1.6a29.6,29.6,0,0,0,19.4-21.3,30.1,30.1,0,0,0-8.6-29.5,30.7,30.7,0,0,0-21.7-8.6H877.5c-1.3,0-2.7-.4-3.2.5s0,5.1,0,6.6V164.7c0,1.9-.7,5.2,0,7v.4l.6.2c.7.3,6,.4,6.4,0s0-4.1,0-4.8V49.5c0-.9-.6-4.7,0-5.4s5-.2,5.9-.2h52.6c5.7,0,11,.8,15.8,4.3A23.9,23.9,0,0,1,964.2,77c-3.6,8.9-12.5,13.6-21.7,13.7H899.6V94c0,.6-.4,3.2,0,3.7S901.4,97.8,901.9,97.8Z" />
                <path d="M905.9,58.2h31.7c3.1,0,6.8-.4,9.6,1s5.2,6.8,4.1,11.2-4.5,5.9-8.7,6c-8,.2-16.2,0-24.2,0H903.7c-.8,0-3-.4-3.7,0s-.4,2.3-.4,3.3-.3,3.4.3,3.9,2.8,0,3.5,0h14.4c8.3,0,16.6.1,24.8,0,6.3-.1,12.2-2.3,14.8-8.4,3.2-7.7,1.5-16.8-5.7-21.5s-17-2.6-24.4-2.6H894.9c-.9,0-5.7-.7-6.3,0s0,2.7,0,3.2V166.5c0,1.3-.6,4.2,0,5.3s5.5.5,7.1.5V60.4c0-1-.3-1.8.3-2.2s2.8,0,3.5,0Z" />
                <path d="M975.8,116.8a49.6,49.6,0,0,0,8.1-6.4,55.8,55.8,0,0,0,12.2-17,61.7,61.7,0,0,0,2.5-45.1c-8.4-24.2-31.9-40-57.3-40H847.9c-.3,0-1.9-.2-2.1,0s0,5,0,5.9V166.6c0,.9-.6,5,0,5.7s6.8.3,7.1,0a6.7,6.7,0,0,0,0-2V17.4c0-.3-.2-1.7,0-1.9s1.6-.1,1.9-.1h87.8a53,53,0,0,1,39,17.8,50.8,50.8,0,0,1,12.1,42.7,52.8,52.8,0,0,1-23.2,35.2l3.3,7.2C974,117.6,974.8,117.5,975.8,116.8Z" />
                <path d="M969.9,111.5c-9.2,5.7-19.4,7.7-30.1,7.7H899.6v5.6c0,1.4-.2,1.2.8,1.5s3.1,0,4.3,0h18.5c1.4,0,2.2-.3,2.9.7s1.5,4.8,2.1,6.7c1.2,3.6,2.3,7.3,3.5,10.9l7.2,22.7c.3,1,.7,4.3,1.5,4.9s2.4.1,3,.1H948c-.6-2-1.2-3.9-1.9-5.8l-12.6-40.2h3.8a12.2,12.2,0,0,1,2.7,0,8.4,8.4,0,0,1,.8,2.7c3.4,10.2,6.8,20.4,10.1,30.6,1.3,3.8,2.3,7.9,3.8,11.6.5,1.2.1.8,1.3,1.1s4.6,0,6.6,0c-.6-1.9-1.2-3.9-1.9-5.8-4.5-13.4-8.9-26.9-13.4-40.4,1.6-.1,5.5-1.3,6.5-.1s1.1,3,1.4,4.1c3.6,10.2,7.1,20.5,10.6,30.7,1.2,3.4,2,7.4,3.7,10.6.5,1,0,.7,1.3.9s4.4,0,6.5,0l-2.1-6.1-14.4-42.4c2-.6,4-1.4,6-2.2l2.8,8.1,11,31.5c1.1,3.2,1.8,7.3,3.5,10.2.6,1,0,.7,1.4.9s4.3,0,6.4,0c-1.3-4-2.7-8-4.1-12l-8.4-24.8L975.8,125c-.5-1.7-2.1-4.5-2.1-6.3a.6.6,0,0,1,.1-.4l-3.3-7.2Z" />
                <path d="M903.7,112.1h38.5a45.4,45.4,0,0,0,45.1-42.2c1.6-25.5-19.7-47.2-45-47.4H867.1c-1,0-6.3-.7-7.1.1s0,4.8,0,5.6V169.9a8.1,8.1,0,0,0,0,2.2c.5.7,4.7.2,5.6.2s1.2.3,1.6-.6a10.7,10.7,0,0,0,0-3.1V40.3c0-3.1-.2-6.3,0-9.4s.7-1.2,2.6-1.2h72.6a38.3,38.3,0,0,1,28.5,13.1c8.6,9.5,11.3,22.3,8,34.7A37.7,37.7,0,0,1,955,103c-6.2,2.1-12.6,1.9-19.1,1.9H899.6V109c0,.5-.2,2.8.1,3.1S903.1,112.1,903.7,112.1Z" />
            </g>
    </svg>
</div>

script.js

// js for: Start text stroke animation at the same time when the video starts
var video = document.querySelector("video");
var svgWords = document.getElementsByClassName("svgWords");

video.addEventListener("playing", function () {
    for (var i = 0; i < svgWords.length; i++) {
        svgWords[i].classList.remove("run-animation");
    }
    window.setTimeout(function () {
        for (var i = 0; i < svgWords.length; i++) {
            svgWords[i].classList.add("run-animation");
        }
    }, 60);
}, false);

video.addEventListener("ended", function () {
    video.play();
}, false);

style.css

* {
    margin: 0;
    padding: 0;
}

#wrapper {
    position: relative;
    overflow: hidden;
    background: #182431;
}

/* === Text effect === */
#svg {
    width: 100%;
    height: 100vh;
    display: block;
    transform: scale(.8);
}

.svgWords {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
}

.svgWords.run-animation {
    animation: lineAnimation 8300ms alternate 2 cubic-bezier(.2, .77, .83, .2),
        fillAnimation 8300ms alternate 2 linear;
}

#s {
    fill: rgb(229, 126, 38);
    fill-opacity: 0;
    stroke: rgb(229, 126, 38);
    stroke-dasharray: 660;
    stroke-dashoffset: 660;
}

#u {
    stroke: rgb(227, 212, 31);
    fill: rgb(227, 212, 31);
    fill-opacity: 0;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
}

#m1 {
    fill: rgb(18, 234, 18);
    fill-opacity: 0;
    stroke: rgb(18, 234, 18);
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}

#m2 {
    fill: rgb(21, 174, 255);
    fill-opacity: 0;
    stroke: rgb(21, 174, 255);
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}

#e {
    fill: rgb(203, 30, 255);
    fill-opacity: 0;
    stroke: rgb(203, 30, 255);
    stroke-dasharray: 544;
    stroke-dashoffset: 544;
}

#r {
    fill: rgb(230, 38, 38);
    fill-opacity: 0;
    stroke: rgb(230, 38, 38);
    stroke-dasharray: 810;
    stroke-dashoffset: 810;
}

@keyframes lineAnimation {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fillAnimation {
    40% {
        fill-opacity: 0;
    }
    91% {
        fill-opacity: 0.6;
    }
    94% {
        fill-opacity: 0;
    }
    97% {
        fill-opacity: 0.9;
    }
    100% {
        fill-opacity: 0;
    }
}


/* === Video === */
video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

/* === Background === */
.bg {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2)
}

svg-text-stroke-animation.markdown

Svg text stroke animation

Use svg stroke to animate drawing words.

Video by Peter from Pexels

A Pen by Stan Williams on CodePen.

License.