<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient gradientUnits="userSpaceOnUse" x1="50" y1="5" x2="50" y2="95" id="gradient-1"> <stop offset="0" style="stop-color: rgb(207, 207, 45);"></stop> <stop offset="1" style="stop-color: rgb(165, 132, 132);"></stop> </linearGradient> <radialGradient gradientUnits="userSpaceOnUse" cx="50.433" cy="48.901" r="43.519" id="gradient-0"> <stop offset="0" style="stop-color: rgb(181, 184, 39);"></stop> <stop offset="1" style="stop-color: rgb(132, 160, 20);"></stop> </radialGradient> </defs> <g transform="matrix(1.580796, 0, 0, 1.580796, 138.365417, 122.820732)"> <defs></defs> <ellipse style="stroke: rgb(0, 0, 0); fill: url(#gradient-0);" cx="50.433" cy="48.901" rx="43.519" ry="40.85"></ellipse> <path d="m50 5c-24.813 0-45 20.187-45 45s20.187 45 45 45c24.814 0 45-20.188 45-45 0-24.813-20.186-45-45-45zm0 84.204c-21.617 0-39.204-17.587-39.204-39.204s17.586-39.204 39.204-39.204c21.619 0 39.205 17.587 39.205 39.204s-17.587 39.204-39.205 39.204z" style="fill: url(#gradient-1);"></path> <ellipse cx="36.997" cy="36.301" rx="7.462" ry="11.592" style="transform-box: fill-box; transform-origin: 50% 50%;"> <animateTransform type="skewX" additive="sum" attributeName="transform" values="0; 20;0" begin="0.2s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </ellipse> <ellipse cx="63.063" cy="36.301" rx="7.463" ry="11.592" style="transform-box: fill-box; transform-origin: 50% 50%;"> <animateTransform type="skewX" additive="sum" attributeName="transform" values="0; -20;0" begin="0.13s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </ellipse> <path d="m71.91 59.738c-1.363-0.838-3.146-0.41-3.985 0.953-3.698 6.025-10.505 9.771-17.764 9.771-7.447 0-14.341-3.89-17.992-10.153-0.805-1.382-2.58-1.852-3.963-1.043-1.382 0.805-1.851 2.579-1.044 3.963 4.685 8.037 13.497 13.03 22.999 13.03 9.259 0 17.959-4.803 22.704-12.534 0.837-1.366 0.408-3.15-0.955-3.987z" style="transform-box: fill-box; transform-origin: 50% 50%;"> <animateTransform type="scale" additive="sum" attributeName="transform" values="1; 1.2;1" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform> </path> </g> </svg>
반응형
'svg' 카테고리의 다른 글
svg animation; path element morphing --- ex.star (1) | 2023.10.24 |
---|---|
svg animation ; values attribute (0) | 2023.10.24 |
svg animation : href attribute vs parentElement (2) | 2023.10.22 |
svg animations; <g> tag <use> tag (1) | 2023.10.21 |
svg path skewX ; one wheel (0) | 2023.10.20 |