svg animation - svg로 선 그어지는 효과

완성

 

소스코드

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="icons" x="0px" y="0px" viewBox="0 0 150 149.6" style="enable-background:new 0 0 150 149.6;" xml:space="preserve" width="150px" height="150px">
    <g>
      <path class="st7" d="M19.6,111.9C72.2,140.4,145,106,145,6.3c-24.6,17.5-64,7.2-98,17.3C12.3,33.8-8,75.5,19.6,111.9z"></path>
    </g>
    <g>
      <path class="st8" d="M6.7,144.6c18.8-80.7,109.9-109,109.9-109"></path>
    </g>
</svg>
    
<style>
    @keyframes ani {
        from {stroke-dashoffset : -620px;}
        to {stroke-dashoffset : 0px;}
    }
    .st7{
      fill:none;stroke:#dd9;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;
      *animation: ani 2s linear .0s forwards;
      stroke-dasharray: 8; stroke-dashoffset: -2;
      }
    .st8{
      fill:none;stroke:#000;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:2;
      animation: ani 2s linear .0s forwards;
      stroke-dasharray: 620; stroke-dashoffset: -620;
    }

  </style>

 

알아야하는 css 속성

• stroke-dasharray
• stroke-dashoffset
• animation