Power Apps でのSVG 表現メモ

はじめに

この記事は自身への備忘録やコピペ用に作成した記事です。

Power Apps でSVG を用いて図形を描画する際のサンプルコードを列挙します。
解説などは行いません。

Power Apps のと記載しましたが、もちろんSVG を記載するうえで参考になる部分はあると思います。

SVG のリファレンスに関してはこちらをご確認ください。

developer.mozilla.org

SVG

円

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>      
        <circle cx='50' cy='50' r='50' fill='black'/>
    </svg>"
)

四角

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
      <rect x='10' y='10' width='100' height='100'/>
    </svg>"
)

四角⇔円に変化するアニメーション

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
      <rect width='100' height='100'>
        <animate attributeName='rx' values='0;100;0;' dur='5s' repeatCount='indefinite' />
      </rect>
    </svg>"
)

円の大きさが変化するアニメーション

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <circle cx='50' cy='50' fill='black'>
            <animate attributeName='r' values='0;50;0;' dur='5s' repeatCount='indefinite' />
        </circle>
    </svg>"
)

四角形の幅が変化するアニメーション

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <rect height='100'>
            <animate attributeName='width' values='0;100;0;' dur='5s' repeatCount='indefinite' />
        </rect>
    </svg>"
)

四角形の高さが変化するアニメーション

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <rect width='100'>
            <animate attributeName='height' values='0;100;0;' dur='5s' repeatCount='indefinite' />
        </rect>
    </svg>"
)

四角形の幅と高さが変化するアニメーション

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <rect width='100' height='100'>
            <animate attributeName='width' values='0;100;0;' dur='5s' repeatCount='indefinite' />
            <animate attributeName='height' values='0;100;0;' dur='5s' repeatCount='indefinite' />
      </rect>
    </svg>"
)

ひし形

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
          <polygon points='50 10, 90 50, 50 90, 10 50' fill='#99f' />
    </svg>"
)

楕円

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <ellipse cx='50' cy='50' rx='30' ry='18' stroke='black' fill='#fff' stroke-width='2' />
    </svg>"
)

トライアングル

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <path d='M 5 70 L 50 25 L 95 70 L 60 70' stroke='black' fill='transparent' stroke-width='2' />
    </svg>"
)

モーションパスに沿って移動するアニメーション

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg width='120' height='120' viewBox='0 0 120 120'
    xmlns='http://www.w3.org/2000/svg' version='1.1'
    xmlns:xlink='http://www.w3.org/1999/xlink'>

  <!-- Draw the outline of the motion path in grey, along
       with 2 small circles at key points -->
  <path d='M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110'
      stroke='lightgrey' stroke-width='2' 
      fill='none' id='theMotionPath'/>
  <circle cx='10' cy='110' r='3' fill='lightgrey'  />
  <circle cx='110' cy='10' r='3' fill='lightgrey'  />

  <!-- Red circle which will be moved along the motion path. -->
  <circle cx='' cy='' r='5' fill='red'>

    <!-- Define the motion path animation -->
    <animateMotion dur='6s' repeatCount='indefinite'>
      <mpath xlink:href='#theMotionPath'/>
    </animateMotion>
  </circle>
</svg>"
)

回転する三角形

"data:image/svg+xml,"& 
EncodeUrl(
    "<?xml version='1.0'?>
<svg width='120' height='120'  viewBox='0 0 120 120'
     xmlns='http://www.w3.org/2000/svg' version='1.1'
     xmlns:xlink='http://www.w3.org/1999/xlink' >

    <polygon points='60,30 90,90 30,90'>
        <animateTransform attributeName='transform'
                          attributeType='XML'
                          type='rotate'
                          from='0 60 70'
                          to='360 60 70'
                          dur='10s'
                          repeatCount='indefinite'/>
    </polygon>
</svg>"
)

動く四角形

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
      <rect x='0' y='0' width='" & Self.Height & "' height='" & Self.Height & "' fill='black'>
        <animate attributeName='x' from='-100' to='" & Self.Width & "' dur='4s' repeatCount='indefinite' />
      </rect>
    </svg>"
)

格子上の模様をつける

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 230 100' xmlns='http://www.w3.org/2000/svg'>
  <defs>
    <pattern id='grid' viewBox='0,0,10,10' width='10%' height='10%'>
      <polygon points='0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2'/>
    </pattern>
  </defs>

  <circle cx='50'  cy='50' r='50' fill='url(#grid)'/>
  <circle cx='180' cy='50' r='40' fill='none' stroke-width='20' stroke='url(#grid)'/>
</svg>"
)

ハート

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
  <path d='M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z'/>
</svg>"
)

