<svg viewBox="0 0 200 200">
<g transform="translate(0,-50)">
<path d="" fill="#1da2d8">
<animate attributeName="d" values="
M 50,100 C60,100 70,100 80,100C90,100 100,100 110,100Z;
M 50 100 C 60 97 70 104 80 100 C 90 98 100 104 110 100 Z;
M 50,100 C60,100 70,100 80,100C90,100 100,100 110,100Z;
" begin="0" dur="3s" repeatCount="indefinite"/>
</path>
</g>
<g transform="" style="transform:translate(0,-45px) skewY(3deg);transform-origin:50%;transform-box:fill-box;">
<path d="" fill="#1da2d8">
<animate attributeName="d" values="
M 50,100 C60,100 70,100 80,100C90,100 100,100 110,100Z;
M 50 100 C 60 97 70 104 80 100 C 90 98 100 104 110 100 Z;
M 50,100 C60,100 70,100 80,100C90,100 100,100 110,100Z;
" begin="0" dur="3s" repeatCount="indefinite"/>
</path>
</g>
<g transform="" style="transform:translate(0,-40px) skewY(5deg);transform-origin:50%;transform-box:fill-box;">
<path d="" fill="#1da2d8">
<animate attributeName="d" values="
M 50,100 C60,100 70,100 80,100C90,100 100,100 110,100Z;
M 50 100 C 60 97 70 104 80 100 C 90 98 100 104 110 100 Z;
M 50,100 C60,100 70,100 80,100C90,100 100,100 110,100Z;
" begin="0" dur="3s" repeatCount="indefinite"/>
</path>
</g>
</svg>
반응형
'svg' 카테고리의 다른 글
| svg writing effect ; path d attribute, mask, inherit value, ... (0) | 2023.10.26 |
|---|---|
| svg animation; path element morphing --- ex.star (1) | 2023.10.24 |
| svg animation ; transform-box:fill-box (0) | 2023.10.22 |
| svg animation : href attribute vs parentElement (2) | 2023.10.22 |
| svg animations; <g> tag <use> tag (1) | 2023.10.21 |
