SWELLの境界線「波」でオリジナリティのあるウネウネ

<!-- wp:loos/full-wide {"bgColor":"#87AEC0","bgOpacity":0,"contentSize":"full","pcPadding":"0","spPadding":"0","className":"uneune"} -->
  <div class="swell-block-fullWide pc-py-0 sp-py-0 alignfull uneune" id="uneune"><div class="swell-block-fullWide__inner"><!-- wp:html -->
  <!-- ウネウネフルワイドブロック版 -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 15" preserveAspectRatio="none" style="overflow:visible">
  <defs>
  <style>
  :root {
  --uneune_color: #87AEC0; /* ウネウネの背景色 */
  --icon-text_color: #000000; /* テキストの色 */
  --icon-image_width: 0.3vw; /* アイコンの幅 */
  --icon-image_scale: scale(1) translateY(-0.2vw) rotate(-2deg); /* アイコンの大きさ・位置・傾き */
  }
  @media(min-width:1680px){:root{--icon-image_scale:scale(0.7) translateY(-0.2vw) rotate(-2deg)}}@media(min-width:960px) and (max-width:1200px){:root{--icon-image_scale:scale(1.5) translateY(-0.2vw) rotate(-2deg)}}@media(min-width:600px) and (max-width:960px){:root{--icon-image_scale:scale(2.5) translateY(-0.2vw) rotate(-2deg)}}@media(max-width:599px){:root{--icon-image_scale:scale(8) translateY(-0.2vw)}}
  .uneune .swell-block-fullWide__inner{height:15vw;margin-bottom:0}
  #uneune-fill{fill: var(--uneune_color)}
  #surf{transform:var(--icon-image_scale);}
  @keyframes fukidasi-anime{0%{opacity:0;transform:translateX(-0.15vw) translateY(-0.05vw)}27%{opacity:0;transform:translateX(-0.15vw) translateY(-0.05vw)}28%{opacity:1;transform:translateX(-0.15vw) translateY(-0.05vw)}40%{opacity:0;transform:translateX(-0.15vw) translateY(-0.3vw)}100%{opacity:0}}
  .icon-image{width:var(--icon-image_width);height:auto;}
  .icon-text{font-size:0.08vw;font-weight:bold;font-family:var(--swl-font_family);letter-spacing:0.1px;fill:var(--icon-text_color)}
  #fukidasi{opacity:0;animation:fukidasi-anime 10s ease-in 3s infinite forwards}
  </style>
  </defs>
  <path id="uneune-fill" d="M100,15H0V14c49.83,0,50-7,100-7v8Z"><animate attributeType="XML" attributeName="d" dur="20s" repeatCount="indefinite" values="M100,15H0V14c49.83,0,50-7,100-7v8Z;M100,15H0V10.58C50.08,5,50.08,5,100,10.5V15Z;M100,15H0V7c49.83,0,50,7,100,7v1Z;M100,15H0V10.5c50,4.5,50,4.5,100,0V15Z;M100,15H0V14c49.83,0,50-7,100-7v8Z"></animate></path>
  <path id="uneune-path" opacity="0" d="M0,14c49.83,0,50-7,100-7"><animate attributeType="XML" attributeName="d" dur="20s" repeatCount="indefinite" values="M0,14c49.83,0,50-7,100-7;M0,10.58C50.08,5,50.08,5,100,10.5;M0,7c49.83,0,50,7,100,7;M0,10.5c50,4.5,50,4.5,100,0;M0,14c49.83,0,50-7,100-7"></animate></path>
  <g id="surf">
  <g id="fukidasi"><text class="icon-text" fill="#000">テキストを入力</text></g><!-- テキストを設定してください -->
  <image class="icon-image" xlink:href="/wp-content/uploads/uneune/icon.png"></image><!-- アイコン画像のパスを設定してください -->
  <animateMotion dur="20s" repeatCount="indefinite" rotate="auto">
  <mpath xlink:href="#uneune-path"></mpath>
  </animateMotion>
  </g>
  </svg>
  <script>eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('g.f(\'e\',(d)=>{7 4=6.5(\'.1 c #1-3\');7 0=6.5(\'.1-b\');a(0!=9){4.2.3=0.2.8}});',17,17,'btmUneune|uneune|style|fill|pathUneune|querySelector|document|let|backgroundColor|null|if|bottom|svg|event|DOMContentLoaded|addEventListener|window'.split('|'),0,{}))</script>
  <!-- /wp:html --></div></div>
  <!-- /wp:loos/full-wide -->