マスク

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'> 
  <mask id='myMask'>
    <!-- Everything under a white pixel will be visible -->
    <rect x='0' y='0' width='100' height='100' fill='white' />

    <!-- Everything under a black pixel will be invisible -->
    <path d='M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z' fill='black' />
  </mask>
 
  <polygon points='-10,110 110,110 110,-10' fill='orange' />

  <!-- with this mask applied, we 'punch' a heart shape hole into the circle -->
  <circle cx='50' cy='50' r='50' mask='url(#myMask)' />
</svg>"
)

ぼかす

"data:image/svg+xml,"& 
EncodeUrl(
"<svg viewBox='0 0 "&Self.Width&" "&Self.Height&"' xmlns='http://www.w3.org/2000/svg'>       
<defs>
    <filter id='blur'>
        <feGaussianBlur stdDeviation='5'/>
    </filter>
 </defs>
 
 <circle cx='50' cy='50' r='50' fill='blue'  filter='url(#blur)'/>
</svg>"
)

影をつける

"data:image/svg+xml,"& 
EncodeUrl(
"<svg viewBox='0 0 "&Self.Width&" "&Self.Height&"' xmlns='http://www.w3.org/2000/svg'>       
    <defs>
        <filter id='shadow'>
            <feDropShadow dx='10' dy='10' stdDeviation='5'/>
        </filter>
    </defs>
 
    <circle cx='50' cy='50' r='50' fill='blue' filter='url(#shadow)'/>
</svg>"
)

回転する星

"data:image/svg+xml,"& 
EncodeUrl(
"<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
    <polygon id='myPoly' fill='#FFF000' stroke='#FF0000' points='72.278,58.394 78.338,91.04 48.74,75.993 19.565,91.844 24.729,59.045 0.639,36.196 33.428,30.972 47.715,1 62.814,30.57 95.734,34.895 ' transform='rotation'>
    
    <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='360 50 50'
                      to='0 50 50'
                      repeatCount='indefinite' />
    </polygon>
</svg>"
)

渦巻

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
        <path d='m 71.815483,79.375008 c 0.379024,4.661976 -6.097254,2.810971 -7.748511,0.629963 -4.474806,-5.910399 0.64058,-13.727975 6.488585,-16.126986 10.460708,-4.291269 21.500027,3.544086 24.505461,13.607133 C 99.471613,92.253044 88.608573,106.89197 74.335336,110.36905 55.311355,115.00345 36.969959,101.01106 33.072925,82.524823 28.168906,59.261785 45.334033,37.175352 68.035704,32.883938 95.530469,27.686461 121.38386,48.046561 126.05506,74.965266 131.55991,106.68803 107.99196,136.32124 76.855188,141.3631 40.906556,147.18413 7.4853081,120.4002 2.0788793,85.044676 -4.0642488,44.871487 25.941108,7.6566196 65.515852,1.8898923 109.91273,-4.5795043 150.92519,28.65111 157.04911,72.445413 163.84782,121.06539 127.38915,165.87837 79.375041,172.35715' stroke='lightgrey' fill='transparent' stroke-width='2' />
    </svg>"
)

3Dキューブ

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <path d='M 14.973676,89.153138 50.784897,25.914845 V 101.3499 l -35.811221,32.4797 z' stroke='black' fill='#e9e9ff' stroke-width='2' fill-opacity='0.5' />
        <path d='M 0.75595247,80.886905 V 129.584 L 14.973676,133.8296 V 89.153138 Z' stroke='black' fill='#353564' stroke-width='2' fill-opacity='0.5' />
        <path d='M 0.75595247,80.886905 30.994048,0.79166829 50.784897,25.914845 14.973676,89.153138 Z' stroke='black' fill='#4d4d9f' stroke-width='2' fill-opacity='0.5' />
        <path d='M 0.75595247,129.584 30.994048,88.446429 50.784897,101.3499 14.973676,133.8296 Z' stroke='black' fill='#afafde' stroke-width='2' fill-opacity='0.5' />
        <path d='M 30.994048,0.79166829 V 88.446429 L 50.784897,101.3499 V 25.914845 Z' stroke='black' fill='#d7d7ff' stroke-width='2' fill-opacity='0.5' />
        <path d='M 0.75595247,80.886905 30.994048,0.79166829 V 88.446429 L 0.75595247,129.584 Z' stroke='black' fill='#8686bf' stroke-width='2' fill-opacity='0.5' />
    </svg>"
)

