SVG

스케일러블 벡터 그래픽스(Scalable Vector Graphic, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식

Sample 1 : Rect

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="0" fill="#f48fb1" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="10" fill="#f48fb1" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="20" fill="#f48fb1" />
        </svg>
    </div>
</div>

Sample 2 : Rect : border-radius

<div class="block1">
    <svg width="200" height="200" style="background:#ffebee">
        <rect x="30" y="30" rx="5" ry="5" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fv1"/>
   </svg>
</div>
<div class="block1">
   <svg width="200" height="200" style="background:#ffebee">
        <rect x="30" y="30" rx="20" ry="20" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fv1"/>
   </svg>
</div>
<div class="block1">
   <svg width="200" height="200" style="background:#ffebee">
        <rect x="30" y="30" rx="30" ry="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fv1"/>
   </svg>
</div>
<div class="block1">
   <svg width="200" height="200" style="background:#ffebee">
        <rect x="30" y="30" rx="40" ry="40" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fv1"/>
   </svg>
</div>

Sample 3: circle

<div class="block1">
   <svg width="200" height="200" style="background:#e3f3fd">
      <circle cx="100" cy="100" r="80" stroke="#0d47a1" stroke-width="0" fill="#bbdefb"/>                       
   </svg>
</div>
 <div class="block1">
   <svg width="200" height="200" style="background:#e3f3fd">
      <circle cx="100" cy="100" r="80" stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>                       
   </svg>
</div>
 <div class="block1">
   <svg width="200" height="200" style="background:#e3f3fd">
      <circle cx="100" cy="100" r="80" stroke="#0d47a1" stroke-width="10" fill="#bbdefb"/>                       
   </svg>
</div>
   <div class="block1">
   <svg width="200" height="200" style="background:#e3f3fd">
      <circle cx="100" cy="100" r="80" stroke="#0d47a1" stroke-width="20" fill="#bbdefb"/>                       
   </svg>
</div> 

Sample 4: ellipse

<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
        <ellipse cx="100" cy="100" rx="90" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
        <ellipse cx="100" cy="100" rx="90" ry="70"stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
        <ellipse cx="100" cy="100" rx="90" ry="50" stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
        <ellipse cx="100" cy="100" rx="90" ry="30" stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
        <ellipse cx="100" cy="100" rx="30" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
        <ellipse cx="100" cy="100" rx="50" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
        <ellipse cx="100" cy="100" rx="70" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd">
        <ellipse cx="100" cy="100" rx="90" ry="90" stroke="#0d47a1" stroke-width="5" fill="#bbdefb"/>
    </svg>
</div>

Sample 5 : polygon

 <div class="well clearfix">
<div class="block1">
   <svg width="200" height="200" style="background:#fff3e0">
       <polygon points="166,181 15,117 145,18" stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
   </svg>
</div>
<div class="block1">
   <svg width="200" height="200" style="background:#fff3e0">
       <polygon points="42,184 7,76 99,9 191,76 156,184  " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
   </svg>
</div>
<div class="block1">
   <svg width="200" height="200" style="background:#fff3e0">
        <polygon points="53,181 5,99 53,17 147,17 194,99 147,181 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
   </svg>
</div>
<div class="block1">
   <svg width="200" height="200" style="background:#fff3e0">
       <polygon points="3,93 37,27 108,4 174,37	197,107 164,174 93,197 26,163 " stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
   </svg>
</div>
<div class="block1">
   <svg width="200" height="200" style="background:#fff3e0">
       <polygon points="100,17 120,80 186,80 133,119 153,182 100,143 46,182 66,119 13,80 79,80" 
       stroke="#e65100" stroke-width="5" fill="#ffe0b2" />
   </svg>
</div>
     <div class="block1">
   <svg width="200" height="200" style="background:#fff3e0">
       <polygon points="101,18 117,65 162,43 141,88	188,105 141,122 162,167 117,146 101,193 84,146 39,167 60,122 13,105 60,88 39,43 84,65" stroke="#e65100" stroke-width="3" fill="#ffe0b2" />
   </svg>
</div>
     <div class="block1">
   <svg width="200" height="200" style="background:#fff3e0">
       <polygon points="102,12 111,57 137,19 127,64	167,41 139,78 185,72 145,95 189,109 143,113 177,143 134,129	153,170 119,140 120,185 102,143 83,185 84,140 50,170 69,129 26,143	60,113 14,109 58,95 18,72 64,78 36,41 76,64 66,19 92,57" stroke="#e65100" stroke-width="3" fill="#ffe0b2" />
   </svg>
</div>
     <div class="block1">
   <svg width="200" height="200" style="background:#fff3e0">
       <polygon points="102,13 107,57 123,16 118,60	144,24 127,65 161,37 135,73 175,54 141,82 185,73 145,92 189,95 145,103 188,117 143,114 181,138 138,124 169,156 131,132 153.49,171.87 123.101,139.382 134.248,182.448 112.893,143.424 112.979,187.909 102,144.8 91.021,187.909 91.107,143.424 
69.752,182.448 80.899,139.382 50.51,171.87 72.017,132.929 34.503,156.838 65.019,124.469 22.737,138.298 60.344,114.535 
15.951,117.415 58.286,103.75 14.573,95.5 58.976,92.793 18.688,73.93 62.368,82.351 28.037,54.062 68.252,73.081 42.033,37.142 
76.255,65.565 59.799,24.235 85.876,60.276 80.215,16.152 96.511,57.545" stroke="#e65100" stroke-width="3" fill="#ffe0b2" />
   </svg>
</div>

Sample6 : line

<div class="block1">
  <svg width="200" height="200" style="background:#e3f2fd">
      <line x1="0" y1="0" x2="200" y2="200" stroke="#0d47a1"stroke-width="2" fill="none"/>
  </svg>
</div>
<div class="block1">
  <svg width="200" height="200" style="background:#e3f2fd">
      <line  x1="50" y1="50" x2="200" y2="200" stroke="#0d47a1"stroke-width="2" fill="none"/>
  </svg>
</div>
<div class="block1">
  <svg width="200" height="200" style="background:#e3f2fd">
      <line x1="100" y1="100" x2="200" y2="200" stroke="#0d47a1"stroke-width="2" fill="none"/>
  </svg>
</div>
<div class="block1">
  <svg width="200" height="200" style="background:#e3f2fd">
      <line x1="150" y1="150" x2="200" y2="200" stroke="#0d47a1"stroke-width="2" fill="none"/>
  </svg>
</div>
<div class="block1">
  <svg width="200" height="200" style="background:#e3f2fd">
      <line x1="100" y1="100" x2="200" y2="200" stroke="#0d47a1"stroke-width="2" fill="none"/>
      <line x1="200" y1="100" x2="100" y2="200" stroke="#0d47a1"stroke-width="2" fill="none"/>
  </svg>
</div>
<div class="block1">
  <svg width="200" height="200" style="background:#e3f2fd">
      <line x1="200" y1="0" x2="0" y2="200" stroke="#0d47a1"stroke-width="2" fill="none"/>
      <line x1="200" y1="200" x2="0" y2="0" stroke="#0d47a1"stroke-width="2" fill="none"/>
  </svg>
</div>
<div class="block1">
  <svg width="200" height="200" style="background:#e3f2fd">
      <line x1="200" y1="50" x2="50" y2="200"stroke="#0d47a1"stroke-width="2" fill="none"/>
  </svg>
</div>
<div class="block1">
  <svg width="200" height="200" style="background:#e3f2fd">
      <line x1="200" y1="0" x2="0" y2="200" stroke="#0d47a1"stroke-width="2" fill="none"/>
  </svg>
</div>

Sample7 : polyline

<div class="well clearfix">
  <div class="block1">
      <svg width="200" height="200" style="background:lightpink">
          <polyline points="109.781,95.053 76.5,61.105 76.5,4.855 31.5,49.543 "stroke="#0d47a1" stroke-width="2" fill="none"/>
      </svg>
  </div>
  <div class="block1">
      <svg width="200" height="200" style="background:lightpink">
          <polyline points="109.781,95.053 76.5,61.105 76.5,4.855 31.5,49.543 
31.5,162.355  "stroke="#0d47a1" stroke-width="2" fill="none"/>
      </svg>
  </div>
  <div class="block1">
      <svg width="200" height="200" style="background:lightpink">
          <polyline points="109.781,95.053 76.5,61.105 76.5,4.855 31.5,49.543 
31.5,162.355 76.5,184.855  "stroke="#0d47a1" stroke-width="2" fill="none"/>
      </svg>
  </div>
  <div class="block1">
      <svg width="200" height="200" style="background:lightpink">
          <polyline points="109.781,95.053 76.5,61.105 76.5,4.855 31.5,49.543 
31.5,162.355 76.5,184.855 76.5,129 "stroke="#0d47a1" stroke-width="2" fill="none"/>
      </svg>
  </div>
</div>

Sample8 : path

                  <h2>Sample7 : path</h2>
                <div class="well clearfix">
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path d="M27,18c0,89.543,72.457,162,162,162" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path d="M178,154c-39.765,34.794-100.206,30.765-135-9
	c-27.835-31.812-24.612-80.165,7.2-108c25.449-22.268,64.132-19.689,86.399,5.76c17.814,20.36,15.752,51.306-4.607,69.12
	c-16.287,14.252-41.044,12.601-55.296-3.687c-11.401-13.03-10.081-32.835,2.949-44.236c10.424-9.121,26.269-8.065,35.39,2.359
	c7.297,8.339,6.451,21.015-1.889,28.312c-6.671,5.838-16.811,5.162-22.648-1.51c-4.67-5.337-4.129-13.449,1.208-18.119" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path d="M98,50.99c0-79.98,25.446-8.424,10.144,28.522
		c15.303-36.946,83.895-69.551,27.34-12.996c56.555-56.555,23.949,12.037-12.996,27.34C159.433,78.553,230.99,104,151.01,104
		c79.98,0,8.423,25.446-28.522,10.144c36.945,15.303,69.551,83.895,12.996,27.34c56.555,56.555-12.037,23.949-27.34-12.996
		C123.446,165.433,98,236.99,98,157.01c0,79.98-25.447,8.423-10.143-28.522c-15.304,36.945-83.895,69.551-27.34,12.996
		c-56.555,56.555-23.95-12.037,12.996-27.34C36.566,129.446-34.99,104,44.99,104c-79.98,0-8.424-25.447,28.522-10.143
		C36.566,78.553,3.962,9.962,60.517,66.517C3.962,9.962,72.553,42.566,87.857,79.513C72.553,42.566,98-28.99,98,50.99z" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path d="M149.187,170.26c-53.688-75.162-49.196-76.202-64.381,14.907
		c15.186-91.109,19.097-88.669-56.064-34.981c75.162-53.688,76.202-49.196-14.909-64.38c91.11,15.185,88.67,19.096,34.983-56.065
		c53.687,75.161,49.195,76.201,64.38-14.908c-15.186,91.109-19.097,88.669,56.063,34.982c-75.16,53.687-76.201,49.195,14.909,64.382
		C93.058,99.009,95.499,95.098,149.187,170.26z" stroke="white"  stroke-width="2" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path d="M163.762,144.914c-2.875,2.396-16.264-10.116-19.377-8.255
		c-3.196,1.911,1.461,19.622-1.922,20.977c-3.443,1.379-12.3-14.663-15.867-13.854c-3.605,0.816-4.678,19.101-8.339,19.341
		c-3.679,0.242-7.144-17.749-10.807-18.082s-10.314,16.738-13.889,15.837c-3.558-0.896-1.315-19.075-4.714-20.528
		c-3.363-1.438-14.966,12.744-18.104,10.768c-3.083-1.942,4.691-18.522,1.892-20.979c-2.727-2.393-18.153,7.499-20.549,4.624
		c-1.917-2.3,11.021-15.087,9.531-17.578c-1.529-2.557-18.914,2.762-19.997,0.055c-1.103-2.754,15.157-10.904,14.511-13.759
		c-0.653-2.884-18.833-3.228-19.025-6.157c-0.193-2.943,17.788-5.669,18.054-8.6c0.266-2.93-16.929-8.854-16.208-11.714
		c0.717-2.846,18.661,0.095,19.824-2.624c1.15-2.69-13.374-13.64-11.792-16.15c1.554-2.467,17.695,5.899,19.66,3.66
		c1.914-2.182-8.505-17.092-6.205-19.009c1.84-1.533,14.146,11.744,16.138,10.553c2.046-1.223-3.801-18.347-1.636-19.214
		c2.204-0.882,9.79,15.553,12.073,15.036c2.308-0.522,2.066-18.618,4.41-18.772c2.354-0.154,4.491,17.819,6.835,18.032
		c2.344,0.213,7.688-17.081,9.975-16.504c2.277,0.574-1.223,18.33,0.953,19.26c2.152,0.92,12.577-13.877,14.586-12.612
		c1.973,1.243-6.867,17.031-5.076,18.603c1.745,1.531,16.245-9.309,17.778-7.469c1.227,1.472-12.323,13.393-11.37,14.987
		c0.979,1.636,17.894-4.635,18.587-2.903c0.706,1.763-15.868,8.901-15.454,10.728c0.418,1.846,18.445,1.136,18.568,3.011
		c0.124,1.883-17.844,3.548-18.015,5.424c-0.17,1.875,17.202,6.752,16.741,8.583c-0.46,1.821-18.063-2.128-18.808-0.388
		c-0.736,1.722,14.278,11.731,13.267,13.337c-0.995,1.579-16.5-7.64-17.758-6.207c-1.225,1.396,9.952,15.565,8.48,16.792
		c-1.178,0.981-12.789-12.787-14.064-12.024c-1.31,0.782,5.298,17.532,3.912,18.087c-1.41,0.564-8.184-16.122-9.646-15.792
		c-1.477,0.335-0.396,18.31-1.896,18.408c-1.507,0.099-2.793-17.864-4.294-18.001c-1.5-0.136-6.003,17.301-7.467,16.932
		c-1.458-0.367,2.847-17.854,1.455-18.448c-1.378-0.589-11.05,14.602-12.335,13.792c-1.263-0.796,8.258-16.077,7.112-17.083
		c-1.117-0.979-15.021,10.469-16.002,9.291c-0.785-0.942,13.157-12.308,12.546-13.328c-0.626-1.048-17.241,5.832-17.685,4.723
		c-0.452-1.128,16.324-7.615,16.06-8.784c-0.268-1.182-18.198,0.2-18.277-1c-0.079-1.205,17.88-2.19,17.989-3.39
		c0.109-1.2-17.378-5.408-17.083-6.579c0.294-1.166,17.682,3.427,18.158,2.313c0.471-1.102-14.86-10.506-14.212-11.535
		c0.636-1.01,15.738,8.753,16.542,7.836c0.784-0.894-10.879-14.588-9.938-15.373c0.753-0.628,11.922,13.453,12.738,12.965
		c0.838-0.501-6.257-17.009-5.37-17.364c0.902-0.361,7.159,16.486,8.094,16.274c0.945-0.214-0.677-18.11,0.283-18.173
		c0.964-0.063,1.708,17.893,2.668,17.98c0.96,0.087,4.927-17.441,5.864-17.205c0.933,0.235-3.889,17.546-2.998,17.927
		c0.882,0.377,10.071-15.067,10.894-14.549c0.809,0.509-9.147,15.467-8.414,16.111c0.715,0.627,14.24-11.209,14.868-10.456
		c0.503,0.603-13.688,11.619-13.297,12.272c0.401,0.67,16.821-6.604,17.105-5.894c0.289,0.722-16.615,6.795-16.445,7.543
		c0.171,0.756,18.039-1.06,18.09-0.292c0.051,0.771-17.902,1.322-17.973,2.09c-0.069,0.768,17.491,4.544,17.302,5.294
		c-0.188,0.746-17.438-4.259-17.742-3.546c-0.302,0.705,15.231,9.724,14.817,10.382c-0.407,0.646-15.251-9.463-15.766-8.876
		c-0.502,0.572,11.473,13.961,10.87,14.464" stroke="white"  stroke-width="2" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path d="M162.771,162.841c-69.414-66.75-69.414-66.75-56.957-18.392
		c-12.457-48.358-12.457-48.358-47.441,36.493c34.984-84.851,34.984-84.851-0.109-59.853C93.357,96.091,93.357,96.091,8.898,87.247
		c84.459,8.844,84.459,8.844,56.89-18.599c27.57,27.443,27.57,27.443,16.93-57.408c10.639,84.851,10.639,84.851,35.268,48.358
		c-24.629,36.493-24.629,36.493,59.83-1.638c-84.459,38.131-84.459,38.131-35.093,48.486
		C93.357,96.091,93.357,96.091,162.771,162.841z" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path d="M43.111,22.734c1.882,2.159-8.673,11.357-6.791,13.517
		c1.882,2.159,12.436-7.039,14.318-4.88c1.882,2.16-8.672,11.358-6.789,13.518c1.884,2.162,12.438-7.036,14.322-4.875
		c1.883,2.16-8.672,11.358-6.789,13.518c1.882,2.16,12.437-7.038,14.319-4.879c1.883,2.161-8.671,11.359-6.788,13.519
		c1.884,2.161,12.438-7.037,14.322-4.875c1.883,2.16-8.672,11.358-6.789,13.519c1.883,2.161,12.437-7.037,14.321-4.877
		c1.884,2.162-8.671,11.36-6.787,13.521c1.883,2.161,12.437-7.037,14.32-4.877c1.884,2.162-8.671,11.36-6.787,13.521
		c1.883,2.161,12.438-7.037,14.321-4.876c1.884,2.161-8.671,11.36-6.787,13.521c1.884,2.161,12.438-7.037,14.322-4.875
		c1.884,2.162-8.67,11.36-6.786,13.522c1.884,2.161,12.438-7.037,14.322-4.875c1.884,2.162-8.67,11.36-6.786,13.522
		c1.884,2.162,12.439-7.036,14.323-4.873c1.883,2.161-8.671,11.359-6.787,13.521c1.882,2.16,12.437-7.038,14.319-4.878
		c1.884,2.162-8.67,11.36-6.786,13.522c1.883,2.161,12.437-7.037,14.321-4.877c1.884,2.162-8.67,11.36-6.786,13.522
		c1.885,2.163,12.439-7.035,14.324-4.873s-8.67,11.361-6.785,13.524c1.885,2.163,12.439-7.035,14.324-4.873
		c1.884,2.162-8.67,11.36-6.786,13.522c1.885,2.162,12.439-7.036,14.324-4.873c1.886,2.164-8.668,11.362-6.782,13.527
		c1.887,2.166,12.442-7.032,14.329-4.866c1.887,2.166-8.667,11.364-6.779,13.53" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path d="M27,18c0,89.543,72.457,162,162,162" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                </div>

Sample9 : stroke-linecap / stroke-dasharray

<div class="block1">
<svg width="200" height="200" style="background:#fff3e0">
<path stroke="#e65100" stroke-width="1" fill="none" d="M30 30 l140 00" />
<path stroke="#e65100" stroke-width="2" fill="none" d="M30 50 l140 00" />
<path stroke="#e65100" stroke-width="3" fill="none" d="M30 70 l140 00" />
<path stroke="#e65100" stroke-width="4" fill="none" d="M30 90 l140 00" />
<path stroke="#e65100" stroke-width="5" fill="none" d="M30 110 l140 00" />
<path stroke="#e65100" stroke-width="6" fill="none" d="M30 130 l140 00" />
<path stroke="#e65100" stroke-width="7" fill="none" d="M30 150 l140 00" />
<path stroke="#e65100" stroke-width="8" fill="none" d="M30 170 l140 00" />
</svg>
</div>
<div class="block1">
<svg width="200" height="200" style="background:#fff3e0">
<path stroke="#e65100" stroke-linecap="round" stroke-width="1" fill="none" d="M30 30 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="2" fill="none" d="M30 50 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="3" fill="none" d="M30 70 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="4" fill="none" d="M30 90 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="5" fill="none" d="M30 110 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="6" fill="none" d="M30 130 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="7" fill="none" d="M30 150 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="8" fill="none" d="M30 170 l140 00" />
</svg>                        
</div>
<div class="block1">
<svg width="200" height="200" style="background:#fff3e0">
<path stroke="#e65100" stroke-linecap="butt" stroke-width="1" fill="none" d="M30 30 l140 00" />
<path stroke="#e65100" stroke-linecap="square" stroke-width="2" fill="none" d="M30 50 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="3" fill="none" d="M30 70 l140 00" />
<path stroke="#e65100" stroke-linecap="butt" stroke-width="4" fill="none" d="M30 90 l140 00" />
<path stroke="#e65100" stroke-linecap="square" stroke-width="5" fill="none" d="M30 110 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-width="6" fill="none" d="M30 130 l140 00" />
<path stroke="#e65100" stroke-linecap="butt" stroke-width="7" fill="none" d="M30 150 l140 00" />
<path stroke="#e65100" stroke-linecap="square" stroke-width="8" fill="none" d="M30 170 l140 00" />
</svg>                        
</div>
<div class="block1">
<svg width="200" height="200" style="background:#fff3e0">
<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="1" fill="none" d="M30 30 l140 00" />
<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="2" fill="none" d="M30 50 l140 00" />
<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="3" fill="none" d="M30 70 l140 00" />
<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="4" fill="none" d="M30 90 l140 00" />
<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="5" fill="none" d="M30 110 l140 00" />
<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="6" fill="none" d="M30 130 l140 00" />
<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="7" fill="none" d="M30 150 l140 00" />
<path stroke="#e65100" stroke-dasharray="5,5" stroke-width="8" fill="none" d="M30 170 l140 00" />
</svg>                        
</div>
<div class="block1">
<svg width="200" height="200" style="background:#fff3e0">
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15"  stroke-width="1" fill="none" d="M30 30 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15"  stroke-width="2" fill="none" d="M30 50 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="3" fill="none" d="M30 70 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="4" fill="none" d="M30 90 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="5" fill="none" d="M30 110 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="6" fill="none" d="M30 130 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="0,15" stroke-width="7" fill="none" d="M30 150 l140 00" />
<path stroke="#e65100"stroke-linecap="round" stroke-dasharray="0,15" stroke-width="8" fill="none" d="M30 170 l140 00" />
</svg>                        
</div>
<div class="block1">
<svg width="200" height="200" style="background:#fff3e0">
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,15"  stroke-width="1" fill="none" d="M30 30 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,15"  stroke-width="2" fill="none" d="M30 50 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,15" stroke-width="3" fill="none" d="M30 70 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,15" stroke-width="4" fill="none" d="M30 90 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,15" stroke-width="5" fill="none" d="M30 110 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,15" stroke-width="6" fill="none" d="M30 130 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,15" stroke-width="7" fill="none" d="M30 150 l140 00" />
<path stroke="#e65100"stroke-linecap="round" stroke-dasharray="10,15" stroke-width="8" fill="none" d="M30 170 l140 00" />
</svg>                        
</div>
<div class="block1">
<svg width="200" height="200" style="background:#fff3e0">
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10"  stroke-width="1" fill="none" d="M30 30 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,20,5,1,10,5"  stroke-width="2" fill="none" d="M30 50 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="30,30,3,3,10,5" stroke-width="3" fill="none" d="M30 70 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" stroke-width="4" fill="none" d="M30 90 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,20,5,1,10,5" stroke-width="5" fill="none" d="M30 110 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" stroke-width="6" fill="none" d="M30 130 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,20,5,1,10,5" stroke-width="7" fill="none" d="M30 150 l140 00" />
<path stroke="#e65100"stroke-linecap="round" stroke-dasharray="0,10,1,5,5,10" stroke-width="8" fill="none" d="M30 170 l140 00" />
</svg>                        
</div>
<div class="block1">
<svg width="200" height="200" style="background:#fff3e0">
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,20"  stroke-width="1" fill="none" d="M30 30 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,20,10"  stroke-width="2" fill="none" d="M30 50 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,20" stroke-width="3" fill="none" d="M30 70 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,20,10" stroke-width="4" fill="none" d="M30 90 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,20" stroke-width="5" fill="none" d="M30 110 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="10,20,10" stroke-width="6" fill="none" d="M30 130 l140 00" />
<path stroke="#e65100" stroke-linecap="round" stroke-dasharray="20,10,20" stroke-width="7" fill="none" d="M30 150 l140 00" />
<path stroke="#e65100"stroke-linecap="round" stroke-dasharray="10,20,10" stroke-width="8" fill="none" d="M30 170 l140 00" />
</svg>                        
</div>

Sample 10 : linearGradient

<div class="block1">
    <svg width="200" height="200" style="background:#fff3e0">
        <linearGradient id="lienarGradient1" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#6C6CA7"/>
            <stop offset="1" style="stop-color:#E9D4C9"/>
        </linearGradient>
        <circle cx="100" cy="100" r="80" fill="url(#lienarGradient1)"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#fff3e0">
        <rect x="30" y="30" width="140" height="140" stroke-width="0" fill="url(#lienarGradient1)"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#fff3e0">
        <ellipse cx="100" cy="100" rx="80" ry="30" fill="url(#lienarGradient1)"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#fff3e0">
    <polygon points="101,18 117,65 162,43 141,88	188,105 141,122 162,167 117,146 101,193 84,146 39,167 60,122 13,105 60,88 39,43 84,65"  stroke-width="0 " fill="url(#lienarGradient1)" />
   </svg>
</div>

Sample 11 : radialGradient

<div class="block1">
    <svg width="200" height="200" style="background:#fff3e0">
        <radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
            <stop offset="0" style="stop-color:#6C6CA7"/>
            <stop offset="1" style="stop-color:#E9D4C9"/>
        </radialGradient>
        <circle cx="100" cy="100" r="80" fill="url(#radialGradient1)"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#fff3e0">
        <rect x="30" y="30" width="140" height="140" stroke-width="0" fill="url(#radialGradient1)"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#fff3e0">
        <ellipse cx="100" cy="100" rx="80" ry="30" fill="url(#radialGradient1)"/>
    </svg>
</div>
<div class="block1">
    <svg width="200" height="200" style="background:#fff3e0">
    <polygon points="101,18 117,65 162,43 141,88	188,105 141,122 162,167 117,146 101,193 84,146 39,167 60,122 13,105 60,88 39,43 84,65"  stroke-width="0 " fill="url(#radialGradient1)" />
   </svg>
</div>

Sample 12 : clip-path

                 <h2>Sample 11 : clip-path</h2>
               <div class="well clearfix">
                   <div class="block1">
                       <svg width="200" height="200" style="background:#fff3e0">
                               <image xlink:href="img1.jpg" width="200" height="200"  />
                           </svg>
                   </div>
                   <div class="block1">
                       <svg width="200" height="200">
                               <image xlink:href="img1.jpg" width="200" height="200" clip-path="circle(100px at center)" />
                           </svg>
                   </div>
                   <div class="block1">
                       <svg width="200" height="200">
                              <clipPath id="clip2">
                                  <polygon points="3,93 37,27 108,4 174,37	197,107 164,174 93,197 26,163 " />
                              </clipPath>
                               <image xlink:href="img1.jpg" width="200" height="200" clip-path="url(#clip2)" />
                           </svg>
                   </div>
                   <div class="block1">
                       <svg width="200" height="200">
                              <clipPath id="clip1">
                                  <polygon points="101,18 117,65 162,43 141,88	188,105 141,122 162,167 117,146 101,193 84,146 39,167 60,122 13,105 60,88 39,43 84,65"/>
                              </clipPath>
                               <image xlink:href="img1.jpg" width="200" height="200" clip-path="url(#clip1)" />
                           </svg>
                   </div>
               </div>
                
   

Sample13 : clip-path text

BYC
BYC
BYC
<div class="block1">
        <svg width="200" height="200" style="background:#fff3e0">
            <image xlink:href="img1.jpg" width="200" height="200"  />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200">
            <image xlink:href="img1.jpg" width="200" height="200" clip-path="circle(100px at center)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200">
           <clipPath id="clip2">
               <polygon points="3,93 37,27 108,4 174,37	197,107 164,174 93,197 26,163 " />
           </clipPath>
            <image xlink:href="img1.jpg" width="200" height="200" clip-path="url(#clip2)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200">
           <clipPath id="clip1">
               <polygon points="101,18 117,65 162,43 141,88	188,105 141,122 162,167 117,146 101,193 84,146 39,167 60,122 13,105 60,88 39,43 84,65"/>
           </clipPath>
            <image xlink:href="img1.jpg" width="200" height="200" clip-path="url(#clip1)" />
        </svg>
    </div>
</div>

<h2>Sample13 : clip-path text</h2>
<div class="well clearfix">
<div class="block1">
    <svg width="200" height="200" style="background:#e3f3fd; font-family: 'Bungee', cursive; font-weight: bold">
        <text x="22" y="125" font-size="75">BYC</text>                                                                                        
    </svg>
</div>
<div class="block1">
<svg width="200" height="200" style="background:#e3f3fd; font-family: 'Bungee', cursive; font-weight: bold">
    <a xlink:href="http://b-pencil.co.kr">
         <text x="22" y="125" font-size="75">BYC</text>           
    </a>                                                                                   
</svg>
</div>
<style>
    .textCilp {width: 200px; height: 200px; line-height: 200px; text-align: center;
        background: url(img1.jpg); background-size: contain;
        font-family: 'Bungee', cursive; font-weight: bold;
        font-size: 90px; font-family: 'Bungee', cursive; font-weight: bold;

      -webkit-text-fill-color : transparent;
        -webkit-background-clip: text;                     
   }
</style>
 <div class="block1">
    <div class="textCilp">
        BYC
    </div>                                                                                            
</div>
<div class="block1">
      <svg width="200" height="200" style="background:#e3f3fd; font-family: 'Bungee', cursive; font-weight: bold">
        <pattern id="pattern" patternUnits="userSpaceOnUse" width="200" height="200">
            <image xlink:href="img1.jpg" width="200" height="200" />
        </pattern>   
    <text x="18" y="120" font-size="80" fill="url(#pattern)" >BYC</text>                                                                        
    </svg>                                                                                       
</div>

Sample14 : blur

<h2>Sample14 : blur</h2>
<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background:#ffebee;">
                    <defs>
                      <filter id="filter1" x="0" y="0">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
                      </filter>
                    </defs>
                    <rect x="30" y="30" width="140" height="140" stroke="#880e4f"
                    stroke-width="0" fill="#f48fb1" filter="url(#filter1)" />
                  </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#ffebee;">
                    <defs>
                      <filter id="filter2" x="0" y="0">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
                      </filter>
                    </defs>
                    <rect x="30" y="30" width="140" height="140" stroke="#880e4f"
                    stroke-width="0" fill="#f48fb1" filter="url(#filter2)" />
                  </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#ffebee;">
                    <defs>
                      <filter id="filter3" x="0" y="0">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
                      </filter>
                    </defs>
                    <rect x="30" y="30" width="140" height="140" stroke="#880e4f"
                    stroke-width="0" fill="#f48fb1" filter="url(#filter3)" />
                  </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#ffebee;">
                    <defs>
                      <filter id="filter4" x="0" y="0">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
                      </filter>
                    </defs>
                    <rect x="30" y="30" width="140" height="140" stroke="#880e4f"
                    stroke-width="0" fill="#f48fb1" filter="url(#filter4)" />
                  </svg>
    </div>
</div>

Sample 15: animation

                   <style>
                    .rect1 {
                        animation: rect1 5s infinite linear;
                    }

                    .rect2 {
                        animation: rect2 5s infinite linear;
                        stroke-dasharray: 100;
                        stroke-dashoffset: 100;
                    }

                    .rect3 {
                        animation: rect3 5s infinite linear;
                        stroke-dasharray: 300;
                        stroke-dashoffset: 300;
                    }

                    .rect4 {
                        animation: rect4 5s infinite linear;
                        stroke-dasharray: 560;
                        stroke-dashoffset: 560;
                    }

                    @keyframes rect1 {
                        0% {
                            stroke: #880e4f
                        }
                        35% {
                            stroke: #3e2723
                        }
                        70% {
                            stroke: #1b5e20
                        }
                        100% {
                            stroke: #880e4f
                        }
                    }

                    @keyframes rect2 {
                        0% {
                            stroke: #880e4f;
                            stroke-dashoffset: 100;
                        }
                        35% {
                            stroke: #3e2723;
                        }
                        70% {
                            stroke: #1b5e20;
                        }
                        100% {
                            stroke: #880e4f;
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes rect3 {
                        0% {
                            stroke: #880e4f;
                            stroke-dashoffset: 300;
                        }
                        35% {
                            stroke: #3e2723;
                        }
                        70% {
                            stroke: #1b5e20;
                        }
                        100% {
                            stroke: #880e4f;
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes rect4 {
                        0% {
                            stroke: #880e4f;
                            stroke-dashoffset: 560;
                        }
                        35% {
                            stroke: #3e2723;
                        }
                        70% {
                            stroke: #1b5e20;
                        }
                        100% {
                            stroke: #880e4f;
                            stroke-dashoffset: 0;
                        }
                    }

                    .el2 {
                        animation: rect2 5s infinite linear;
                        stroke-dasharray: 100;
                        stroke-dashoffset: 100;
                    }

                    .el3 {
                        animation: rect3 5s infinite linear;
                        stroke-dasharray: 300;
                        stroke-dashoffset: 300;
                    }

                    .el4 {
                        animation: el4 5s infinite linear;
                        stroke-dasharray: 565;
                        stroke-dashoffset: 565;
                    }

                    @keyframes el4 {
                        0% {
                            stroke: #880e4f;
                            stroke-dashoffset: 565;
                        }
                        35% {
                            stroke: #3e2723;
                        }
                        70% {
                            stroke: #1b5e20;
                        }
                        100% {
                            stroke: #880e4f;
                            stroke-dashoffset: 0;
                        }
                    }

                    .line1 {
                        animation: line1 5s infinite linear;
                        stroke-dasharray: 256;
                        stroke-dashoffset: 256;
                    }

                    .line2 {
                        animation: line2 5s infinite linear;
                        stroke-dasharray: 670;
                        stroke-dashoffset: 670;
                    }

                    .line3 {
                        animation: line3 5s infinite linear;
                        stroke-dasharray: 1693;
                        stroke-dashoffset: 1693;
                    }

                    .line4 {
                        animation: line4 5s infinite linear;
                        stroke-dasharray: 1174;
                        stroke-dashoffset: 1174;
                    }

                    .line5 {
                        animation: line5 5s infinite linear;
                        stroke-dasharray: 1549;
                        stroke-dashoffset: 1549;
                    }

                    .line6 {
                        animation: line6 5s infinite linear;
                        stroke-dasharray: 1097;
                        stroke-dashoffset: 1097;
                    }

                    .line7 {
                        animation: line7 5s infinite linear;
                        stroke-dasharray: 520;
                        stroke-dashoffset: 520;
                    }

                    .line8 {
                        animation: line8 5s infinite linear;
                        stroke-dasharray: 2126;
                        stroke-dashoffset: 2126;
                    }

                    @keyframes line1 {
                        0% {
                            stroke-dashoffset: 256;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes line2 {
                        0% {
                            stroke-dashoffset: 670;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes line3 {
                        0% {
                            stroke-dashoffset: 1692;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes line4 {
                        0% {
                            stroke-dashoffset: 1174;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes line5 {
                        0% {
                            stroke-dashoffset: 1549;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes line6 {
                        0% {
                            stroke-dashoffset: 1097;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes line7 {
                        0% {
                            stroke-dashoffset: 520;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes line8 {
                        0% {
                            stroke-dashoffset: 2126;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }
                </style>

                <h2>Sample 15: animation</h2>
                <div class="well clearfix">
                    <div class="block1">
                        <svg width="200" height="200" style="background:#ffebee;">
                            <rect class="rect1" x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="none"/>
                        </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:#ffebee;">
                            <rect class="rect2" x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="none" />
                        </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:#ffebee;">
                            <rect class="rect3" x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="none" />
                        </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:#ffebee;">
                            <rect class="rect4" x="30" y="30" width="140" height="140" stroke="#880e4f" stroke-width="5" fill="none" />
                        </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:#e3f3fd">
                            <ellipse class="el1" cx="100" cy="100" rx="90" ry="90" stroke="#0d47a1" stroke-width="5" fill="none"/>
                        </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:#e3f3fd">
                            <ellipse class="el2" cx="100" cy="100" rx="90" ry="90" stroke="#0d47a1" stroke-width="5" fill="none"/>
                        </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:#e3f3fd">
                            <ellipse class="el3" cx="100" cy="100" rx="90" ry="90" stroke="#0d47a1" stroke-width="5" fill="none"/>
                        </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:#e3f3fd">
                            <ellipse class="el4" cx="100" cy="100" rx="90" ry="90" stroke="#0d47a1" stroke-width="5" fill="none"/>
                        </svg>
                    </div>
                </div>

                <div class="well clearfix">
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path  class="line1" d="M27,18c0,89.543,72.457,162,162,162" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path class="line2" d="M178,154c-39.765,34.794-100.206,30.765-135-9
	c-27.835-31.812-24.612-80.165,7.2-108c25.449-22.268,64.132-19.689,86.399,5.76c17.814,20.36,15.752,51.306-4.607,69.12
	c-16.287,14.252-41.044,12.601-55.296-3.687c-11.401-13.03-10.081-32.835,2.949-44.236c10.424-9.121,26.269-8.065,35.39,2.359
	c7.297,8.339,6.451,21.015-1.889,28.312c-6.671,5.838-16.811,5.162-22.648-1.51c-4.67-5.337-4.129-13.449,1.208-18.119" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path class="line3" d="M98,50.99c0-79.98,25.446-8.424,10.144,28.522
		c15.303-36.946,83.895-69.551,27.34-12.996c56.555-56.555,23.949,12.037-12.996,27.34C159.433,78.553,230.99,104,151.01,104
		c79.98,0,8.423,25.446-28.522,10.144c36.945,15.303,69.551,83.895,12.996,27.34c56.555,56.555-12.037,23.949-27.34-12.996
		C123.446,165.433,98,236.99,98,157.01c0,79.98-25.447,8.423-10.143-28.522c-15.304,36.945-83.895,69.551-27.34,12.996
		c-56.555,56.555-23.95-12.037,12.996-27.34C36.566,129.446-34.99,104,44.99,104c-79.98,0-8.424-25.447,28.522-10.143
		C36.566,78.553,3.962,9.962,60.517,66.517C3.962,9.962,72.553,42.566,87.857,79.513C72.553,42.566,98-28.99,98,50.99z" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path class="line4" d="M149.187,170.26c-53.688-75.162-49.196-76.202-64.381,14.907
		c15.186-91.109,19.097-88.669-56.064-34.981c75.162-53.688,76.202-49.196-14.909-64.38c91.11,15.185,88.67,19.096,34.983-56.065
		c53.687,75.161,49.195,76.201,64.38-14.908c-15.186,91.109-19.097,88.669,56.063,34.982c-75.16,53.687-76.201,49.195,14.909,64.382
		C93.058,99.009,95.499,95.098,149.187,170.26z" stroke="white"  stroke-width="2" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path  class="line5" d="M163.762,144.914c-2.875,2.396-16.264-10.116-19.377-8.255
		c-3.196,1.911,1.461,19.622-1.922,20.977c-3.443,1.379-12.3-14.663-15.867-13.854c-3.605,0.816-4.678,19.101-8.339,19.341
		c-3.679,0.242-7.144-17.749-10.807-18.082s-10.314,16.738-13.889,15.837c-3.558-0.896-1.315-19.075-4.714-20.528
		c-3.363-1.438-14.966,12.744-18.104,10.768c-3.083-1.942,4.691-18.522,1.892-20.979c-2.727-2.393-18.153,7.499-20.549,4.624
		c-1.917-2.3,11.021-15.087,9.531-17.578c-1.529-2.557-18.914,2.762-19.997,0.055c-1.103-2.754,15.157-10.904,14.511-13.759
		c-0.653-2.884-18.833-3.228-19.025-6.157c-0.193-2.943,17.788-5.669,18.054-8.6c0.266-2.93-16.929-8.854-16.208-11.714
		c0.717-2.846,18.661,0.095,19.824-2.624c1.15-2.69-13.374-13.64-11.792-16.15c1.554-2.467,17.695,5.899,19.66,3.66
		c1.914-2.182-8.505-17.092-6.205-19.009c1.84-1.533,14.146,11.744,16.138,10.553c2.046-1.223-3.801-18.347-1.636-19.214
		c2.204-0.882,9.79,15.553,12.073,15.036c2.308-0.522,2.066-18.618,4.41-18.772c2.354-0.154,4.491,17.819,6.835,18.032
		c2.344,0.213,7.688-17.081,9.975-16.504c2.277,0.574-1.223,18.33,0.953,19.26c2.152,0.92,12.577-13.877,14.586-12.612
		c1.973,1.243-6.867,17.031-5.076,18.603c1.745,1.531,16.245-9.309,17.778-7.469c1.227,1.472-12.323,13.393-11.37,14.987
		c0.979,1.636,17.894-4.635,18.587-2.903c0.706,1.763-15.868,8.901-15.454,10.728c0.418,1.846,18.445,1.136,18.568,3.011
		c0.124,1.883-17.844,3.548-18.015,5.424c-0.17,1.875,17.202,6.752,16.741,8.583c-0.46,1.821-18.063-2.128-18.808-0.388
		c-0.736,1.722,14.278,11.731,13.267,13.337c-0.995,1.579-16.5-7.64-17.758-6.207c-1.225,1.396,9.952,15.565,8.48,16.792
		c-1.178,0.981-12.789-12.787-14.064-12.024c-1.31,0.782,5.298,17.532,3.912,18.087c-1.41,0.564-8.184-16.122-9.646-15.792
		c-1.477,0.335-0.396,18.31-1.896,18.408c-1.507,0.099-2.793-17.864-4.294-18.001c-1.5-0.136-6.003,17.301-7.467,16.932
		c-1.458-0.367,2.847-17.854,1.455-18.448c-1.378-0.589-11.05,14.602-12.335,13.792c-1.263-0.796,8.258-16.077,7.112-17.083
		c-1.117-0.979-15.021,10.469-16.002,9.291c-0.785-0.942,13.157-12.308,12.546-13.328c-0.626-1.048-17.241,5.832-17.685,4.723
		c-0.452-1.128,16.324-7.615,16.06-8.784c-0.268-1.182-18.198,0.2-18.277-1c-0.079-1.205,17.88-2.19,17.989-3.39
		c0.109-1.2-17.378-5.408-17.083-6.579c0.294-1.166,17.682,3.427,18.158,2.313c0.471-1.102-14.86-10.506-14.212-11.535
		c0.636-1.01,15.738,8.753,16.542,7.836c0.784-0.894-10.879-14.588-9.938-15.373c0.753-0.628,11.922,13.453,12.738,12.965
		c0.838-0.501-6.257-17.009-5.37-17.364c0.902-0.361,7.159,16.486,8.094,16.274c0.945-0.214-0.677-18.11,0.283-18.173
		c0.964-0.063,1.708,17.893,2.668,17.98c0.96,0.087,4.927-17.441,5.864-17.205c0.933,0.235-3.889,17.546-2.998,17.927
		c0.882,0.377,10.071-15.067,10.894-14.549c0.809,0.509-9.147,15.467-8.414,16.111c0.715,0.627,14.24-11.209,14.868-10.456
		c0.503,0.603-13.688,11.619-13.297,12.272c0.401,0.67,16.821-6.604,17.105-5.894c0.289,0.722-16.615,6.795-16.445,7.543
		c0.171,0.756,18.039-1.06,18.09-0.292c0.051,0.771-17.902,1.322-17.973,2.09c-0.069,0.768,17.491,4.544,17.302,5.294
		c-0.188,0.746-17.438-4.259-17.742-3.546c-0.302,0.705,15.231,9.724,14.817,10.382c-0.407,0.646-15.251-9.463-15.766-8.876
		c-0.502,0.572,11.473,13.961,10.87,14.464" stroke="white"  stroke-width="2" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path  class="line6" d="M162.771,162.841c-69.414-66.75-69.414-66.75-56.957-18.392
		c-12.457-48.358-12.457-48.358-47.441,36.493c34.984-84.851,34.984-84.851-0.109-59.853C93.357,96.091,93.357,96.091,8.898,87.247
		c84.459,8.844,84.459,8.844,56.89-18.599c27.57,27.443,27.57,27.443,16.93-57.408c10.639,84.851,10.639,84.851,35.268,48.358
		c-24.629,36.493-24.629,36.493,59.83-1.638c-84.459,38.131-84.459,38.131-35.093,48.486
		C93.357,96.091,93.357,96.091,162.771,162.841z" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path  class="line7" d="M43.111,22.734c1.882,2.159-8.673,11.357-6.791,13.517
		c1.882,2.159,12.436-7.039,14.318-4.88c1.882,2.16-8.672,11.358-6.789,13.518c1.884,2.162,12.438-7.036,14.322-4.875
		c1.883,2.16-8.672,11.358-6.789,13.518c1.882,2.16,12.437-7.038,14.319-4.879c1.883,2.161-8.671,11.359-6.788,13.519
		c1.884,2.161,12.438-7.037,14.322-4.875c1.883,2.16-8.672,11.358-6.789,13.519c1.883,2.161,12.437-7.037,14.321-4.877
		c1.884,2.162-8.671,11.36-6.787,13.521c1.883,2.161,12.437-7.037,14.32-4.877c1.884,2.162-8.671,11.36-6.787,13.521
		c1.883,2.161,12.438-7.037,14.321-4.876c1.884,2.161-8.671,11.36-6.787,13.521c1.884,2.161,12.438-7.037,14.322-4.875
		c1.884,2.162-8.67,11.36-6.786,13.522c1.884,2.161,12.438-7.037,14.322-4.875c1.884,2.162-8.67,11.36-6.786,13.522
		c1.884,2.162,12.439-7.036,14.323-4.873c1.883,2.161-8.671,11.359-6.787,13.521c1.882,2.16,12.437-7.038,14.319-4.878
		c1.884,2.162-8.67,11.36-6.786,13.522c1.883,2.161,12.437-7.037,14.321-4.877c1.884,2.162-8.67,11.36-6.786,13.522
		c1.885,2.163,12.439-7.035,14.324-4.873s-8.67,11.361-6.785,13.524c1.885,2.163,12.439-7.035,14.324-4.873
		c1.884,2.162-8.67,11.36-6.786,13.522c1.885,2.162,12.439-7.036,14.324-4.873c1.886,2.164-8.668,11.362-6.782,13.527
		c1.887,2.166,12.442-7.032,14.329-4.866c1.887,2.166-8.667,11.364-6.779,13.53" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                    <div class="block1">
                        <svg width="200" height="200" style="background:lightpink">
                            <path class="line8" d="M169.153,152.865c-93.982-70.487-82.024-79.874-35.876,28.161
		c-46.148-108.035-31.098-110.185-45.15,6.45c14.052-116.634,28.161-110.971-42.326-16.989
		c70.487-93.982,79.874-82.024-28.161-35.876c108.035-46.148,110.185-31.098-6.45-45.15
		c116.634,14.052,110.971,28.161,16.989-42.326c93.982,70.487,82.024,79.874,35.876-28.161
		c46.148,108.035,31.098,110.185,45.15-6.45c-14.052,116.634-28.161,110.971,42.326,16.989
		c-70.487,93.982-79.874,82.024,28.161,35.876c-108.035,46.148-110.185,31.098,6.45,45.15
		C69.508,96.487,75.171,82.378,169.153,152.865z" stroke="white"  stroke-width="3" fill="none"/>
                    </svg>
                    </div>
                </div>
             
               <style>
                    .text-wrap1 path {
                        fill: none;
                        stroke: black;
                        stroke-width: 1;
                    }

                    .text-wrap2 path {
                        fill: none;
                        stroke: black;
                        stroke-width: 1;
                    }

                    .text-wrap1 .text1 {
                        animation: text1 3s 10 linear forwards;
                        stroke-dasharray: 1255;
                        stroke-dashoffset: 1255;
                    }

                    .text-wrap1 .text2 {
                        animation: text2 3s 10 linear forwards;
                        stroke-dasharray: 136;
                        stroke-dashoffset: 136;
                    }

                    .text-wrap1 .text3 {
                        animation: text3 3s 10 linear forwards;
                        stroke-dasharray: 703;
                        stroke-dashoffset: 703;
                    }

                    .text-wrap1 .text4 {
                        animation: text4 3s 10 linear forwards;
                        stroke-dasharray: 655;
                        stroke-dashoffset: 655;
                    }

                    .text-wrap1 .text5 {
                        animation: text5 3s 10 linear forwards;
                        stroke-dasharray: 582;
                        stroke-dashoffset: 582;
                    }

                    .text-wrap1 .text6 {
                        animation: text6 3s 10 linear forwards;
                        stroke-dasharray: 559;
                        stroke-dashoffset: 559;
                    }

                    .text-wrap1 .text7 {
                        animation: text7 3s 10 linear forwards;
                        stroke-dasharray: 296;
                        stroke-dashoffset: 296;
                    }

                    .text-wrap1 .text8 {
                        animation: text8 3s 10 linear forwards;
                        stroke-dasharray: 339;
                        stroke-dashoffset: 339;
                    }

                    .text-wrap2 .text9 {
                        animation: text9 3s 10 linear forwards;
                        stroke-dasharray: 335;
                        stroke-dashoffset: 335;
                    }

                    .text-wrap2 .text10 {
                        animation: text10 3s 10 linear forwards;
                        stroke-dasharray: 297;
                        stroke-dashoffset: 297;
                    }

                    .text-wrap2 .text11 {
                        animation: text11 3s 10 linear forwards;
                        stroke-dasharray: 391;
                        stroke-dashoffset: 391;
                    }

                    .text-wrap2 .text12 {
                        animation: text12 3s 10 linear forwards;
                        stroke-dasharray: 217;
                        stroke-dashoffset: 217;
                    }

                    .text-wrap2 .text13 {
                        animation: text13 3s 10 linear forwards;
                        stroke-dasharray: 193;
                        stroke-dashoffset: 193;
                    }

                    .text-wrap2 .text14 {
                        animation: text14 3s 10 linear forwards;
                        stroke-dasharray: 223;
                        stroke-dashoffset: 223;
                    }

                    .text-wrap2 .text15 {
                        animation: text15 3s 10 linear forwards;
                        stroke-dasharray: 378;
                        stroke-dashoffset: 378;
                    }

                    .text-wrap2 .text16 {
                        animation: text16 3s 10 linear forwards;
                        stroke-dasharray: 303;
                        stroke-dashoffset: 303;
                    }

                    .text-wrap2 .text17 {
                        animation: text17 3s 10 linear forwards;
                        stroke-dasharray: 192;
                        stroke-dashoffset: 303;
                    }

                    @keyframes text1 {
                        0% {
                            stroke-dashoffset: 1255;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text2 {
                        0% {
                            stroke-dashoffset: 136;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text3 {
                        0% {
                            stroke-dashoffset: 703;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text4 {
                        0% {
                            stroke-dashoffset: 655;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text5 {
                        0% {
                            stroke-dashoffset: 582;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text6 {
                        0% {
                            stroke-dashoffset: 559;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text7 {
                        0% {
                            stroke-dashoffset: 296;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text8 {
                        0% {
                            stroke-dashoffset: 339;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text9 {
                        0% {
                            stroke-dashoffset: 335;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text10 {
                        0% {
                            stroke-dashoffset: 297;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text11 {
                        0% {
                            stroke-dashoffset: 391;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text12 {
                        0% {
                            stroke-dashoffset: 217;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text13 {
                        0% {
                            stroke-dashoffset: 193;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text14 {
                        0% {
                            stroke-dashoffset: 223;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text15 {
                        0% {
                            stroke-dashoffset: 378;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text16 {
                        0% {
                            stroke-dashoffset: 303;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }

                    @keyframes text17 {
                        0% {
                            stroke-dashoffset: 192;
                        }
                        35% {}
                        70% {}
                        100% {
                            stroke-dashoffset: 0;
                        }
                    }
                </style>
                <div class="well clearfix">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1170px" height="600px" viewBox="0 0 1170 600" enable-background="new 0 0 1170 600" xml:space="preserve">
                            <g class="text-wrap1">
                                <path class="text1" d="M328.037,239.477c0,18.62-7.318,34.05-21.954,46.289c-14.313,11.978-31.974,17.969-52.985,17.969
                                    c-12.1,0-22.51-2.67-31.226-8.008c-9.888-6.055-14.832-14.192-14.832-24.414c0-5.142,1.247-9.717,3.743-13.721
                                    c2.496-4.004,5.786-6.006,9.871-6.006c2.982,0,5.284,0.781,6.905,2.344s2.431,3.516,2.431,5.859c0,2.084-0.18,3.662-0.537,4.736
                                    c-0.358,1.074-0.961,2.1-1.807,3.076c-0.456,0.522-0.815,0.781-1.074,0.781c-0.195,0-0.488-0.537-0.879-1.611
                                    s-0.944-1.968-1.66-2.686c-0.977-1.041-2.182-1.563-3.613-1.563c-2.084,0-3.679,1.059-4.785,3.174
                                    c-1.108,2.116-1.66,4.509-1.66,7.178c0,7.944,3.97,14.126,11.914,18.555c6.771,3.775,15.039,5.664,24.805,5.664
                                    c17.251,0,31.868-5.339,43.848-16.016c12.695-11.263,19.043-25.781,19.043-43.555c0-5.728-1.188-11.019-3.564-15.869
                                    c-2.377-4.849-5.551-8.609-9.521-11.279c-2.533,3.32-5.778,6.218-9.74,8.691c-4.675,2.93-9.157,4.395-13.441,4.395
                                    c-4.741,0-8.312-0.911-10.713-2.734c-2.078-1.563-3.117-3.711-3.117-6.445c0-3.32,1.784-6.265,5.354-8.838
                                    c3.57-2.571,7.626-4.183,12.17-4.834c2.595-0.325,4.867-0.488,6.816-0.488c2.92,0,5.516,0.293,7.788,0.879
                                    c1.367-2.864,2.457-5.777,3.271-8.74c0.813-2.962,1.221-6.104,1.221-9.424c0-10.156-4.492-18.164-13.477-24.023
                                    c-7.944-5.208-17.514-7.813-28.711-7.813c-10.288,0-19.548,2.507-27.783,7.52c-8.237,5.014-12.778,11.101-13.623,18.262
                                    c-0.131,1.172-0.195,2.019-0.195,2.539c0,2.28,0.455,4.021,1.367,5.225c0.911,1.206,2.148,1.807,3.711,1.807
                                    c1.431,0,2.637-0.259,3.613-0.781c0.455-0.259,1.009-0.716,1.66-1.367c0.259-0.455,0.488-0.65,0.684-0.586
                                    c0.195,0.065,0.293,0.261,0.293,0.586c0.391,2.214-0.781,4.362-3.516,6.445c-1.889,1.433-4.167,2.148-6.836,2.148
                                    c-2.409,0-4.526-1.074-6.348-3.223c-2.019-2.344-3.027-5.371-3.027-9.082c0-9.31,5.142-17.578,15.43-24.805
                                    c10.742-7.552,23.501-11.328,38.281-11.328c14.063,0,25.879,2.734,35.449,8.203c11.392,6.511,17.09,15.952,17.09,28.32
                                    c0,4.492-0.815,8.659-2.441,12.5c-1.172,2.8-3.288,6.315-6.348,10.547c5.142,2.28,9.993,6.543,14.551,12.793
                                    C325.335,224.145,328.037,231.729,328.037,239.477z M260.552,281.897c0.131,0.128,0.229,0.32,0.296,0.575
                                    c0.065,0.192,0.099,0.353,0.099,0.481c0,0.703-0.589,1.054-1.764,1.054c-0.653,0.064-2.597-0.015-5.831-0.244
                                    c-3.235-0.228-5.472-0.342-6.712-0.342c-2.09,0-5.226,0.163-9.407,0.488c-1.568,0.13-2.678,0.162-3.331,0.098
                                    c-1.11,0-1.666-0.391-1.666-1.172c0-0.325,0.098-0.586,0.293-0.781c0.195-0.259,1.595-1.399,4.199-3.418
                                    c2.017-1.563,3.027-2.962,3.027-4.199v-89.844c0-2.017-0.62-3.45-1.855-4.297c-1.499-0.586-2.524-1.025-3.076-1.318
                                    c-0.554-0.293-0.83-0.635-0.83-1.025s0.293-0.716,0.882-0.977c0.522-0.455,1.535-1.106,3.038-1.953
                                    c4.77-2.669,7.613-4.297,8.528-4.883c1.568-0.977,4.182-2.767,7.841-5.371c2.678-1.953,4.442-3.027,5.292-3.223
                                    c0.718-0.325,1.079-0.13,1.079,0.586c0,0.195-0.099,0.456-0.297,0.783c-2.441,4.041-4.158,7.95-5.147,11.728
                                    c-1.188,4.626-1.782,9.644-1.782,15.051v84.837c0,1.239,0.989,2.606,2.968,4.104C259.034,280.621,260.419,281.707,260.552,281.897z
                                     M292.49,207.055c-2.539-0.845-5.405-1.27-8.594-1.27c-1.042,0-2.344,0.083-3.906,0.244c-1.563,0.163-3.418,0.798-5.566,1.904
                                    c-2.67,1.433-4.004,3.159-4.004,5.176c0,1.823,1.009,3.061,3.027,3.711c1.172,0.391,2.31,0.586,3.418,0.586
                                    c2.93,0,5.908-1.025,8.936-3.076S291.058,209.854,292.49,207.055z"/>
                                <path class="text2"d="M403.037,223.266c0.13,0.781,0.195,1.563,0.195,2.344c0,2.148-0.327,3.906-0.977,5.273
                                    c-1.303,3.32-3.483,5.778-6.543,7.373c-3.061,1.596-6.934,2.393-11.621,2.393c-2.475,0-5.405-0.391-8.789-1.172
                                    c-7.292-1.692-12.045-2.539-14.258-2.539c-2.734,0-4.948,0.62-6.641,1.855c-1.303,0.913-2.214,2.116-2.734,3.613
                                    c-0.261,0.847-0.586,1.27-0.977,1.27s-0.7-0.423-0.928-1.27c-0.229-0.845-0.342-1.855-0.342-3.027c0-1.497,0.179-2.93,0.537-4.297
                                    c0.357-1.367,1.058-2.767,2.1-4.199c1.367-1.758,3.206-3.14,5.518-4.15c2.31-1.009,5.093-1.514,8.35-1.514
                                    c2.93,0,6.836,0.717,11.719,2.148c4.883,1.433,8.853,2.148,11.914,2.148c3.125,0,5.762-0.813,7.91-2.441
                                    c1.236-0.911,2.441-2.31,3.613-4.199c0.259-0.521,0.586-0.781,0.977-0.781C402.581,222.094,402.906,222.484,403.037,223.266z"/>
                                <path class="text3" d="M514.756,226.781c0,17.253-4.785,31.738-14.355,43.457c-9.245,11.264-20.085,16.895-32.52,16.895
                                    c-4.492,0-8.562-0.847-12.207-2.539c-2.93-1.367-6.348-3.775-10.254-7.227v20.898c0,3.646,0.716,6.641,2.148,8.984
                                    c0.716,1.106,1.953,2.474,3.711,4.102c0.586,0.521,0.879,0.977,0.879,1.367c0,0.455-0.473,0.879-1.416,1.27
                                    c-0.944,0.391-2.002,0.813-3.174,1.27c-2.019,0.911-4.362,2.213-7.031,3.906c-1.823,1.106-3.532,2.311-5.127,3.613
                                    c-1.596,1.302-3.208,2.637-4.834,4.004c-0.522,0.26-0.977,0.391-1.367,0.391c-0.651,0-0.913-0.651-0.781-1.953
                                    c1.302-3.451,2.376-6.918,3.223-10.4c0.845-3.483,1.27-7.048,1.27-10.693v-87.5c0-5.599-1.726-10.156-5.176-13.672
                                    c-1.433-1.497-3.94-3.189-7.52-5.078c-0.391-0.195-0.586-0.455-0.586-0.781c0-0.195,0.064-0.423,0.195-0.684
                                    c0.13-0.259,0.259-0.488,0.391-0.684c0.325-0.391,0.879-0.911,1.66-1.563c1.106-0.911,1.985-1.692,2.637-2.344
                                    c0.977-0.977,1.724-1.758,2.246-2.344c0.521-0.586,1.009-1.172,1.465-1.758c0.195-0.325,0.552-0.488,1.074-0.488
                                    c0.391,0,0.684,0.098,0.879,0.293c2.669,2.019,5.273,4.624,7.813,7.813c3.775,4.753,5.989,9.375,6.641,13.867
                                    c2.539-5.013,6.021-9.439,10.449-13.281c6.509-5.599,13.77-8.398,21.777-8.398c8.072,0,15.201,2.377,21.387,7.129
                                    c5.142,3.972,9.277,9.277,12.402,15.918C513.389,216.43,514.756,221.834,514.756,226.781z M501.67,233.813
                                    c0-9.375-2.604-17.61-7.813-24.707c-5.469-7.486-12.241-11.23-20.313-11.23c-6.706,0-12.598,2.116-17.676,6.348
                                    c-4.167,3.452-7.651,8.171-10.449,14.16v56.836l3.906-3.711c1.106-1.041,2.002-1.953,2.686-2.734s1.48-1.888,2.393-3.32
                                    c0.325-0.391,0.65-0.586,0.977-0.586c0.845,0,1.106,0.522,0.781,1.563c-0.065,0.131-0.195,0.766-0.391,1.904
                                    c-0.195,1.14-0.293,2.067-0.293,2.783c0,1.563,0.293,2.995,0.879,4.297c0.845,1.694,2.49,3.125,4.932,4.297
                                    s4.964,1.758,7.568,1.758c9.896,0,17.837-4.395,23.828-13.184C498.675,259.496,501.67,248.006,501.67,233.813z"/>
                                <path class="text4" d="M620.42,263.305c-1.693,5.534-5.762,10.71-12.207,15.527c-7.553,5.664-15.788,8.496-24.707,8.496
                                    c-5.729,0-10.808-0.62-15.234-1.855c-5.078-1.433-9.897-3.873-14.453-7.324c-1.823,2.28-3.483,4.753-4.98,7.422
                                    c-1.889,3.32-2.832,5.728-2.832,7.227c0,1.822,0.488,3.091,1.465,3.809c0.65,0.455,1.724,0.684,3.223,0.684
                                    c0.455,0,0.911-0.065,1.367-0.195c0.391-0.131,0.781-0.261,1.172-0.391c0.259-0.131,0.488-0.131,0.684,0
                                    c0.455,0.259,0.552,0.781,0.293,1.563c-0.391,1.563-1.172,2.994-2.344,4.297c-1.563,1.692-3.386,2.539-5.469,2.539
                                    c-2.214,0-4.038-0.814-5.469-2.441c-1.433-1.628-2.148-3.745-2.148-6.348c0-2.084,0.716-4.624,2.148-7.617
                                    c0.391-0.847,3.189-5.469,8.398-13.867c-4.819-4.947-8.53-10.318-11.133-16.113c-2.866-6.445-4.297-13.379-4.297-20.801
                                    c0-13.672,4.443-25.488,13.33-35.449s19.938-14.941,33.154-14.941c5.273,0,10.677,1.27,16.211,3.809
                                    c3.06,1.499,6.119,2.963,9.18,4.395c0.586,0.261,1.432,0.456,2.539,0.586c1.106,0.131,2.213,0.195,3.32,0.195l2.93-0.195
                                    c0.716,0,1.074,0.293,1.074,0.879c0,0.456-0.229,0.815-0.684,1.074c-1.042,0.651-2.182,1.53-3.418,2.637
                                    c-1.693,1.433-3.158,2.897-4.395,4.395c-6.315,7.031-13.64,16.245-21.973,27.637c-8.334,11.394-16.179,22.819-23.535,34.277
                                    c3.841,2.734,7.747,4.851,11.719,6.348c4.688,1.758,9.57,2.637,14.648,2.637c7.031,0,12.825-1.333,17.383-4.004
                                    c3.32-1.953,7.031-5.435,11.133-10.449c0.391-0.586,0.846-1.221,1.367-1.904c0.521-0.684,1.106-0.96,1.758-0.83
                                    c0.846,0.195,1.27,0.815,1.27,1.855C620.908,261.645,620.745,262.459,620.42,263.305z M593.662,205.688
                                    c0-3.841-2.084-6.836-6.25-8.984c-3.516-1.822-7.748-2.734-12.695-2.734c-9.245,0-16.862,3.94-22.852,11.816
                                    c-5.6,7.422-8.398,16.245-8.398,26.465c0,6.055,1.465,12.109,4.395,18.164c2.474,5.144,5.566,9.506,9.277,13.086
                                    c4.427-6.575,7.877-11.685,10.352-15.332c3.971-5.859,7.356-10.774,10.156-14.746c3.58-5.078,7.161-10.156,10.742-15.234
                                    C591.904,212.719,593.662,208.553,593.662,205.688z"/>
                                <path class="text5" d="M717.1,224.086c0,9.646-1.693,18.886-5.078,27.718c-3.386,8.832-8.398,16.994-15.039,24.489
                                    c0.195,0,0.537,0.017,1.025,0.049c0.488,0.034,1.155,0.049,2.002,0.049c2.018,0,3.906-0.113,5.664-0.342
                                    c1.758-0.228,3.482-0.894,5.176-2.002c1.692-1.367,2.799-2.246,3.32-2.637c0.13-0.13,0.325-0.228,0.586-0.293
                                    c0.195-0.064,0.325-0.098,0.391-0.098c0.716,0,0.911,0.583,0.586,1.747c-0.131,0.971-0.261,2.136-0.391,3.494
                                    c-0.131,1.36-0.195,2.266-0.195,2.719c0,0.971,0.032,1.99,0.098,3.058c0.064,1.068,0.162,2.183,0.293,3.349
                                    c0.26,1.294,0,1.941-0.781,1.941c-0.326,0-0.651-0.128-0.977-0.381c-1.953-1.081-3.32-1.778-4.102-2.095
                                    c-1.498-0.572-2.914-0.952-4.248-1.143c-1.335-0.19-3.402-0.287-6.201-0.287c-1.889,0-3.386,0.029-4.492,0.084
                                    c-1.107,0.056-2.572,0.224-4.395,0.502c-1.889,0.325-2.832-0.259-2.832-1.758c0-0.455,0.098-0.845,0.293-1.172
                                    c3.516-5.469,6.25-9.993,8.203-13.574c3.06-5.664,5.338-10.938,6.836-15.82c1.822-5.989,2.734-12.076,2.734-18.262
                                    c0-10.22-2.279-18.521-6.836-24.902c-4.753-6.705-11.198-10.059-19.336-10.059c-5.469,0-10.385,1.529-14.746,4.583
                                    c-3.906,2.731-7.129,6.536-9.668,11.412v59.888c0,1.17,0.727,2.373,2.179,3.609c1.255,1.059,2.509,2.086,3.763,3.078
                                    c0.727,0.728,1.09,1.39,1.09,1.985c0,0.662-0.556,0.992-1.666,0.992c-0.327,0-1.798-0.098-4.411-0.293
                                    c-2.614-0.195-4.999-0.293-7.155-0.293c-2.484,0-4.46,0.065-5.93,0.195c-1.471,0.131-3.152,0.261-5.048,0.391
                                    c-1.568,0-2.353-0.365-2.353-1.094c0-0.464,0.293-1.027,0.879-1.69c0.586-0.662,1.529-1.524,2.832-2.586
                                    c2.213-1.691,3.32-3.121,3.32-4.292v-57.751c0-5.526-1.66-10.014-4.98-13.461c-1.433-1.496-3.939-3.188-7.52-5.074
                                    c-0.521-0.259-0.781-0.616-0.781-1.073c0-0.455,0.195-0.877,0.586-1.268c0.846-0.78,1.563-1.413,2.148-1.901
                                    s1.334-1.187,2.246-2.098c0.911-0.91,1.627-1.657,2.148-2.243c0.521-0.586,1.009-1.17,1.465-1.756
                                    c0.26-0.325,0.618-0.488,1.074-0.488c0.391,0,0.684,0.098,0.879,0.293c2.344,1.889,4.817,4.526,7.422,7.91
                                    c3.58,4.624,5.664,8.627,6.25,12.012c2.864-4.688,6.348-8.755,10.449-12.207c6.119-5.142,12.337-7.715,18.652-7.715
                                    c11.719,0,20.735,4.401,27.051,13.199C714.593,207.696,717.1,215.484,717.1,224.086z"/>
                                <path class="text6" d="M825.693,260.375c0,0.913-0.261,2.019-0.781,3.32c-2.084,5.273-5.795,10.092-11.133,14.453
                                    c-7.357,5.989-15.886,8.984-25.586,8.984c-14.258,0-25.586-4.297-33.984-12.891c-8.594-8.789-12.891-20.898-12.891-36.328
                                    c0-13.477,4.866-25.244,14.6-35.303c9.732-10.059,21.402-15.088,35.01-15.088c7.813,0,14.648,2.084,20.508,6.25
                                    c6.38,4.558,9.57,10.352,9.57,17.383c0,5.925-1.872,10.922-5.615,14.99c-3.744,4.069-8.383,6.104-13.916,6.104
                                    c-4.688,0-8.725-1.367-12.109-4.102c-3.646-2.93-5.469-6.641-5.469-11.133c0-2.93,0.977-5.664,2.93-8.203
                                    c1.692-2.278,3.45-3.646,5.273-4.102c0.716-0.259,1.27-0.195,1.66,0.195s0.488,0.847,0.293,1.367
                                    c-0.326,0.913-0.554,1.66-0.684,2.246c-0.391,1.303-0.586,2.475-0.586,3.516c0,0.717,0.032,1.27,0.098,1.66
                                    c0.391,2.019,1.448,3.564,3.174,4.639c1.725,1.074,3.727,1.611,6.006,1.611c3.125,0,5.631-1.138,7.52-3.418
                                    c1.888-2.278,2.832-5.11,2.832-8.496c0-4.947-2.377-8.853-7.129-11.719c-4.297-2.603-9.343-3.906-15.137-3.906
                                    c-11.003,0-19.906,4.184-26.709,12.549c-6.804,8.366-10.205,18.833-10.205,31.396c0,10.938,3.482,20.28,10.449,28.027
                                    c7.227,8.008,16.178,12.012,26.855,12.012c6.705,0,12.288-0.992,16.748-2.979c4.459-1.985,9.033-5.679,13.721-11.084
                                    c0.064-0.13,0.455-0.684,1.172-1.66c0.521-0.716,0.977-1.204,1.367-1.465c0.325-0.195,0.765-0.21,1.318-0.049
                                    C825.416,259.317,825.693,259.725,825.693,260.375z"/>
                                <path class="text7" d="M869.248,280.933c0.781,0.769,1.172,1.408,1.172,1.921c0,0.77-0.717,1.154-2.148,1.154c-1.172,0-2.148-0.032-2.93-0.098
                                    c-4.037-0.325-6.706-0.488-8.008-0.488c-2.344,0-4.248,0.065-5.713,0.195c-1.465,0.131-3.142,0.261-5.029,0.391
                                    c-1.563,0-2.344-0.397-2.344-1.192c0-0.396,0.325-0.992,0.977-1.785c1.627-1.323,2.832-2.348,3.613-3.078
                                    c1.497-1.3,2.246-2.502,2.246-3.609v-65.541c0-3.25-0.781-5.427-2.344-6.534c-2.019-0.716-3.418-1.204-4.199-1.465
                                    c-0.781-0.259-1.172-0.65-1.172-1.172c0-0.391,0.309-0.813,0.928-1.27c0.618-0.455,1.676-1.074,3.174-1.855
                                    c2.213-1.172,3.938-2.148,5.176-2.93c3.06-1.888,5.452-3.467,7.178-4.736c1.725-1.27,2.815-2.066,3.271-2.393
                                    c0.455-0.325,0.781-0.488,0.977-0.488c0.911,0,1.204,0.587,0.879,1.759c-0.326,1.435-0.635,3.815-0.928,7.138
                                    s-0.439,7.266-0.439,11.827v67.847c0,1.043,0.684,2.184,2.051,3.421C866.807,278.979,868.011,279.972,869.248,280.933z
                                     M867.002,162.867c0,2.292-0.859,4.24-2.574,5.844c-1.715,1.605-3.771,2.406-6.164,2.406c-2.332,0-4.307-0.85-5.924-2.553
                                    c-1.619-1.703-2.428-3.732-2.428-6.09s0.873-4.355,2.621-5.992c1.747-1.636,3.786-2.455,6.117-2.455
                                    c2.33,0,4.305,0.885,5.924,2.652C866.191,158.448,867.002,160.511,867.002,162.867z"/>
                                <path class="text8" d="M923.936,280.933c0.781,0.769,1.172,1.408,1.172,1.921c0,0.77-0.717,1.154-2.148,1.154c-1.172,0-2.148-0.038-2.93-0.114
                                    c-4.037-0.378-6.706-0.569-8.008-0.569c-2.344,0-4.248,0.076-5.713,0.229c-1.465,0.152-3.142,0.304-5.029,0.455
                                    c-1.563,0-2.344-0.397-2.344-1.192c0-0.396,0.325-0.992,0.977-1.785c1.627-1.323,2.832-2.348,3.613-3.078
                                    c1.497-1.3,2.246-2.504,2.246-3.61V169.941c0-1.886-0.065-3.383-0.195-4.489c-0.131-1.105-0.912-1.561-2.344-1.366
                                    c-0.717,0.131-1.921,0.766-3.613,1.904c-1.693,1.14-2.832,1.807-3.418,2.002c-0.977,0.327-1.465-0.034-1.465-1.079
                                    c0-0.327,0.195-0.783,0.586-1.372c0.391-0.587,2.181-2.417,5.371-5.49c2.539-2.482,4.557-4.475,6.055-5.978
                                    c2.213-2.222,4.622-4.869,7.227-7.941c1.822-2.156,2.994-3.43,3.516-3.822c0.13-0.131,0.325-0.229,0.586-0.294
                                    c0.195-0.064,0.357-0.098,0.488-0.098c0.586,0,0.879,0.522,0.879,1.564c-0.326,2.087-0.603,4.678-0.83,7.776
                                    c-0.229,3.098-0.342,6.374-0.342,9.828v113.445c0,1.043,0.684,2.184,2.051,3.422C921.494,278.979,922.698,279.972,923.936,280.933z
                                    "/>
                            </g>      


                            <g class="text-wrap2">
                                <path class="text9" d="M372.007,324.93h20.581c13.378,0,20.068,8.814,20.068,26.439c0,7.031-1.185,12.562-3.552,16.59
                                    c-2.369,4.028-5.323,6.568-8.862,7.617c-3.541,1.051-8.752,1.624-15.637,1.721v40.943h-12.598V324.93z M384.604,367.557
                                    c5.321,0,9.13-1.074,11.426-3.223c2.294-2.148,3.442-6.47,3.442-12.965c0-6.542-1.001-10.986-3.003-13.33
                                    c-2.003-2.344-5.958-3.516-11.865-3.516V367.557z"/>
                                <path class="text10" d="M464.878,398.025c0,7.471-1.49,12.854-4.468,16.149c-2.979,3.296-7.886,4.944-14.722,4.944
                                    c-6.837,0-11.792-1.623-14.868-4.871c-3.076-3.246-4.614-8.459-4.614-15.637v-44.605h11.865v44.752
                                    c0,7.08,2.538,10.619,7.617,10.619c2.685,0,4.578-0.902,5.676-2.709s1.648-4.809,1.648-9.01v-43.652h11.865V398.025z"/>
                                <path class="text11" d="M481.284,321.633h12.012v41.09h0.293c2.245-6.396,6.396-9.596,12.451-9.596c4.492,0,8.19,2.101,11.096,6.299
                                    c2.904,4.201,4.358,12.305,4.358,24.316c0,14.648-1.294,24.184-3.882,28.602c-2.589,4.42-6.592,6.629-12.012,6.629
                                    c-5.176,0-9.229-3.197-12.158-9.596h-0.293v8.863h-11.865V321.633z M508.75,388.504c0-9.082-0.525-15.552-1.575-19.41
                                    c-1.051-3.855-3.186-5.785-6.409-5.785c-2.735,0-4.688,1.563-5.859,4.688s-1.758,8.129-1.758,15.014
                                    c0,9.328,0.549,15.956,1.648,19.886c1.099,3.931,3.186,5.896,6.262,5.896c2.783,0,4.761-1.598,5.933-4.797
                                    C508.164,400.797,508.75,395.633,508.75,388.504z"/>
                                <path class="text12" d="M548.228,418.24h-12.012v-96.607h12.012V418.24z"/>
                                <path class="text13" d="M563.828,334.67c0-1.758,0.646-3.295,1.941-4.613c1.293-1.318,2.844-1.979,4.65-1.979c1.806,0,3.356,0.66,4.65,1.979
                                    s1.941,2.855,1.941,4.613c0,1.808-0.647,3.358-1.941,4.651c-1.294,1.294-2.845,1.94-4.65,1.94c-1.856,0-3.418-0.646-4.688-1.94
                                    C564.462,338.028,563.828,336.478,563.828,334.67z M564.414,354.227h11.865v64.014h-11.865V354.227z"/>
                                <path class="text14" d="M622.642,365.066c-3.662-1.514-6.812-2.271-9.448-2.271c-2.539,0-4.578,0.638-6.115,1.91
                                    c-1.539,1.273-2.308,3.012-2.308,5.215c0,1.764,0.645,3.502,1.934,5.217c1.29,1.715,3.951,4.315,7.983,7.805
                                    c4.033,3.49,6.893,6.616,8.576,9.377c1.686,2.764,2.527,5.807,2.527,9.129c0,5.036-1.71,9.215-5.127,12.539
                                    c-3.418,3.324-7.764,4.986-13.037,4.986c-3.418,0-7.423-0.903-12.012-2.711v-9.887c4.461,1.807,8.235,2.709,11.324,2.709
                                    c2.304,0,4.104-0.623,5.403-1.871c1.299-1.247,1.949-2.924,1.949-5.027c0-1.957-0.866-4.036-2.599-6.238
                                    c-1.733-2.201-4.724-5.011-8.974-8.43c-6.104-4.938-9.155-10.608-9.155-17.012c0-5.035,1.672-9.227,5.018-12.575
                                    c3.344-3.349,7.507-5.022,12.487-5.022c3.076,0,6.933,0.805,11.572,2.416V365.066z"/>
                                <path class="text15" d="M678.672,418.24H666.88v-46.51c0-6.103-2.466-9.154-7.397-9.154c-5.079,0-7.617,3.395-7.617,10.18v45.484h-12.158v-96.461
                                    h12.158v37.793c4.149-4.198,8.544-6.299,13.184-6.299c9.082,0,13.623,4.908,13.623,14.723V418.24z"/>
                                <path class="text16" d="M733.604,388.357H706.65c0,6.934,0.477,12.17,1.428,15.71c0.953,3.541,3.211,5.31,6.775,5.31
                                    c2.734,0,4.589-1.025,5.566-3.076c0.977-2.051,1.489-5.273,1.538-9.668h10.913c-0.342,14.991-6.69,22.486-19.043,22.486
                                    c-13.282,0-19.922-10.498-19.922-31.494c0-22.9,6.885-34.352,20.654-34.352c5.225,0,9.705,1.979,13.439,5.934
                                    c3.736,3.955,5.604,12.134,5.604,24.535V388.357z M721.519,379.055c0-6.346-0.513-10.9-1.538-13.659
                                    c-1.025-2.758-2.882-4.138-5.566-4.138c-3.175,0-5.262,1.453-6.262,4.357c-1.002,2.906-1.502,7.387-1.502,13.439H721.519z"/>
                                <path class="text17" d="M776.45,363.674c-5.519,0.146-9.448,1.197-11.792,3.15s-3.516,6.299-3.516,13.037v38.379h-12.158v-64.014h12.158v9.447
                                    h0.293c3.516-6.932,8.251-10.4,14.209-10.4l0.806,0.146V363.674z"/>
                            </g>
                
                    </svg>
                </div>

Codepen

See the Pen DC SVG Loader v.1 by Chris Kelley (@digitalcraft) on CodePen.

See the Pen SVG Waves by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

See the Pen #2 - Project Deadline - SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.

See the Pen Preloader SVG animation by Jason Miller (@imjasonmiller) on CodePen.

See the Pen Animated SVG Loader by Tony (@thgaskell) on CodePen.