SVG

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

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

Sample : circle

<div class="well clearfix">
    <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>
</div>

Sample : ellipse

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #e0f7fa">
            <ellipse cx="100" cy="100" rx="90" ry="90" stroke="#00A8C5" stroke-width="5" fill="#FFFF7E" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #e0f7fa  ">
            <ellipse cx="100" cy="100" rx="90" ry="70" stroke="#00A8C5" stroke-width="5" fill="#FFFF7E" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #e0f7fa">
            <ellipse cx="100" cy="100" rx="90" ry="50" stroke="#00A8C5" stroke-width="5" fill="#FFFF7E" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #e0f7fa">
            <ellipse cx="100" cy="100" rx="90" ry="30" stroke="#00A8C5" stroke-width="5" fill="#FFFF7E" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #e0f7fa">
            <ellipse cx="100" cy="100" rx="30" ry="90" stroke="#00A8C5" stroke-width="5" fill="#FFFF7E" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #e0f7fa">
            <ellipse cx="100" cy="100" rx="50" ry="90" stroke="#00A8C5" stroke-width="5" fill="#FFFF7E" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #e0f7fa">
            <ellipse cx="100" cy="100" rx="70" ry="90" stroke="#00A8C5" stroke-width="5" fill="#FFFF7E" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #e0f7fa">
            <ellipse cx="100" cy="100" rx="90" ry="90" stroke="#00A8C5" stroke-width="5" fill="#FFFF7E" />
        </svg>
    </div>
</div>

Sample5 : polygon

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #fff3e0">
           <polygon fill="#FFFFFF" stroke="#ffab91" stroke-miterlimit="10" points="24,102 154.197,28 152,177 "/> 
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fff3e0">
           <polygon fill="#FFFFFF" stroke="#ffab91" stroke-miterlimit="10" points="19,110 62,25 157,40 172.108,134 87,177 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fff3e0">
           <polygon fill="#FFFFFF" stroke="#ffab91" stroke-miterlimit="10" points="155,164 73,181 17,118 44.666,38 126,22 182,85 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fff3e0">
           <polygon fill="#FFFFFF" stroke="#ffab91" stroke-miterlimit="10" points="63,175 18,118 34,47 100,16 165,47 181,118 136,175 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fff3e0">
           <polygon fill="#FFFFFF" stroke="#ffab91" stroke-miterlimit="10" points="119.334,178.667 84.701,137.504 31.158,142.697 59.604,97.039 38.119,47.721 90.333,60.667 130.598,24.993 134.421,78.651 180.791,105.922 130.94,126.14 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fff3e0">
           <polygon fill="#FFFFFF" stroke="#ffab91" stroke-miterlimit="10" points="101.334,18.568 124.842,59.284 171.856,59.284 148.349,100 171.856,140.716 124.842,140.716 101.334,181.432 77.827,140.716 30.812,140.716 54.319,100 30.812,59.284 77.827,59.284 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fff3e0">
           <polygon fill="#FFFFFF" stroke="#ffab91" stroke-miterlimit="10" points="148.667,173.334 114.852,141.425 109.013,187.551 93.899,143.582 67.293,181.711 74.345,135.755 33.067,157.151 60.667,119.736 14.174,119.5 56,99.197 14.943,77.381 61.414,78.841 35.197,40.444 75.667,63.333 70.297,17.15 95.494,56.225 112.202,12.836 116.354,59.145 151.311,28.491 133.467,71.424 178.665,60.527 142.913,90.25 187.999,101.606 142.528,111.31 177.173,142.317 132.401,129.778 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #fff3e0">
           <polygon fill="#FFFFFF" stroke="#ffab91" stroke-miterlimit="10" points="133.667,170 114.689,135.952 124.984,173.548 110.249,137.461 115.937,176.023 105.658,138.423 106.657,177.39 100.986,138.825 97.28,177.628 96.299,138.661 87.943,176.734 91.666,137.933 78.782,174.721 87.154,136.651 69.93,171.619 82.83,134.836 61.516,167.472 78.756,132.513 53.664,162.341 74.992,129.715 46.487,156.302 71.593,126.484 40.091,149.44 68.607,122.866 34.568,141.859 66.08,118.916 30,133.667 64.047,114.689 26.452,124.984 62.539,110.249 23.977,115.937 61.577,105.658 22.61,106.657 61.175,100.986 22.372,97.28 61.339,96.299 23.266,87.943 62.067,91.666 25.279,78.782 63.348,87.154 28.381,69.93 65.164,82.83 32.528,61.516 67.487,78.756 37.659,53.664 70.285,74.992 43.698,46.487 73.516,71.593 50.559,40.091 77.133,68.607 58.141,34.568 81.084,66.08 66.333,30 85.311,64.047 75.016,26.452 89.751,62.539 84.063,23.977 94.341,61.577 93.343,22.61 99.014,61.175 102.72,22.372 103.701,61.339 112.058,23.266 108.334,62.067 121.219,25.279 112.846,63.348 130.07,28.381 117.17,65.164 138.483,32.528 121.244,67.487 146.336,37.659 125.008,70.285 153.513,43.699 128.407,73.516 159.909,50.559 131.393,77.133 165.432,58.141 133.92,81.084 170,66.333 135.952,85.311 173.548,75.016 137.461,89.751 176.023,84.063 138.423,94.341 177.39,93.343 138.825,99.014 177.628,102.72 138.661,103.701 176.734,112.058 137.933,108.334 174.721,121.219 136.651,112.846 171.619,130.07 134.836,117.17 167.472,138.483 132.513,121.244 162.341,146.336 129.715,125.008 156.302,153.513 126.484,128.407 149.44,159.909 122.866,131.393 141.859,165.432 118.916,133.92 "/>
        </svg>
    </div>
