[SVG]

Path Animation

정의(Definition)

Path Animation

1. Rect Animation

SVG를 이용한 Rect Animation입니다.

Sample1

HTML

<div class="svgBox">
    <svg class="svg">
        <path class="aniPath1" d="M25.333,143C25.333,75.014,78.409,20,144,20"></path>
    </svg>
    <svg class="svg">
        <path class="aniPath2" d="M148,102.666c-22.275,33.321-67.345,42.275-100.666,20
c-26.657-17.82-33.82-53.876-16-80.533c14.256-21.326,43.101-27.056,64.426-12.8C112.82,40.738,117.405,63.814,106,80.874
c-9.124,13.648-27.584,17.316-41.232,8.192c-10.919-7.3-13.853-22.068-6.554-32.986c5.839-8.735,17.654-11.083,26.39-5.243
c6.987,4.672,8.865,14.124,4.193,21.111c-3.736,5.59-11.298,7.093-16.889,3.355c-4.472-2.99-5.674-9.039-2.685-13.511
c2.392-3.578,7.231-4.539,10.809-2.147c2.862,1.914,3.631,5.785,1.717,8.647c-1.53,2.29-4.627,2.905-6.917,1.375"></path>
    </svg>
    <svg class="svg">
        <path class="aniPath3" d="M102.919,116.293c9.027,12.951-12.605,22.414-15.988,6.994
        c3.383,15.42-20.224,15.884-17.449,0.343c-2.775,15.541-24.762,6.935-16.251-6.36c-8.511,13.295-25.531-3.067-12.58-12.095
        c-12.951,9.027-22.414-12.606-6.995-15.989c-15.419,3.383-15.882-20.224-0.342-17.448c-15.54-2.775-6.936-24.762,6.36-16.251
        c-13.296-8.511,3.069-25.532,12.095-12.581c-9.026-12.951,12.606-22.413,15.989-6.994c-3.383-15.419,20.224-15.883,17.448-0.343
        c2.775-15.54,24.762-6.936,16.252,6.36c8.51-13.296,25.531,3.069,12.58,12.095c12.951-9.026,22.413,12.605,6.993,15.989
        c15.42-3.384,15.884,20.223,0.343,17.448c15.541,2.775,6.936,24.764-6.359,16.252C128.31,112.225,111.946,129.244,102.919,116.293z"></path>
    </svg>
    <svg class="svg">
        <path class="aniPath4" d="M122.041,127.017C86.666,88.757,81.826,91.463,95.66,141.77
c-13.834-50.307-19.376-50.159-30.215,0.806c10.839-50.965,5.863-53.41-27.128-13.33c32.991-40.08,29.721-44.558-17.826-24.411
c47.547-20.146,46.732-25.63-4.44-29.897c51.173,4.267,53-0.968,9.962-28.537c43.038,27.569,47.089,23.783,22.083-20.639
c25.006,44.422,30.352,42.952,29.146-8.012c1.206,50.964,6.623,52.147,29.529,6.45c-22.906,45.697-18.659,49.262,23.151,19.434
C88.111,73.462,90.214,78.591,141.387,71.6c-51.173,6.991-51.694,12.511-2.843,30.093C89.692,84.111,86.666,88.757,122.041,127.017z"></path>
    </svg>
    <svg class="svg">
        <path class="aniPath5" d="M80.502,78.485c68.33,63.696,30.986,87.844-0.188,0.122
c31.174,87.723-13.115,91.751-0.223,0.02c-12.893,91.731-53.98,74.717-0.207-0.085c-53.773,74.803-82.248,40.643-0.143-0.171
c-82.104,40.814-91.442-2.667-0.047-0.219c-91.396-2.448-79.457-45.288,0.06-0.215C0.239,32.863,30.717,0.479,79.909,77.773
C30.717,0.479,72.755-14.031,80.12,77.7c-7.364-91.731,36.602-85.043,0.221,0.034c36.381-85.077,72.203-58.724,0.18,0.132
c72.023-58.856,91.494-18.874,0.098,0.201c91.396-19.074,90.056,25.377-0.007,0.224C170.675,103.444,148.832,142.181,80.502,78.485z"></path>
    </svg>
</div>

CSS

.svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
.aniPath1 {
    fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
    animation: path1 2s infinite linear alternate; 
    stroke-dasharray: 189;
    stroke-dashoffset: 189;
}
.aniPath2 {
    fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
    animation: path2 2s infinite linear alternate; 
    stroke-dasharray: 538;
    stroke-dashoffset: 538;
}
.aniPath3 {
    fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
    animation: path3 2s infinite linear alternate; 
    stroke-dasharray: 541;
    stroke-dashoffset: 541;
}
.aniPath4 {
    fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
    animation: path4 2s infinite linear alternate; 
    stroke-dasharray: 1079;
    stroke-dashoffset: 1079;
}
.aniPath5 {
    fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
    animation: path5 2s infinite linear alternate; 
    stroke-dasharray: 1820;
    stroke-dashoffset: 1820;
}
@keyframes path1 {
    0% {stroke-dashoffset: 189;}
    100% {stroke-dashoffset: 0;}
}
@keyframes path2 {
    0% {stroke-dashoffset: 538;}
    100% {stroke-dashoffset: 0;}
}
@keyframes path3 {
    0% {stroke-dashoffset: 541;}
    100% {stroke-dashoffset: 0;}
}
@keyframes path4 {
    0% {stroke-dashoffset: 1079;}
    100% {stroke-dashoffset: 0;}
}
@keyframes path5 {
    0% {stroke-dashoffset: 1820;}
    100% {stroke-dashoffset: 0;}
}

