SVG

스케일러블 벡터 그래픽스(Scaiabl Vector Graphic, SVG)는 2차원 백터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로 1999년 WJC의 주도하에 개발된 모든 표준의 벡터 그래픽 파일 형식입니다.

Sample : 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 : Rect: border-radius

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #ffebee">
            <rect x="30" y="30" width="140" rx="5" ry="5" 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" rx="20" ry="20" 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" rx="40" ry="40" 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" rx="60" ry="60" height="140" stroke="#880e4f" stroke-width="5" fill="#f48fb1" />
        </svg>
    </div>
</div>

Sample : circle

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <circle cx="100" cy="100" r="80" stroke="#30cfd0" stroke-width="0" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <circle cx="100" cy="100" r="80" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <circle cx="100" cy="100" r="80" stroke="#30cfd0" stroke-width="10" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <circle cx="100" cy="100" r="80" stroke="#30cfd0" stroke-width="20" fill="#8fd3f4" />
        </svg>
    </div>
</div>

Sample : ellipse

<h2 class="mt60">Sample : ellipse</h2>
<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <ellipse cx="100" cy="100" rx="90" ry="90" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <ellipse cx="100" cy="100" rx="90" ry="70" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <ellipse cx="100" cy="100" rx="90" ry="50" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <ellipse cx="100" cy="100" rx="90" ry="30" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <ellipse cx="100" cy="100" rx="30" ry="90" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <ellipse cx="100" cy="100" rx="50" ry="90" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <ellipse cx="100" cy="100" rx="70" ry="90" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #a8edea">
            <ellipse cx="100" cy="100" rx="90" ry="90" stroke="#30cfd0" stroke-width="5" fill="#8fd3f4" />
        </svg>
    </div>
</div>

Sample : polygon

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #fef9d7">
            <polygon points="20.706,132.349 121.781,26.301 163.083,166.859" stroke="#fddb92" stroke-width="3" fill="#e2d1c3" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fef9d7">
            <polygon points="35.473,143.58 35.151,48.929 125.069,19.374 
            180.963,95.758 125.59,172.522" stroke="#fddb92" stroke-width="3" fill="#e2d1c3" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fef9d7">
            <polygon points="95.615,168.402 31.998,124.992 37.782,48.193 
            107.185,14.803 170.804,58.212 165.018,135.012" stroke="#fddb92" stroke-width="3" fill="#e2d1c3" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fef9d7">
            <polygon points="69.486,156.764 29.815,107.018 43.973,44.985 
            101.3,17.378 158.626,44.985 172.785,107.018 133.113,156.764" stroke="#fddb92" stroke-width="3" fill="#e2d1c3" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fef9d7">
            <polygon points="150.035,47.045 124.747,96.676 164.135,136.064 
            109.118,127.351 83.83,176.981 75.116,121.965 20.099,113.251 69.73,87.963 61.017,32.946 100.404,72.334" stroke="#fddb92" stroke-width="3" fill="#e2d1c3" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fef9d7">
            <polygon points="98,18.334 112.643,69.641 164.396,56.668 127.284,95.002 
            164.396,133.336 112.643,120.363 98,171.67 83.358,120.363 31.604,133.336 68.715,95.002 31.604,56.668 83.358,69.641" stroke="#fddb92" stroke-width="3" fill="#e2d1c3" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fef9d7">
            <polygon points="100,13.328 115.113,73.135 171.294,47.661 133.957,96.765 
            188.9,124.807 127.232,126.232 139.565,186.672 100,139.346 60.436,186.672 72.769,126.232 11.1,124.807 66.043,96.765 28.708,47.661 84.888,73.135"
            stroke="#fddb92" stroke-width="3" fill="#e2d1c3" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fef9d7">
            <polygon points="100,9.457 110.687,67.108 153.22,26.749 127.979,79.672 
            186.111,72.021 134.583,100 186.111,127.979 127.979,120.328 153.22,173.25 110.687,132.892 100,190.543 89.313,132.892 46.78,173.25 72.021,120.328 13.889,127.979 65.415, 100 13.889,
            72.021 72.021,79.672 46.78,26.749 89.313,67.108" stroke="#fddb92" stroke-width="3" fill="#e2d1c3" />                       
        </svg>
    </div>
</div>

Sample : line

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

Sample : polyline