</div>

Sample : line

<div class="well clearfix">
    <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>

Sample : polyline

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #ffccbc ">
            <polyline fill="none" stroke="#bf360c " stroke-miterlimit="10" points="51,23 168,29 168,133 74,177 31,108 108,11 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffccbc ">
            <polyline fill="none" stroke="#bf360c " stroke-miterlimit="10" points="168,133 74,177 31,108 108,11 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffccbc ">
            <polyline fill="none" stroke="#bf360c " stroke-miterlimit="10" points="74,177 31,108 108,11 "/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #ffccbc ">
            <polyline fill="none" stroke="#bf360c " stroke-miterlimit="10" points="31,108 108,11 "/>
        </svg>
    </div>
</div>

Sample : path

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: #f8bbd0 ">
            <path fill="none" stroke="#880e4f " stroke-miterlimit="10" d="M28.667,20.667c0,0-41.334,167,154.333,167"/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #f8bbd0 ">
            <path d="M188.876,141.665c-35.899,41.053-98.28,45.232-139.333,9.333
C16.7,122.279,13.358,72.374,42.076,39.531c22.975-26.274,62.899-28.948,89.173-5.973c21.019,18.38,23.159,50.319,4.779,71.339
c-14.704,16.815-40.256,18.527-57.071,3.823c-13.452-11.763-14.822-32.204-3.058-45.657c9.411-10.762,25.764-11.857,36.525-2.447
c8.609,7.528,9.486,20.611,1.957,29.22c-6.023,6.888-16.489,7.589-23.376,1.566c-5.51-4.818-6.071-13.191-1.253-18.701" stroke="#880e4f " stroke-width="2" fill="none" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #f8bbd0 ">
            <path fill="none" stroke="#880e4f " stroke-miterlimit="10" d="M86.327,122.387c-44.595,97.691-115.176,9.187-14.972-18.774
c-100.204,27.961-75.014-82.403,5.343-23.41C-3.659,21.209,98.333-27.908,98.333,69.783c0-97.691,101.993-48.574,21.635,10.419
c80.357-58.993,105.548,51.371,5.343,23.41c100.205,27.961,29.624,116.466-14.972,18.774
C154.936,220.078,41.732,220.078,86.327,122.387z"/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #f8bbd0 ">
            <path fill="none" stroke="#880e4f " stroke-miterlimit="10" d="M57.044,185.76c8.311-24.438-34.42-75.769-31.203-77.009
