[아카이빙] 글자가 컨텐츠를 타고 흐르는 형태

 

출처 https://worldvisionyoungcarer.or.kr/

<svg class="video_box" viewBox="0 0 840 491">
        <path d="M40,20 h760 a20,20 0 0 1 20,20 v411 a20,20 0 0 1 -20,20 h-760 a20,20 0 0 1 -20,-20 v-411 a20,20 0 0 1 20,-20 h760 a20,20 0 0 1 20,20 v411 a20,20 0 0 1 -20,20 h-760 a20,20 0 0 1 -20,-20 v-411 a20,20 0 0 1 20,-20 z" class="video_box_path" id="text_path"></path>
        <text dy="-5" text-anchor="left">
          <textPath href="#text_path" startOffset="0%" textLength="2460" class="video_box_txt">
            <animate attributeName="startOffset" from="22%" to="42%" begin="0s" dur="15s" repeatCount="indefinite"></animate>
            YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> YOUNG CARER <tspan>*</tspan> 
          </textPath>
        </text>
      </svg>