본문 바로가기
svg

svg text animation ; spiral

by peach1227 2023. 10. 13.

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
  <defs></defs>
  <path d="M 232.728 233.899 Q 232.728 232.653 233.862 231.934 Q 235.074 231.167 236.658 231.63 Q 238.418 232.146 239.534 233.899 Q 240.788 235.869 240.587 238.436 Q 240.362 241.308 238.4 243.723 Q 236.226 246.398 232.728 247.511 Q 228.892 248.732 224.787 247.652 Q 220.328 246.479 217.01 242.974 Q 213.433 239.196 212.309 233.899 Q 211.106 228.228 213.08 222.555 Q 215.182 216.517 220.25 212.287 Q 225.618 207.806 232.728 206.674 Q 240.226 205.481 247.475 208.357 Q 255.091 211.379 260.235 218.018 Q 265.622 224.971 266.759 233.899 Q 267.946 243.223 264.164 252.049 Q 260.225 261.243 252.012 267.3 Q 243.476 273.596 232.728 274.736 Q 221.58 275.919 211.175 271.23 Q 200.403 266.375 193.433 256.586 Q 186.228 246.469 185.085 233.899 Q 183.905 220.927 189.503 208.943 Q 195.272 196.593 206.638 188.709 Q 218.336 180.595 232.728 179.45 Q 247.524 178.272 261.087 184.78 Q 275.016 191.463 283.812 204.406 Q 292.837 217.684 293.983 233.899 Q 295.159 250.519 287.742 265.661 Q 280.145 281.168 265.624 290.877 Q 250.766 300.812 232.728 301.961 Q 214.285 303.135 197.563 294.807 Q 180.477 286.298 169.855 270.199 Q 159.01 253.76 157.86 233.899 Q 156.687 213.632 165.926 195.331 Q 175.348 176.666 193.025 165.132 Q 211.044 153.375 232.728 152.225 Q 231.868 152.271 232.728 152.225" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);" bx:shape="spiral 232.728 233.899 0 81.674 0 1080 1@d44e08d5"></path>
  <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 16.4px;" x="0" y="0">go!<animateMotion path="M 232.728 233.899 Q 232.728 232.653 233.862 231.934 Q 235.074 231.167 236.658 231.63 Q 238.418 232.146 239.534 233.899 Q 240.788 235.869 240.587 238.436 Q 240.362 241.308 238.4 243.723 Q 236.226 246.398 232.728 247.511 Q 228.892 248.732 224.787 247.652 Q 220.328 246.479 217.01 242.974 Q 213.433 239.196 212.309 233.899 Q 211.106 228.228 213.08 222.555 Q 215.182 216.517 220.25 212.287 Q 225.618 207.806 232.728 206.674 Q 240.226 205.481 247.475 208.357 Q 255.091 211.379 260.235 218.018 Q 265.622 224.971 266.759 233.899 Q 267.946 243.223 264.164 252.049 Q 260.225 261.243 252.012 267.3 Q 243.476 273.596 232.728 274.736 Q 221.58 275.919 211.175 271.23 Q 200.403 266.375 193.433 256.586 Q 186.228 246.469 185.085 233.899 Q 183.905 220.927 189.503 208.943 Q 195.272 196.593 206.638 188.709 Q 218.336 180.595 232.728 179.45 Q 247.524 178.272 261.087 184.78 Q 275.016 191.463 283.812 204.406 Q 292.837 217.684 293.983 233.899 Q 295.159 250.519 287.742 265.661 Q 280.145 281.168 265.624 290.877 Q 250.766 300.812 232.728 301.961 Q 214.285 303.135 197.563 294.807 Q 180.477 286.298 169.855 270.199 Q 159.01 253.76 157.86 233.899 Q 156.687 213.632 165.926 195.331 Q 175.348 176.666 193.025 165.132 Q 211.044 153.375 232.728 152.225 Q 231.868 152.271 232.728 152.225" calcMode="linear" begin="0s" dur="2s" repeatCount="indefinite" fill="freeze"></animateMotion></text>
</svg>

go!
반응형