TOTAL

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG</title>
    <style>
        .svgBox .svg {width: 160px; height: 160px; background: #ffebee;}
        .aniPath1 {
            fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
            animation: path1 2s infinite linear alternate; 
            stroke-dasharray: 189;
            stroke-dashoffset: 189;
        }
        .aniPath2 {
            fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
            animation: path2 2s infinite linear alternate; 
            stroke-dasharray: 538;
            stroke-dashoffset: 538;
        }
        .aniPath3 {
            fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
            animation: path3 2s infinite linear alternate; 
            stroke-dasharray: 541;
            stroke-dashoffset: 541;
        }
        .aniPath4 {
            fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
            animation: path4 2s infinite linear alternate; 
            stroke-dasharray: 1079;
            stroke-dashoffset: 1079;
        }
        .aniPath5 {
            fill: none; stroke: #0d47a1; stroke-width: 2; stroke-linecap: round;
            animation: path5 2s infinite linear alternate; 
            stroke-dasharray: 1820;
            stroke-dashoffset: 1820;
        }
        @keyframes path1 {
            0% {stroke-dashoffset: 189;}
            100% {stroke-dashoffset: 0;}
        }
        @keyframes path2 {
            0% {stroke-dashoffset: 538;}
            100% {stroke-dashoffset: 0;}
        }
        @keyframes path3 {
            0% {stroke-dashoffset: 541;}
            100% {stroke-dashoffset: 0;}
        }
        @keyframes path4 {
            0% {stroke-dashoffset: 1079;}
            100% {stroke-dashoffset: 0;}
        }
        @keyframes path5 {
            0% {stroke-dashoffset: 1820;}
            100% {stroke-dashoffset: 0;}
        }
    </style>
</head>
<body>
    <div class="svgBox">
        <svg class="svg">
            <path class="aniPath1" d="M25.333,143C25.333,75.014,78.409,20,144,20"></path>
        </svg>
        <svg class="svg">
            <path class="aniPath2" d="M148,102.666c-22.275,33.321-67.345,42.275-100.666,20
c-26.657-17.82-33.82-53.876-16-80.533c14.256-21.326,43.101-27.056,64.426-12.8C112.82,40.738,117.405,63.814,106,80.874
c-9.124,13.648-27.584,17.316-41.232,8.192c-10.919-7.3-13.853-22.068-6.554-32.986c5.839-8.735,17.654-11.083,26.39-5.243
c6.987,4.672,8.865,14.124,4.193,21.111c-3.736,5.59-11.298,7.093-16.889,3.355c-4.472-2.99-5.674-9.039-2.685-13.511
c2.392-3.578,7.231-4.539,10.809-2.147c2.862,1.914,3.631,5.785,1.717,8.647c-1.53,2.29-4.627,2.905-6.917,1.375"></path>
        </svg>
        <svg class="svg">
            <path class="aniPath3" d="M102.919,116.293c9.027,12.951-12.605,22.414-15.988,6.994
            c3.383,15.42-20.224,15.884-17.449,0.343c-2.775,15.541-24.762,6.935-16.251-6.36c-8.511,13.295-25.531-3.067-12.58-12.095
            c-12.951,9.027-22.414-12.606-6.995-15.989c-15.419,3.383-15.882-20.224-0.342-17.448c-15.54-2.775-6.936-24.762,6.36-16.251
            c-13.296-8.511,3.069-25.532,12.095-12.581c-9.026-12.951,12.606-22.413,15.989-6.994c-3.383-15.419,20.224-15.883,17.448-0.343
            c2.775-15.54,24.762-6.936,16.252,6.36c8.51-13.296,25.531,3.069,12.58,12.095c12.951-9.026,22.413,12.605,6.993,15.989
            c15.42-3.384,15.884,20.223,0.343,17.448c15.541,2.775,6.936,24.764-6.359,16.252C128.31,112.225,111.946,129.244,102.919,116.293z"></path>
        </svg>
        <svg class="svg">
            <path class="aniPath4" d="M122.041,127.017C86.666,88.757,81.826,91.463,95.66,141.77
c-13.834-50.307-19.376-50.159-30.215,0.806c10.839-50.965,5.863-53.41-27.128-13.33c32.991-40.08,29.721-44.558-17.826-24.411
c47.547-20.146,46.732-25.63-4.44-29.897c51.173,4.267,53-0.968,9.962-28.537c43.038,27.569,47.089,23.783,22.083-20.639
c25.006,44.422,30.352,42.952,29.146-8.012c1.206,50.964,6.623,52.147,29.529,6.45c-22.906,45.697-18.659,49.262,23.151,19.434
C88.111,73.462,90.214,78.591,141.387,71.6c-51.173,6.991-51.694,12.511-2.843,30.093C89.692,84.111,86.666,88.757,122.041,127.017z"></path>
        </svg>
        <svg class="svg">
            <path class="aniPath5" d="M80.502,78.485c68.33,63.696,30.986,87.844-0.188,0.122
c31.174,87.723-13.115,91.751-0.223,0.02c-12.893,91.731-53.98,74.717-0.207-0.085c-53.773,74.803-82.248,40.643-0.143-0.171
c-82.104,40.814-91.442-2.667-0.047-0.219c-91.396-2.448-79.457-45.288,0.06-0.215C0.239,32.863,30.717,0.479,79.909,77.773
C30.717,0.479,72.755-14.031,80.12,77.7c-7.364-91.731,36.602-85.043,0.221,0.034c36.381-85.077,72.203-58.724,0.18,0.132
c72.023-58.856,91.494-18.874,0.098,0.201c91.396-19.074,90.056,25.377-0.007,0.224C170.675,103.444,148.832,142.181,80.502,78.485z"></path>
        </svg>
    </div>
</body>
</html>

호환성(Compatibility) 더보기 caniuse.com

						6	7	8	9	10	11
<view>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능