c-1.546,8.254,19.797-50.408,21.104-68.03c-11.939,6.511,54.834-15.45,45.219-8.677c1.76-2.247,68.054,27.408,53.544,15.366
c28.243,16.02,34.296,84.525,40.479,65.827c-25.151,14.721-44.974,48.697-47.263,69.079
C135.984,182.516,54.341,168.658,57.044,185.76z"/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #f8bbd0 ">
            <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-width="2" fill="none" stroke="#880e4f " />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #f8bbd0 ">
            <path  d="M143,177
c-28,2-58-14-69-41c-14,8-17,28-11,43c-17-22-20-54-6-78c-10-5-22-1-31,5c-4,4-8,7-11,12c9-26,31-48,59-51c-5-17-26-23-43-21
c26-10,58-8,79,13c4-6,4-13,3-20c-1-3-2-6-3-9c-3-7-9-13-14-19c25,14,44,40,44,69c5-1,9-4,13-7c2-2,3-5,5-7c4-8,8-17,7-27
c8,28,0,60-23,79c14,10,34,5,46-6c-17,23-46,38-75,32C112,161,128,173,143,177L143,177z" stroke="#880e4f" stroke-width="2" fill="none" />

        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #f8bbd0 ">
            <path fill="none" stroke="#880e4f " stroke-miterlimit="10" d="M117.039,24.264C-22.56,195.471,42.756,50.841,37.785,149.618
c-49.244,11.333,102.264-91.048,87.016-126.094c0.072,88.868-2.218-50.342,62.215,87.996
C178.487,26.592,16.132,119.834,117.039,24.264z"/>
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: #f8bbd0 ">
            <path fill="none" stroke="#880e4f" stroke-width="2" stroke-miterlimit="10" d="M159.624,159.957
c-6.011,6.012-16.281-18.777-24.782-18.777c-8.499,0-8.499,22-16.998,22c-8.502,0-8.502-22-17.005-22c-8.502,0-8.502,22-17.005,22
c-8.504,0-8.504-22-17.008-22s-18.771,24.791-24.785,18.779c-6.012-6.011,18.777-16.281,18.777-24.782c0-8.499-22-8.499-22-16.998
c0-8.503,22-8.503,22-17.005c0-8.502-22-8.502-22-17.005c0-8.504,22-8.504,22-17.007S36.027,48.391,42.04,42.377
c6.011-6.012,16.281,18.777,24.782,18.777c8.5,0,8.5-22,16.999-22c8.502,0,8.502,22,17.004,22c8.503,0,8.503-22,17.006-22
s8.503,22,17.007,22s18.771-24.792,24.785-18.779c6.012,6.011-18.777,16.281-18.777,24.782c0,8.499,22,8.499,22,16.999
c0,8.502-22,8.502-22,17.004s22,8.502,22,17.005s-24.322,13.029-21.264,20.964C146.521,151.941,165.637,153.942,159.624,159.957z"
/>

        </svg>
    </div>
</div>

Sample : stroke-linecap / stroke-dasharray

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

Sample10 : linearGradient

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background:#d1c4e9 ">
            <linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
              <stop  offset="0" style="stop-color:#8E78FF "/>
                <stop  offset="1" style="stop-color:#FC7D7B"/>
            </linearGradient>
            <circle cx="100" cy="100" r="80" fill="url(#linearGradient1)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#d1c4e9 ">
            <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:#d1c4e9 ">
            <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:#d1c4e9 ">
            <polygon fill="url(#linearGradient1)" stroke-miterlimit="10" points="101.334,18.568 124.842,59.284 171.856,59.284 148.349,100 171.856,140.716 124.842,140.716 101.334,181.432 77.827,140.716 30.812,140.716 54.319,100 30.812,59.284 77.827,59.284 "/>
        </svg>
    </div>
</div>

