??? ? WordPress ???? ?????

WordPress? ?? 5.0?? ?? ??? (?? Gutenberg)? ?????, WordPress ??? ??????? ? ? ??? ??? ?? ??? ??? ???? ??? ?????.

???? ??? ???? ????? "????"??? ?? ? ? ???? ?????. ??? ??? ??? ?? ????? ????? ?? ??????? ??? ???? ?? ??? ?? ? ???? ??? SVG? WordPress ??? ????? ?? ? ? ????. 2014 ? Chris? stroke-dasharray ? stroke-dashoffset ??? ???? ??? ??? ??? ? ??? ?? ???? ??? ??? ?? ?? ??? ????.

Chris? ?? ????? ?? ? ????.

[Codepen Link] (Codepen? Chris Coyier (@chriscoyier)? ? Bgyoz ??).

? ?, WordPress ???? ??? ??? ????? ???? ?? CSS ??? ?? ? ???? ?????? ???? ? ??? ???? ??? ?? ? ????.

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

WordPress ??? ??? ?? ?? ?? ? ?? SVG ??? ????? ????. ??? ??? ??? ???? ??? ??? ? ??? ??? ?????. ??? HTML? ?? ? SVG???. ?? SVG ??? ?? ? ??? "???? ??"???? ????.

<svg aria-hidden="true" focusable="false" role="img" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36" fill="none"></path><path d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z" fill="none"></path></svg><p> ???? ?? ...</p>

? ?? ??? ? ?? ??? ?? ????? ????, ? ?? ??? WordPress ??? ?????. ? ??? ???? ???? ?? ????. ?? ???? ??? ??? ?? ?? ???? ??? ??? ???? ??? ???? ???? ??? ??????. ? ?? CSS? ?? ??? ? ??? ????? ?? ???? ???? ??? ??? ? ???? (? path:nth-child(2) ).

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

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

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

 svg {
  ??? : #555;
  ??? ?? : 0.5;
  ?? : 250px;
}

??? ???? ? ??? ??? ?????. stroke-width ??? ??? ??? ?? ?????? ?? ?? ? ?? ?? ? ??? ????. ?? ??? ??? ?? ??? ??? ??? ????.

??? ??? ??? ??????, ??? ??? stroke-dasharray ? stroke-dashoffset ??? ??? ???? ??? ?????. ??? ?? ?? SVG ???? ? ?? ??? ??? ?????. ?? ?? ??? ??? ?? ????.

?? ??? ??? ?? ?? ????? ? ? ???? stroke-dasharray ? stroke-dashoffset ???? ??? ? ????.

 SVG ?? {
  ???-?? : 300;
  ????-?? ??? : 300;
}

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

???? Chris? ??? ???? ????

??? ? ???? ???? CSS ????????. ?? stroke-dashoffset ?? ????, ????? ??? ??? ??? ?????? 100%? ?? ? ? ??? ?? ? 300 ??? ?????. ??, ??? ???? 300?? ???? ???? ??? ? ??? ??? SVG ???? ???? ?? ???? ?????.

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

 @keyframes draw {
  0% {
    ????-?? ??? : 0;
  }
}

???? ??? ??????? ??????. 100%? ?? ??? ??? ?????? 0%?? ?? ? ? ????.

?! ?? ?????? ??? ???????.

 SVG ?? {
  ????? : 2S? ???? ??????.
  ???-?? : 300;
  ????-?? ??? : 300;
}

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

?? ?? ?? ?????!

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

? ??? WordPress?? ?????? ?????? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!