본문 바로가기
svg

svg view tag with animation

by peach1227 2023. 10. 15.
<svg viewBox="14.051 -3.513 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
  <defs>
    <view id="view-1" viewBox="63.559 17.542 129.4 134.1">
      <title>View 1</title>
    </view>
    <view id="view-2" viewBox="283.372 25.753 130.515 134.045">
      <title>View 2</title>
    </view>
    <view id="view-3" viewBox="62.974 221.942 130.6 147">
      <title>View 3</title>
    </view>
    <view id="view-4" viewBox="277.517 224.827 136.4 140.5">
      <title>View 4</title>
    </view>
    <linearGradient gradientUnits="userSpaceOnUse" x1="125.353" y1="289.813" x2="125.353" y2="307.963" id="gradient-0" spreadMethod="repeat" gradientTransform="matrix(2.436446, -2.503714, 0.465961, 0.453442, -311.851784, 480.996587)">
      <stop offset="0" style="stop-color: rgb(59, 106, 59);">
        <animate attributeName="stop-color" values="rgb(59, 106, 59); rgb(59, 106, 59)" begin="19s" dur="2s" fill="freeze"></animate>
      </stop>
      <stop offset="1" style="stop-color: rgb(74, 12, 17);"></stop>
    </linearGradient>
    <linearGradient id="gradient-1">
      <stop offset="0" style="stop-color: #12c2e9;"></stop>
      <stop offset="0.5" style="stop-color: #c471ed;"></stop>
      <stop offset="1" style="stop-color: #f64f59;"></stop>
    </linearGradient>
  </defs>
  <path style="stroke: rgb(0, 0, 0); fill: rgb(29, 150, 35);" d="M 75.527 62.646 L 98.946 46.838 L 111.241 64.988 L 133.489 47.424 L 146.956 69.087 C 146.956 69.087 163.934 49.18 163.934 48.595 C 163.934 48.01 175.059 64.403 175.059 64.403"></path>
  <path style="stroke: rgb(0, 0, 0); fill: rgb(63, 80, 143);" d="M 72.014 122.951 L 89.578 101.874 L 107.728 124.122 L 122.365 98.361 C 122.365 98.361 135.246 119.438 135.246 120.023 C 135.246 120.023 148.712 83.138 157.494 96.019 C 157.494 96.019 157.494 141.686 170.375 124.707 C 170.375 124.707 167.447 91.92 179.742 93.091 L 184.426 118.267"></path>
  <rect x="303.864" y="242.974" width="40.398" height="33.372" style="stroke: rgb(0, 0, 0); fill: rgb(37, 209, 80);"></rect>
  <ellipse style="stroke: rgb(0, 0, 0); fill: rgb(209, 38, 38);" cx="357.143" cy="307.377" rx="24.59" ry="21.663"></ellipse>
  <path d="M 312.353 314.988 L 329.039 352.459 L 295.667 352.459 L 312.353 314.988 Z" style="stroke: rgb(0, 0, 0); fill: rgb(86, 56, 176);" bx:shape="triangle 295.667 314.988 33.372 37.471 0.5 0 1@b8837e66"></path>
  <path style="stroke: rgb(0, 0, 0); fill: rgb(122, 128, 195);" d="M 311.475 59.133 C 322.02 56.497 338.6 63.225 341.92 73.185 C 343.21 77.054 341.545 83.199 340.164 86.651 C 339.51 88.285 338.923 89.204 338.408 90.749 C 338.132 91.577 336.364 93.091 337.237 93.091 C 340.483 93.091 346.946 89.711 349.532 88.993 C 355.417 87.358 362.158 86.651 368.267 86.651 C 368.664 86.651 375.642 85.829 376.464 86.651 C 376.972 87.16 376.464 91.191 376.464 91.92 C 376.464 99.418 373.826 104.593 366.511 107.728 C 366.117 107.897 360.07 111.827 360.07 111.827 C 360.07 111.827 369.389 111.351 370.023 111.827 C 378.199 117.959 378.827 127.154 380.562 135.831 C 380.658 136.313 381.891 140.109 381.148 141.101 C 377.787 145.581 371.698 143.302 367.096 144.028 C 356.724 145.666 329.625 155.069 329.625 137.002"></path>
  <text style="fill: url(#gradient-1); font-family: Arial, sans-serif; font-size: 16.4px; white-space: pre; transform-box: fill-box; transform-origin: 34.0173px 9.07494px;" x="91.921" y="304.45" transform="matrix(1.389216, 0, 0, 3.989966, 1.530489, -24.973978)"><animateTransform type="scale" additive="sum" attributeName="transform" values="1; 1.5" begin="0s" dur="2s" fill="freeze" repeatCount="10"></animateTransform>we are ...</text>
</svg>
View 1 View 2 View 3 View 4 we are ...
반응형

'svg' 카테고리의 다른 글

svg radialGradient gradientTransform : skewX  (0) 2023.10.17
svg rect linearGradient spreadMethod  (0) 2023.10.17
svg animate tag ; rectangle to morph  (0) 2023.10.15
svg view tag ; zoom in /out  (0) 2023.10.14
svg text animation ; spiral  (0) 2023.10.13