回転する3Dキューブ(その1)

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <path d='M 73.642864,83.30019 131.17597,71.637295 V 132.38138 L 73.642864,122.08462 Z' stroke='black' fill='#e9e9ff' stroke-width='2' fill-opacity='0.5' transform='rotation' >
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 100 100'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='m 31.576366,75.30557 v 53.83722 l 42.066498,-7.05817 V 83.30019 Z' stroke='black' fill='#353564' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 100 100'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='M 31.576366,129.14279 91.557712,154.57107 131.17597,132.38138 73.642864,122.08462 Z' stroke='black' fill='#4d4d9f' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 100 100'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='M 31.576366,75.30557 91.557712,46.503569 131.17597,71.637295 73.642864,83.30019 Z' stroke='black' fill='#afafde' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 100 100'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='M 91.557712,46.503569 V 154.57107 L 131.17597,132.38138 V 71.637295 Z' stroke='black' fill='#d7d7ff' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 100 100'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='M 31.576366,75.30557 91.557712,46.503569 V 154.57107 L 31.576366,129.14279 Z' stroke='black' fill='#8686bf' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 100 100'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
    </svg>"
)

回転する3Dキューブ(その2)

"data:image/svg+xml,"& 
"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <path d='M 73.642864,83.30019 131.17597,71.637295 V 132.38138 L 73.642864,122.08462 Z' stroke='black' fill='#e9e9ff' stroke-width='2' fill-opacity='0.5' transform='rotation' >
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 100 100'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='m 31.576366,75.30557 v 53.83722 l 42.066498,-7.05817 V 83.30019 Z' stroke='black' fill='#353564' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 50 50'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='M 31.576366,129.14279 91.557712,154.57107 131.17597,132.38138 73.642864,122.08462 Z' stroke='black' fill='#4d4d9f' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 80 80'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='M 31.576366,75.30557 91.557712,46.503569 131.17597,71.637295 73.642864,83.30019 Z' stroke='black' fill='#afafde' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 120 120'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='M 91.557712,46.503569 V 154.57107 L 131.17597,132.38138 V 71.637295 Z' stroke='black' fill='#d7d7ff' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 30 30'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
        <path d='M 31.576366,75.30557 91.557712,46.503569 V 154.57107 L 31.576366,129.14279 Z' stroke='black' fill='#8686bf' stroke-width='2' fill-opacity='0.5' transform='rotation'>
            <animateTransform attributeName='transform'
                      begin='0s'
                      dur='3s'
                      type='rotate'
                      from='0 140 140'
                      to='360 100 100'
                      repeatCount='indefinite' />
        </path>
    </svg>"
)

跳ねる3つのボール

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
        <path d='M 25 80 L 25 10 L 25 80' stroke='transparent' fill='transparent' stroke-width='2' id='theMotionPath1' />
        <path d='M 50 60 L 50 10 L 50 80 L 50 60' stroke='transparent' fill='transparent' stroke-width='2' id='theMotionPath2' />
        <path d='M 75 40 L 75 10 L 75 80 L 75 40' stroke='transparent' fill='transparent' stroke-width='2' id='theMotionPath3' />

        <circle cx='' cy='' r='10' fill='red'>
            <animateMotion dur='1s' repeatCount='indefinite'>
        <mpath xlink:href='#theMotionPath1'/>
            </animateMotion>
        </circle>
        <circle cx='' cy='' r='10' fill='red'>
            <animateMotion dur='1s' repeatCount='indefinite'>
        <mpath xlink:href='#theMotionPath2'/>
            </animateMotion>
        </circle>
        <circle cx='' cy='' r='10' fill='red'>
            <animateMotion dur='1s' repeatCount='indefinite'>
        <mpath xlink:href='#theMotionPath3'/>
            </animateMotion>
        </circle>
    </svg>"
)

虹色で塗りつぶし

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
      <defs>
       <linearGradient id='grad'  x1='0%' y1='0%' x2='100%' y2='0%'>
         <stop  offset='0%' stop-color='#ff0000' />
         <stop  offset='16.7%' stop-color='#ffff00'/>
         <stop  offset='33.3%' stop-color='#00ff00'/>
         <stop  offset='50.0%' stop-color='#00ffff'/>
         <stop  offset='66.7%' stop-color='#0000ff'/>
         <stop  offset='83.3%' stop-color='#ff00ff'/>
         <stop  offset='100%' stop-color='#ff0000'/>
       </linearGradient>
      </defs>
      <rect x='0' y='0' width='100' height='100' fill='url(#grad)' />
      <circle cx='150' cy='50' r='40' fill='none' stroke-width='15' stroke='url(#grad)'/>
    </svg>"
)

