?? ?? ??? ?? ?? ???????? ?????. ?, ??? ??? ?? ??? ???? ??? ???????? ?????. ?? ??? ??? ??? ??? ?? ??? (??? SVG ????? ????? ??) ???? ?? ????? ??? ?? ??? ???? ?? ?? ???????. ??? ?? ? ? ?? ??? ??? ?? ?? SVG ???? ???? ??? ??????.

? ??? ???? ??? ???? ?? ?? ???? ??? ??????. ?? ???? ?? ???? ?? ??? ?? ??????.

??? ?? ???!

SVG ???

?? ? ??? ?? ??? ??? ??? ??? ????? ??? Craig Roblewsky? ??? ??????? ?? ??? ??? ????. ??? SVG ????-??? ? ???? ??? ??? ??????? ??? ?????.

??? ??? ?????? ??? ??? ?? ??? ?? ??? ?? ??? ??? ??? ???? ????? ??? ???? ?????? ???? ??????. ??? SVG ???? ???? ????.

??? ?? ??? ???? ??? ?? ??? ?????. ? ?? ???? ?? ??? ??? ?? Haseartone??, ??? ??? ??? ???? ??? ????.

????? ??? ?????????? ??? ???? ? ??? ?? ?? ?? ????. ?? ??, ?? ??? ? ???? ????. ???? ? ?? ?? ????, ??? ??? ???? ???? ? ??? ?? ??? ?? ????. ?????? ??? ? ?? ???? ????? ???? ????? ? ????.

??? ???

? ???? ??? ??? ??? ??? ??? ?? ??? ? ?? ?? ???? ?? ???? ????.

1. ?? ?? ??? ????? ????? (? ???? HaIrtone???).
2. ?? ???? ??? ????? ?? ?????.

?? ??? ??? ?? ???? ??? ????. ??? ?????? ??? ?????? ???? ?? ?????. ??? ??? ?? ? ??? ?????. ??? ?? ???? Illustrator? ??? ?? ?????. ??? ??? ?? ? ? ????.

1. ??? ??????.
2. "??"??? ?? ?? ??? ??????.

??? ??? ????? ??? ??? ??? ?? ?????? ???????.

? ?? ??? ??? ???? ??? ???? ?? ?? ????,? ??? ???? ?????. ?? SVG? ??? ? ?? ??? ???? ?? ?? ??? ID ? ???? ?????.

?? ??? ??? ???? ???? ??? ??????.

SVG??? ??? ???? ????? ????? ? ? ???? ? ?? ?? ??? ? ???? ???????. ? ??? ???? ??? ?? ? ? ????.

1. ? ??? ??????.
2. ??? ??? "??"?? ??????.
3. ???? ??? ???? ??? ?? ????. ???? ?? ??? 5px? ???? ??? ?? ??? ?????.
4. ??? ??!

? ? ?? ??? ?? ??? ?????. ??? ?? ????? ??? ???? ? ??? ?? ????.

? ??? ???? ??? ???? ?? ??? ???????. ??? ?? ?? ? ?? ????? ???? ??? ??????. ??? "A"??? ???? ?? ?? ? ??? ????.

??

???? SVG ??? ???????. ?? ???? ?? ????? ?? ????. ???? ?????? ?? → ???? → ???? → SVG ? ? ? ????.

SVG ?? ??? ?? ? ???? ??? ?? ???? ?????.

?? ?? ?? SVG? ??? ???? ???? ?? ????. ??? ???? ???? ??? ???? ? ??? ?????. ?? ??? ?? ?? ????. ?? ???, ?? ????? ??? ?? ?? ?? ????.

??? SVG? ?? ?? ?, ??? ?? ??? ? ??? ??? ?? ???? ? ? ?? ?? ????.

1. ??? ???? ??? ??????.
2. ? ?? ? ??? ???? ??? ? ? ????.
3. SVG? ?? ????? ??? ?? ????.

SVG ??? ???? ?????