Sample : radialGradient

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background:#d1c4e9 ">
            <radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
              <stop  offset="0" style="stop-color:#8E78FF "/>
                <stop  offset="1" style="stop-color:#FC7D7B"/>
            </radialGradient>
            <circle cx="100" cy="100" r="80" fill="url(#radialGradient1)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#d1c4e9 ">
            <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:#d1c4e9 ">
            <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:#d1c4e9 ">
            <polygon fill="url(#radialGradient1)" stroke-miterlimit="10" points="101.334,18.568 124.842,59.284 171.856,59.284 148.349,100 171.856,140.716 124.842,140.716 101.334,181.432 77.827,140.716 30.812,140.716 54.319,100 30.812,59.284 77.827,59.284 "/>
        </svg>
    </div>
</div>

Sample : clip-path

<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background: none">
            <image xlink:href="vision2.jpg" width="200" height="200">
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: none ">
            <image xlink:href="vision2.jpg" width="200" height="200" clip-path="circle(100px at center)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: none ">
                <clipPath id="clip1">
                <polygon points="159.643,176.498 104.003,150.94 51.407,182.286 58.52,121.472 12.455,81.136 72.491,69.108 96.618,12.834 126.609,66.214 187.585,71.77 146.085,116.789"/>
            </clipPath>
            <image xlink:href="vision2.jpg" width="200" height="200" clip-path="url(#clip1)" />
        </svg>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background: none ">
                <clipPath id="clip2">
                <path d="M143,177
c-28,2-58-14-69-41c-14,8-17,28-11,43c-17-22-20-54-6-78c-10-5-22-1-31,5c-4,4-8,7-11,12c9-26,31-48,59-51c-5-17-26-23-43-21
c26-10,58-8,79,13c4-6,4-13,3-20c-1-3-2-6-3-9c-3-7-9-13-14-19c25,14,44,40,44,69c5-1,9-4,13-7c2-2,3-5,5-7c4-8,8-17,7-27
c8,28,0,60-23,79c14,10,34,5,46-6c-17,23-46,38-75,32C112,161,128,173,143,177L143,177z" stroke-width="2" fill="none" stroke="#0d47a1" />
            </clipPath>
            <image xlink:href="vision2.jpg" width="200" height="200" clip-path="url(#clip2)" />
        </svg>
    </div>
</div>

Sample : clip-path text

PARK
PARK
PARK
<div class="well clearfix">
    <div class="block1">
        <svg width="200" height="200" style="background:#e3f3fd; font-family: 'Knewave', cursive;" >
        <text x="35" y="120" font-size="50">PARK</text>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#e3f3fd; font-family: 'Knewave', cursive;" >
            <a xlink:href="http://jjgocom.com">
                <text x="35" y="120" font-size="50">PARK</text>
            </a>
        </svg>
    </div>
    <style>
        .textClip {
            width: 200px; height: 200px; line-height: 200px;
            text-align: center;
            background-size:contain;
            font-family: 'Knewave', cursive;
            background: url(vision2.jpg);
            -webkit-text-fill-color : transparent;
            -webkit-background-clip: text;
            font-size: 50px;
        }
    </style>
    <div class="block1">
        <div class="textClip">
            PARK
        </div>
    </div>
    <div class="block1">
        <svg width="200" height="200" style="background:#e3f3fd; font-family: 'Knewave', cursive;" >
            <pattern id="pattern" patternUnits="userSpaceOnUse" width="200" height="200">
                <image xlink:href="vision2.jpg" width="200" height="200" />
            </pattern>
            <text x="35" y="120" font-size="50" fill="url(#pattern)">PARK</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>

Sample : animation

Sample : name

codepen

See the Pen dynamic svg paths by Sandra (@diginhecos) on CodePen.

See the Pen SVG + GSAP gauges by Alex Taietti (@AlexTaietti) on CodePen.

See the Pen SVG Fire 🔥 by Steve Gardner (@steveg3003) on CodePen.

See the Pen SVG Number Animation by Nick Smith (@NinjaCoffee) on CodePen.

See the Pen SVG Jetpack Robot with CSS animations by Rand Seay (@randseay) on CodePen.