手書き風模様

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <path d='M 83.910714,34.773809 C 83.65873,33.765873 84.131165,32.105057 83.15476,31.75 c -2.36813,-0.86114 -5.03968,0 -7.559522,0 -17.593328,0 -41.23065,0.258532 -45.357144,21.922618 -0.917128,4.814921 -0.456907,9.519994 2.267857,13.607142 6.94281,10.414214 32.757441,18.478672 43.089287,21.922621 9.5284,3.176132 11.477366,1.897133 19.654761,6.803569 4.696698,2.818022 5.291671,7.25328 5.291671,12.09524 0,0.75595 0.29778,1.57303 0,2.26786 -2.046509,4.77518 -9.374798,13.58418 -14.363099,15.11904 -6.040265,1.85855 -12.590655,1.89422 -18.898811,1.51191 -6.130877,-0.37157 -14.757582,-2.48253 -19.654761,-6.80357 -6.694275,-5.90672 -7.559524,-15.27572 -7.559524,-23.434525 0,-0.755955 -0.312814,-1.579666 0,-2.267858 0.983697,-2.164135 2.274422,-4.207758 3.779764,-6.047621 4.296706,-5.251529 11.430555,-5.116938 17.386903,-6.047618 23.373619,-3.652128 4.016097,-1.564129 31.749999,-3.023809 2.038498,-0.107289 13.900559,-0.55576 15.874999,-3.023809 1.55481,-1.943513 1.03006,-9.146434 0.75595,-11.339285 -0.20857,-1.66856 -1.67767,-3.914582 -2.26785,-5.291667 -1.31737,-3.073852 -2.17167,-10.487141 -4.53572,-12.85119 -0.17818,-0.178181 -0.57777,0.178178 -0.75595,0 -5.238481,-5.238483 5.96405,4.452138 -2.267856,-3.779764 C 99.143276,42.44685 98.09949,42.275341 97.517856,41.577381 96.796428,40.711667 96.748025,39.401654 96.00595,38.553572 92.805532,34.895951 88.554636,32.18208 84.666666,30.238094 79.940908,27.875216 71.601631,49.142956 71.059523,50.648809 c -6.440503,17.890283 -10.594459,36.186696 -15.875,54.428571 -2.92605,10.10818 -6.393354,20.06141 -9.071429,30.23809 -5.029446,19.1119 -0.242301,3.72168 -3.02381,20.41072 -0.262001,1.572 -1.226817,2.96773 -1.511903,4.53571 -0.306721,1.68697 0,4.18411 0,6.04762' stroke='black' fill='transparent' stroke-width='2' />
    </svg>"
)

グラデーション

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <defs>
        <linearGradient id='atg' gradientUnits='objectBoundingBox' x1='0' y1='50%' x2='100%' y2='50%'>
            <stop offset='0%' stop-color='red'/>
            <stop offset='50%' stop-color='white'/>
            <stop offset='100%' stop-color='red'/>
            <animateTransform attributeName='gradientTransform' type='rotate' from='0,0.5,0.5' to='360,0.5,0.5' begin='0s' dur='6s' repeatCount='indefinite'/>
        </linearGradient>
        <pattern id='atp' patternUnits='userSpaceOnUse' x='0' y='0' width='50' height='50'>
            <rect x='0' y='0' width='50' height='50' fill='yellow'/>
            <circle cx='25' cy='25' r='25' fill='orange'/>
            <animateTransform attributeName='patternTransform' type='translate' from='0,0' to='100,100' begin='0s' dur='6s' repeatCount='indefinite'/>
        </pattern>
    </defs>
    <rect x='5%' y='5%' width='90%' height='90%' fill='url(#atg)' stroke='url(#atp)' stroke-width='10%'/>
</svg>"
)

NEXT ボタン

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <defs>
           <filter id='shadow'>
               <feDropShadow dx='10' dy='2' stdDeviation='2'/>
            </filter>
        </defs>

        <path stroke='black' stroke-width='2' fill='lightpink'>
            <animate attributeName='d' 
                calcMode='linear' 
                from='M 40 35 L 40 60 L 120 60 L 120 85 L 160 50 L 120 15 L 120 35 L 40 35' 
                to='M 30 30 L 30 75 L 130 75 L 130 95 L 180 50 L 130 5 L 130 30 L 30 30' 
                begin='0s' 
                dur='0.5s' 
                repeatCount='indefinite'/>
        </path>
        
        <text font-family='Algerian' stroke-width='0.3' stroke='#0022e0ff' fill='#18eee0ff' filter='url(#shadow)' >
            NEXT
            <animate attributeName='font-size' 
                calcMode='linear' 
                from='30' 
                to='40' 
                begin='0s' 
                dur='0.5s' 
                repeatCount='indefinite'/>
            <animate attributeName='x' 
                calcMode='linear' 
                from='50' 
                to='40' 
                begin='0s' 
                dur='0.5s' 
                repeatCount='indefinite'/>
            <animate attributeName='y' 
                calcMode='linear' 
                from='60' 
                to='65' 
                begin='0s' 
                dur='0.5s' 
                repeatCount='indefinite'/>
        </text>
    </svg>"
)