<div class="well clearfix">
    <div class="block1">
      <svg width="200" height="200" style="background:#fef9d7">
        <polyline points="30.667,13.333 27,149.333 180.667,179.333" stroke="#fddb92" stroke-width="2" fill="none" />
      </svg>
    </div>
    <div class="block1">
      <svg width="200" height="200" style="background:#fef9d7">
        <polyline points="30.667,13.333 27,149.333 180.667,179.333 177.667,53" stroke="#fddb92" stroke-width="2" fill="none" />
      </svg>
    </div>
    <div class="block1">
      <svg width="200" height="200" style="background:#fef9d7">
        <polyline points="30.667,13.333 27,149.333 180.667,179.333 177.667,53 
        15.333,54.333" stroke="#fddb92" stroke-width="2" fill="none" />
      </svg>
    </div>
    <div class="block1">
      <svg width="200" height="200" style="background:#fef9d7">
        <polyline points="30.667,13.333 27,149.333 180.667,179.333 177.667,53 
        15.333,54.333 112,183" stroke="#fddb92" stroke-width="2" fill="none" />
      </svg>
    </div>
 </div>  

Sample : path

<div class="well clearfix"">
    <div class="block1"">
      <svg width="200" height="200" style="background:#fef9d7"">
        <path d="M15.75,14c0,93.965,75.364,170,168.5,170" stroke="#fddb92" stroke-width="2" fill="none" /">
      </svg">
    </div">
    <div class="block1"">
      <svg width="200" height="200" style="background:#fef9d7"">
        <path d="M180.929,74.822c0,49.662-40.259,89.921-89.921,89.921
        c-39.729,0-71.937-32.207-71.937-71.937c0-31.784,25.766-57.55,57.55-57.55c25.427,0,46.039,20.613,46.039,46.04
        c0,20.341-16.49,36.832-36.832,36.832c-16.272,0-29.465-13.191-29.465-29.465c0-13.019,10.554-23.572,23.572-23.572
        c10.415,0,18.857,8.443,18.857,18.857c0,8.332-6.755,15.086-15.086,15.086c-6.665,0-12.069-5.402-12.069-12.068" stroke="#fddb92" stroke-width="2" fill="none" /">
      </svg">
    </div">
    <div class="block1"">
      <svg width="200" height="200" style="background:#fef9d7"">
        <path d="M109.14,109.902c54.838,102.586-60.123,110.895-16.423,1.188
        c-43.7,109.707-121.871,25.014-11.167-12.1c-110.704,37.113-93.224-76.833,2.497-16.295C-11.674,22.157,88.296-35.208,98.328,74.5
        C88.296-35.208,195.474,7.185,113.64,80.556c81.834-73.371,115.515,36.875,4.812,15.759
        C229.154,117.431,163.978,212.488,109.14,109.902z" stroke="#fddb92" stroke-width="2" fill="none" /">
      </svg">
    </div">
    <div class="block1"">
      <svg width="200" height="200" style="background:#fef9d7"">
        <path d="M129.579,164.915c-26.109-57.299-33.06-57.306-59.25-0.06
        c26.19-57.246,21.862-62.686-36.898-46.361c58.76-16.324,60.313-23.1,13.242-57.754c47.071,34.654,53.337,31.644,53.412-25.655
        c-0.074,57.299,6.186,60.321,53.357,25.761c-47.172,34.561-45.632,41.339,13.128,57.781
        C107.81,102.186,103.47,107.616,129.579,164.915z" stroke="#fddb92" stroke-width="2" fill="none" /">
      </svg">
    </div">
    <div class="block1"">
      <svg width="200" height="200" style="background:#fef9d7"">
        <path d="M100,44.276c0,66.689-1.152,61.024,5.855,28.786
        c-7.008,32.238-10.365,36.944,17.058-23.913c-27.422,60.857-26.172,55.214-6.354,28.676
        c-19.818,26.538-24.799,29.471,25.309-14.908C91.761,107.297,95.2,102.65,124.395,86.531
        c-29.195,16.119-34.938,16.773,29.187-3.324c-64.125,20.098-59.094,17.251-25.566,14.463c-33.528,2.788-39.041,1.049,28.016,8.834
        c-67.056-7.785-61.302-8.339-29.241,2.815c-32.061-11.154-36.391-14.985,22.002,19.466c-58.393-34.451-52.911-32.617-27.857-9.321
        C95.88,96.169,93.483,90.91,133.116,146.194C93.483,90.91,97.745,94.815,111.458,126.35c-13.713-31.535-13.763-37.315,0.255,29.374
        C97.695,89.034,100,94.335,100,128.786c0-34.451,2.305-39.752-11.713,26.938c14.018-66.689,13.968-60.909,0.257-29.374
        c13.711-31.535,17.973-35.44-21.659,19.845c39.632-55.285,37.234-50.025,12.181-26.729c25.053-23.295,30.536-25.129-27.857,9.321
        c58.393-34.451,54.063-30.62,22-19.466c32.063-11.154,37.817-10.601-29.239-2.815c67.056-7.785,61.542-6.046,28.015-8.834
        c33.528,2.788,38.559,5.634-25.566-14.463c64.125,20.098,58.382,19.443,29.186,3.324c29.196,16.119,32.635,20.766-17.473-23.614
        c50.107,44.379,45.127,41.446,25.31,14.908c19.817,26.538,21.068,32.181-6.356-28.676c27.424,60.857,24.067,56.151,17.058,23.913
        C101.152,105.301,100,110.966,100,44.276z" stroke="#fddb92" stroke-width="2" fill="none" /">
      </svg">
    </div">
    <div class="block1"">
      <svg width="200" height="200" style="background:#fef9d7"">
        <path d="M190,100C70,88.965,83.432,80.017,100,159.95
          c16.568-79.934,30-70.985-90-59.95c120,11.036,106.568,19.983,90-59.95C83.432,119.983,70,111.036,190,100z" stroke="#fddb92" stroke-width="2" fill="none" /">
      </svg">
    </div">
    <div class="block1"">
      <svg width="200" height="200" style="background:#fef9d7"">
        <path d="M148.545,115.756c14.658,85.818-61.99,85.818-64.938,0
        c-82.148,0.724-82.148-60.595,0-51.95c-14.072-76.722,34.983-76.722,41.56,0c47.884-22.261,47.884,16.983,0,33.248
        c4.315,27.305-27.08,27.305-26.598,0c-35.337-7.551-35.337-32.667,0-21.278c-7.453-39.273,12.64-39.273,17.023,0
        c17.924-16.966,17.924-0.891,0,13.619c0.079,3.335-12.781,3.335-10.895,0c-16.163-10.941-16.163-21.228,0-8.716
        c-4.741-23.934,3.488-23.934,6.973,0c5.653-14.796,5.652-8.212,0,5.578c-1.657-6.481-6.924-6.481-4.463,0
        c-8.309-12.329-8.309-16.542,0-3.57c-3.631-17.65-0.259-17.65,2.856,0c0.626-13.908,0.626-11.211,0,2.285
        c-2.368-10.502-4.525-10.502-1.828,0c-5.092-12.898-5.092-14.623,0-1.462c-3.176-15.077-1.794-15.077,1.17,0" stroke="#fddb92" stroke-width="2" fill="none" /">
      </svg">
    </div">
    <div class="block1"">
      <svg width="200" height="200" style="background:#fef9d7"">
        <path d="M189.477,132.044
        c-4.507,6.655-18.649,4.617-24.446,9.645c-5.998,5.202-6.043,19.446-13.025,22.828c-7.083,3.431-18.318-5.386-25.995-3.909
        c-7.677,1.478-14.836,13.836-22.686,13.28c-7.739-0.548-13.068-13.757-20.569-16.36c-7.249-2.516-19.623,4.627-26.279,0.121
        c-5.324-3.605-2.114-16.699-6.136-21.336c-4.161-4.798-17.543-3.525-20.249-9.111c-2.745-5.666,6.568-15.404,5.385-21.546
        c-1.182-6.142-13.444-11.727-12.999-18.007c0.438-6.191,13.337-9.976,15.419-15.977c2.013-5.799-5.829-16.765-2.224-22.089
        c2.884-4.259,15.139-0.112,18.849-3.33c3.839-3.329,1.51-16.021,5.979-18.185c4.533-2.196,13.073,7.512,17.987,6.567
        c4.913-0.946,9.239-13.131,14.263-12.775c4.953,0.351,7.503,13,12.303,14.666c4.639,1.61,14.478-6.791,18.738-3.907
        c3.408,2.307-1.49,13.891,1.084,16.859c2.663,3.071,14.803-0.101,16.535,3.474c1.757,3.626-8.268,11.209-7.512,15.139
        c0.757,3.931,12.88,7.249,12.595,11.269c-0.281,3.962-12.731,5.524-14.063,9.364c-1.288,3.712,7.56,12.649,5.252,16.056
        c-1.846,2.726-12.893-2.771-15.267-0.712c-2.457,2.131,1.39,13.829-1.47,15.215c-2.901,1.405-9.717-8.873-12.861-8.268
        c-3.145,0.605-5.657,12.679-8.873,12.452c-3.17-0.224-3.941-12.515-7.013-13.581c-2.969-1.03-11.185,8.175-13.911,6.329
        c-2.181-1.477,3.796-12.094,2.149-13.993c-1.704-1.965-13.05,2.421-14.158,0.133c-1.124-2.321,9.357-8.523,8.873-11.039
        c-0.484-2.516-12.519-4.384-12.337-6.956c0.18-2.536,12.343-2.675,13.196-5.132c0.824-2.375-8.667-10.015-7.191-12.195
        c1.181-1.745,11.455,4.616,12.975,3.298c1.572-1.364-3.246-12.427-1.416-13.313c1.857-0.899,7.568,9.744,9.581,9.356
        c2.012-0.387,3.365-12.39,5.423-12.245c2.029,0.144,1.662,12.205,3.628,12.887c1.9,0.659,9.078-9.061,10.823-7.88
        c1.396,0.945-5.272,10.944-4.218,12.16c1.091,1.258,11.928-3.906,12.637-2.442c0.719,1.485-10.053,6.805-9.744,8.415
        c0.31,1.61,12.288,2.55,12.171,4.196c-0.115,1.623-12.095,0.851-12.64,2.424c-0.528,1.52,9.376,8.329,8.431,9.724
        c-0.756,1.117-10.535-5.797-11.508-4.954c-1.006,0.873,4.434,11.529,3.263,12.096c-1.188,0.576-6.194-10.301-7.482-10.053
        c-1.288,0.248-1.898,12.205-3.215,12.112c-1.298-0.092-0.203-12.006-1.461-12.443c-1.216-0.422-7.729,9.628-8.846,8.872
        c-0.893-0.605,6.217-10.208,5.543-10.986c-0.698-0.805-11.21,4.857-11.664,3.919c-0.46-0.951,10.499-5.705,10.301-6.735
        c-0.198-1.03-12.14-1.376-12.065-2.43c0.074-1.039,11.936,0.316,12.285-0.691c0.338-0.973-9.83-7.25-9.225-8.143" stroke="#fddb92" stroke-width="2" fill="none" /">
      </svg">
    </div">
 </div">

