본문 바로가기
svg

svg animation ; transform-box:fill-box

by peach1227 2023. 10. 22.
<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  (1) 2023.10.22
svg animations; <g> tag <use> tag  (1) 2023.10.21
svg path skewX ; one wheel  (0) 2023.10.20