?? ?? ?? SVG? ??? ???? ???? ?? ????. ??? ???? ???? ??? ???? ? ??? ?????. ?? ??? ?? ?? ????. ?? ???, ?? ????? ??? ?? ? ?? ????? ?? ????.

? ????? ? :

1. ?? ?? ??? ???
3. ?? ?? ?? ? ???? ???? IDS? ?? ?? ()??? ? ????. ? ?? ???? #???-?? (??)? #??? ??? (???)? ? ?? ??? ????. ???? ??? ????. ??? ????? ?? ????. ??? ??? ??? ????.
4. ??? ?? ??? ????? ????. ???? ???? ?? ??? ??????.
5. ? ?? ??? ? ??. ??? ???? ?????? ??? ???? ID? ??????.

?? ??:

 <mask>
 
???></mask>

?? ?? ?? ( #??? -LAB? ID? ?? ?) ???? ???? ???? ? ?? ?? ??? ??????.

 <g>
 <path mask="url (#mask-marketing-m)" d="m427,360, ..."></path>
</g>

?? ?? ??? ???? ??? ?? ??? ??? ????.

 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 381 81">
 <title> ??? ??? </title>
 <defs>
  <g>
   <mask>
    
   ???>
  </mask></g>
 </defs>
 <g>
  
 </g>
</svg>

?????, ??? ??? ???? ????? ??? ??? ???? ???? .mask ??? ?? CSS? ?????.

 .??? {
 ??? : ??;
 ??? : #fff;
}

??

??? CSS ????-??? ??? ??????? ?? ?? ?? ??? ?? ????. CSS ? Javasscript ?? Greensock (GSAP)?? ?????? ?? ? ? ????. ??? ? ?? ???? ?? ??? ????.

CSS ? JavaScript

CSS????? ??? ???? ?? ?? ?????. JavaScript? ???? ?? ??? ?? ? ?? ?? ? ?? ???? ????? ? ? ????. JavaScript? ?? ???? ???? ?? ??? ? ?, ?? ?? CSS? ? ? ??? ? ????.

 / * ????-?? ??? ????-?? ???? ?? */
.??? {
 ???-?? : 1000;
 ????-?? ??? : 1000;
}
?
/ * ????? ????-?? ???? ?? ?? */
@keyframes strokeoffset {
 ?? {
  ????-?? ??? : 0;
 }
}
?
/ * ? ???? ?????? ?? */
#Mask-M {
 ????? : StrokeOffset 1s ?? ??;
}

JavaScript? ?? ?? ??? ??? ??? ??? ? ? ????.

 // ???? ??? ????
const masks = [ 'm', 'a', 'r', 'k-1', 'k-2', 'e', ??'t-line-v', 't-line-h', 'i-2', 'i-dot', 'n', 'g', 'lab-l', 'lab-a', 'lab-b']
?
masks.foreach ((???, ???, el) => {
 const id =`#mask- $ {mask}`// prepend #???- ? ??? ?? ??? ???-
 let path = document.queryselector (id)
 const length = path.getToTallength () // ??? ?? ??
 path.style.strokedasharray = ??; // ????? ??? ????-???? ?????
 path.style.strokedAshoffset = ??; // ????? ??? ????? ?????
})

GSAP

GSAP?? DrawSVG ??????? svg , , , , , ?? ? ????? ????? ????? ?? ? ????. ?? ????? CSS ????-?? ?? ?? ? ????-??? ??? ???? ????.

?? ??? ??? ????.

1. ??? GSAP ? DrawSVG ????? ??????.
2. Autoalpha? ???? ??? ???? ?????.
3. ?? ??? ????.
4. ???? Autoalpha? true? ??????.
5. ?? ?? ?? ??? ID? ??? ??? ?? ??? ??????.
6. DrawSVG? ???? ?? ??? ?????????.

??

1. Jake Archibald? SVG? ????? ??? ??
2. Cassie Evans? ?? ????? ???

? ??? ???? SVG ????? ?? ?????? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!