본문 바로가기
svg

svg path skewX ; one wheel

by peach1227 2023. 10. 20.
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs></defs>
  <path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" d="M 132.319 282.787 L 387.002 282.787"></path>
  <g>
    <path d="M 253.513 228.044 C 253.513 258.601 228.48 283.372 197.6 283.372 C 166.72 283.372 141.687 258.601 141.687 228.044 C 141.687 197.487 166.72 172.716 197.6 172.716 C 228.48 172.716 253.513 197.487 253.513 228.044 Z M 243.086 229.508 C 243.086 254.17 222.746 274.163 197.655 274.163 C 172.565 274.163 152.225 254.17 152.225 229.508 C 152.225 204.847 172.565 184.854 197.655 184.854 C 222.746 184.854 243.086 204.847 243.086 229.508 Z M 207.845 227.752 C 207.845 232.602 203.782 236.534 198.77 236.534 C 193.758 236.534 189.695 232.602 189.695 227.752 C 189.695 222.902 193.758 218.97 198.77 218.97 C 203.782 218.97 207.845 222.902 207.845 227.752 Z M 196.136 225.995 L 203.764 225.995 L 203.764 237.645 L 225.996 237.645 L 225.996 243.872 L 196.136 243.872 L 196.136 225.995 Z M 198.478 224.824 L 201.405 93.091" style="transform-origin: 50% 0%; fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); transform-box: fill-box;">
      <animateTransform type="skewX" additive="sum" attributeName="transform" values="-20; 20" begin="0s" dur="2s" fill="freeze" repeatCount="indefinite"></animateTransform>
    </path>
  </g>
</svg>
반응형