Sample : stroke-linecap / stroke-dasharray

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

Sample : linearGraient

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background:#deecdd">
            <linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#d9afd9"/>
                <stop  offset="1" style="stop-color:#97d9e1"/>
            </linearGradient>
            <circle cx="100" cy="100" r="80" fill="url(#linearGradient1)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#deecdd">
            <linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#d9afd9"/>
                <stop  offset="1" style="stop-color:#97d9e1"/>
            </linearGradient>
            <rect x="30" y="30" width="140" height="140" stroke-width="0" fill="url(#linearGradient1)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#deecdd">
            <linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#d9afd9"/>
                <stop  offset="1" style="stop-color:#97d9e1"/>
            </linearGradient>
            <ellipse cx="100" cy="100" rx="90" ry="20" stroke-width="0" fill="url(#linearGradient1)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#deecdd">
            <linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#d9afd9"/>
                <stop  offset="1" style="stop-color:#97d9e1"/>
            </linearGradient>
            <polygon points="100,9.457 110.687,67.108 153.22,26.749 127.979,79.672 
            186.111,72.021 134.583,100 186.111,127.979 127.979,120.328 153.22,173.25 110.687,132.892 100,190.543 89.313,132.892 46.78,173.25 72.021,120.328 13.889,127.979 65.415, 100 13.889,
            72.021 72.021,79.672 46.78,26.749 89.313,67.108" fill="url(#linearGradient1)" />
        </svg>
    </div>
</div>

Sample : linearGraient

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background:#deecdd">
            <radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#d9afd9"/>
                <stop  offset="1" style="stop-color:#97d9e1"/>
            </radialGradient>
            <circle cx="100" cy="100" r="80" fill="url(#radialGradient1)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#deecdd">
            <radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#d9afd9"/>
                <stop  offset="1" style="stop-color:#97d9e1"/>
            </radialGradient>
            <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:#deecdd">
            <radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#d9afd9"/>
                <stop  offset="1" style="stop-color:#97d9e1"/>
            </radialGradient>
            <ellipse cx="100" cy="100" rx="90" ry="20" stroke-width="0" fill="url(#radialGradient1)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#deecdd">
            <radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#d9afd9"/>
                <stop  offset="1" style="stop-color:#97d9e1"/>
            </radialGradient>
            <polygon points="100,9.457 110.687,67.108 153.22,26.749 127.979,79.672 
            186.111,72.021 134.583,100 186.111,127.979 127.979,120.328 153.22,173.25 110.687,132.892 100,190.543 89.313,132.892 46.78,173.25 72.021,120.328 13.889,127.979 65.415, 100 13.889,
            72.021 72.021,79.672 46.78,26.749 89.313,67.108" fill="url(#radialGradient1)" />
        </svg>
    </div>
</div>

Sample : clip-path

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200">
            <image xlink:href="img01.jpg" width="200" height="200" />    
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200">
            <image xlink:href="img01.jpg" width="200" height="200" clip-path="circle(100px at center)" /> 
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200">
            <clippath id="clip1">
                <polygon points="100,9.457 110.687,67.108 153.22,26.749 127.979,79.672 
                186.111,72.021 134.583,100 186.111,127.979 127.979,120.328 153.22,173.25 110.687,132.892 100,190.543 89.313,132.892 46.78,173.25 72.021,120.328 13.889,127.979 65.415, 100 13.889,
                72.021 72.021,79.672 46.78,26.749 89.313,67.108" />
            </clippath>
            <image xlink:href="img01.jpg" width="200" height="200" clip-path="url(#clip1)" /> 
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200">
            <clippath id="clip2">
                <path d="M109.14,109.902c54.838,102.586-60.123,110.895-16.423,1.188
                c-43.7,109.707-121.871,25.014-11.167-12.1c-110.704,37.113-93.224-76.833,2.497-16.295C-11.674,22.157,88.296-35.208,98.328,74.5
                C88.296-35.208,195.474,7.185,113.64,80.556c81.834-73.371,115.515,36.875,4.812,15.759
                C229.154,117.431,163.978,212.488,109.14,109.902z" />
            </clippath>
            <image xlink:href="img01.jpg" width="200" height="200" clip-path="url(#clip2)" /> 
        </svg>
    </div>
</div>

Sample : clip-path text

CHOHEE
CHOHEE
CHOHEE
<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background:#e9defa; font-family: 'Bangers', cursive;">
            <text x="10" y="120" font-size="70">CHOHEE</text>  
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#e9defa; font-family: 'Bangers', cursive;">
            <a xlink:href="http://choheebaek.com">   
                <text x="10" y="120" font-size="70">CHOHEE</text>
            </a>      
        </svg>
    </div>
    <style>
       .textClip {
            width: 200px; height: 200px; line-height: 200px;
            text-align: center; background: url(ch.jpg);
            background-size:contain; font-size: 50px;
            font-family: 'Bangers', cursive; font-weight: bold;
            background: url(img01.jpg);
            -webkit-text-fill-color : transparent;
            -webkit-background-clip: text;
        }
    </style>
    <div class="block1" style="background:#e9defa";>
        <div class="textClip">
            CHOHEE
        </div>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#e9defa; font-family: 'Bangers', cursive;">
            <pattern id="pattern" patternUnits="userSpaceOnUse" width="200" height="200">
                <image xlink:href="img01.jpg" width="200" height="200" />
            </pattern>
            <text x="10" y="120" font-size="70" fill="url(#pattern)">CHOHEE</text>
        </svg>
    </div>
    </div

Sample : blur

<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>

Sample15 : animation

See the Pen SVG circular progress: CSS animated & Angle gradient by Pouya Saadeghi (پویا صادقی) (@saadeghi) on CodePen.

See the Pen SVG animations with GSAP by Jeremy Fagis (@JeremyFagis) on CodePen.

See the Pen Donut Chart Dial SVG Animation by Ettrics (@ettrics) on CodePen.

See the Pen Svg Stars Experiment by Sasha (@sashatran) on CodePen.

See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.