svg

▼svg
▷좌표점을 이용해 모양 만들기 
-일러스트로 도형을 만든 후 svg로 저장 클릭 - svg code 얻기 - 필요한 정보 빼고 지우기 (viewBox)

 ㄴex)
<svg viewBox="0 0 595.28 841.89" style="enable-background:new 0 0595.28841.89;"xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#231F20;stroke-linecap:round;stroke-linejoin:round;}
</style>
<path class="st0" d="M334.49,355.77c0-10.27-5.12-19.32-12.9-24.84c3.93-5.14,6.36-11.49,6.36-18.45c0-13.74-9.15-25.23-21.65-29.04
c1.61-3.05,2.75-6.37,2.75-10.06c0-10.2-7.13-18.38-16.57-20.8c3.09-5.13,4.98-11.07,4.98-17.49c0-14.25-8.8-26.43-21.25-31.47
c1.46-3.62,2.35-7.65,2.35-11.97c0-14.91-9.8-27.02-21.89-27.02c-12.08,0-21.88,12.11-21.88,27.02c0,3.98,0.74,7.73,2,11.13
c-7.96,3.28-13.57,11.07-13.57,20.2c0,1.95,0.63,3.71,1.12,5.51c-11.66,4.29-20.02,15.39-20.02,28.52c0,4.55,1.07,8.83,2.85,12.71
c-15.44,8.09-26.12,24.1-26.12,42.74c0,12.22,4.68,23.26,12.17,31.79c-8.28,3.35-14.06,11.41-13.75,20.86
c0.4,11.82,10.15,21.01,21.9,21.01c0,0.04-0.03,0.09-0.03,0.13c0,12.08,9.8,21.88,21.88,21.88c7.6,0,13.96-4.11,17.89-10
c1.35,0.35,2.71,0.67,4.09,0.95v65.53h23.57V399c0.32-0.07,0.64-0.13,0.96-0.2c3.98,5.52,10.14,9.34,17.45,9.34
c12.08,0,21.88-9.8,21.88-21.88c0-0.17-0.09-0.32-0.1-0.5C323.43,383.39,334.49,370.91,334.49,355.77z"/>
</svg>

붙여넣기 ▽

ㄴex)

.tree{width:400px;}
.tree .st0{fill:none;stroke:#231F20;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900; animation:tree 5s infinite;}
@keyframes tree{
             0%{}
100%{stroke-dashoffset:0;}
}


<div class="tree">
         <svg viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
             <path class="st0" d="M334.49,355.77c0-10.27-5.12-19.32-12.9-24.84c3.93-5.14,6.36-11.49,6.36-18.45c0-13.74-9.15-25.23-21.65-29.04
c1.61-3.05,2.75-6.37,2.75-10.06c0-10.2-7.13-18.38-16.57-20.8c3.09-5.13,4.98-11.07,4.98-17.49c0-14.25-8.8-26.43-21.25-31.47
c1.46-3.62,2.35-7.65,2.35-11.97c0-14.91-9.8-27.02-21.89-27.02c-12.08,0-21.88,12.11-21.88,27.02c0,3.98,0.74,7.73,2,11.13
c-7.96,3.28-13.57,11.07-13.57,20.2c0,1.95,0.63,3.71,1.12,5.51c-11.66,4.29-20.02,15.39-20.02,28.52c0,4.55,1.07,8.83,2.85,12.71
c-15.44,8.09-26.12,24.1-26.12,42.74c0,12.22,4.68,23.26,12.17,31.79c-8.28,3.35-14.06,11.41-13.75,20.86
c0.4,11.82,10.15,21.01,21.9,21.01c0,0.04-0.03,0.09-0.03,0.13c0,12.08,9.8,21.88,21.88,21.88c7.6,0,13.96-4.11,17.89-10
c1.35,0.35,2.71,0.67,4.09,0.95v65.53h23.57V399c0.32-0.07,0.64-0.13,0.96-0.2c3.98,5.52,10.14,9.34,17.45,9.34
c12.08,0,21.88-9.8,21.88-21.88c0-0.17-0.09-0.32-0.1-0.5C323.43,383.39,334.49,370.91,334.49,355.77z"/>
</svg>
</div>