animation wave effect in SVG string

Asked

Viewed 169 times

2

I am making an animation SVG and to be complete, is only missing the animation of the string

.wrapper {
  background: #364254;
  width: 100%;
  height: 100%;
}
<div class="wrapper">
    <svg viewBox="0 0 1445.0834 580.2761">
      <defs>
        <linearGradient
          id="Gradiente_sem_nome_150"
          data-name="Gradiente sem nome 150"
          x1="3.2814"
          y1="453.8773"
          x2="921.2548"
          y2="453.8773"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#f27075"
            stop-opacity="0"
          />
          <stop
            offset="0.5248"
            stop-color="#2d6cea"
          />
          <stop
            offset="0.5932"
            stop-color="#457dec"
          />
          <stop
            offset="0.7376"
            stop-color="#82a8f3"
          />
          <stop
            offset="0.9447"
            stop-color="#e4ecfc"
          />
          <stop
            offset="1"
            stop-color="#fff"
          />
        </linearGradient>
        <linearGradient
          id="Gradiente_sem_nome_16"
          data-name="Gradiente sem nome 16"
          x1="939.9244"
          y1="351.193"
          x2="1492.4711"
          y2="243.7888"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#2d3d54"
          />
          <stop
            offset="0.1341"
            stop-color="#2d3d54"
            stop-opacity="0.7621"
          />
          <stop
            offset="0.4043"
            stop-color="#2d3d54"
            stop-opacity="0.3478"
          />
          <stop
            offset="0.6262"
            stop-color="#2d3d54"
            stop-opacity="0.0928"
          />
          <stop
            offset="0.7707"
            stop-color="#2d3d54"
            stop-opacity="0"
          />
        </linearGradient>
        <filter
          id="AI_Desfoquegaussiano_4"
          name="AI_Desfoquegaussiano_4"
        >
          <feGaussianBlur stdDeviation="4" />
        </filter>
        <linearGradient
          id="linear-gradient"
          x1="1021.6008"
          y1="714.8803"
          x2="1021.6008"
          y2="491.971"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#b9b9bd"
          />
          <stop
            offset="0.5039"
            stop-color="#fee7d5"
          />
          <stop
            offset="1"
            stop-color="#fff"
          />
        </linearGradient>
        <linearGradient
          id="linear-gradient-2"
          x1="1015.1188"
          y1="715.6549"
          x2="1015.1188"
          y2="662.471"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#401737"
          />
          <stop
            offset="1"
            stop-color="#2d6cea"
          />
        </linearGradient>
        <linearGradient
          id="linear-gradient-3"
          x1="1020.4081"
          y1="701.4192"
          x2="1020.4081"
          y2="673.7128"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-4"
          x1="1042.4303"
          y1="595.163"
          x2="1042.4303"
          y2="578.9113"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-5"
          x1="1010.7335"
          y1="660.0198"
          x2="1010.7335"
          y2="649.7516"
          gradientTransform="translate(1576.9212 -408.0767) rotate(85.1016)"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-6"
          x1="939.1844"
          y1="408.3795"
          x2="939.1844"
          y2="315.0461"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#2d3d54"
          />
          <stop
            offset="0.1808"
            stop-color="#7b7c84"
          />
          <stop
            offset="0.3611"
            stop-color="#c1b6b0"
          />
          <stop
            offset="0.4899"
            stop-color="#edd9cb"
          />
          <stop
            offset="0.5551"
            stop-color="#fee7d5"
          />
          <stop
            offset="0.765"
            stop-color="#fef1e6"
          />
          <stop
            offset="1"
            stop-color="#fff"
          />
        </linearGradient>
        <linearGradient
          id="linear-gradient-7"
          x1="902.9354"
          y1="401.3201"
          x2="954.2108"
          y2="401.3201"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="Gradiente_sem_nome_13"
          data-name="Gradiente sem nome 13"
          x1="1116.3619"
          y1="414.6718"
          x2="1116.3619"
          y2="380.2045"
          gradientTransform="matrix(-0.9977, -0.0673, -0.0673, 0.9977, 2069.0162, 74.1349)"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#fee7d5"
          />
          <stop
            offset="1"
            stop-color="#ffc5a9"
          />
        </linearGradient>
        <linearGradient
          id="Gradiente_sem_nome_13-2"
          x1="205.2625"
          y1="396.867"
          x2="214.9458"
          y2="396.867"
          gradientTransform="matrix(0.992, 0.126, -0.126, 0.992, 801.135, -44.0006)"
          xlink:href="#Gradiente_sem_nome_13"
        />
        <linearGradient
          id="Gradiente_sem_nome_13-3"
          x1="1131.8728"
          y1="395.588"
          x2="1141.556"
          y2="395.588"
          gradientTransform="matrix(-0.992, -0.126, -0.126, 0.992, 2090.6347, 119.7773)"
          xlink:href="#Gradiente_sem_nome_13"
        />
        <linearGradient
          id="linear-gradient-8"
          x1="885.4584"
          y1="359.9616"
          x2="950.5125"
          y2="348.4908"
          xlink:href="#linear-gradient"
        />
        <linearGradient
          id="linear-gradient-9"
          x1="899.0038"
          y1="360.5009"
          x2="980.0221"
          y2="360.5009"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#f27075"
          />
          <stop
            offset="0.5248"
            stop-color="#2d6cea"
          />
          <stop
            offset="0.5932"
            stop-color="#457dec"
          />
          <stop
            offset="0.7376"
            stop-color="#82a8f3"
          />
          <stop
            offset="0.9447"
            stop-color="#e4ecfc"
          />
          <stop
            offset="1"
            stop-color="#fff"
          />
        </linearGradient>
        <linearGradient
          id="linear-gradient-10"
          x1="901.7687"
          y1="404.3587"
          x2="955.1403"
          y2="404.3587"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-11"
          x1="855.3938"
          y1="472.4557"
          x2="988.2765"
          y2="449.0249"
          xlink:href="#linear-gradient"
        />
        <linearGradient
          id="linear-gradient-12"
          x1="957.1854"
          y1="420.1377"
          x2="966.852"
          y2="420.1377"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-13"
          x1="911.3371"
          y1="400.3877"
          x2="948.8464"
          y2="400.3877"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-14"
          x1="890.8894"
          y1="434.7924"
          x2="902.9896"
          y2="434.7924"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-15"
          x1="864.5134"
          y1="493.2369"
          x2="864.5134"
          y2="480.9984"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-16"
          x1="936.2392"
          y1="458.2563"
          x2="949.047"
          y2="458.2563"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-17"
          x1="880.6081"
          y1="418.679"
          x2="892.6152"
          y2="418.679"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-18"
          x1="896.9408"
          y1="366.1418"
          x2="896.9408"
          y2="351.4266"
          gradientTransform="translate(1018.2501 -599.6067) rotate(75.4121)"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-19"
          x1="928.1403"
          y1="464.5368"
          x2="952.6186"
          y2="464.5368"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-20"
          x1="957.7139"
          y1="347.5472"
          x2="816.6332"
          y2="103.1882"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#4eca7a"
          />
          <stop
            offset="0.047"
            stop-color="#4dc278"
            stop-opacity="0.939"
          />
          <stop
            offset="0.3699"
            stop-color="#438c69"
            stop-opacity="0.5406"
          />
          <stop
            offset="0.6354"
            stop-color="#3c645d"
            stop-opacity="0.2487"
          />
          <stop
            offset="0.8302"
            stop-color="#384b57"
            stop-opacity="0.0684"
          />
          <stop
            offset="0.9336"
            stop-color="#364254"
            stop-opacity="0"
          />
        </linearGradient>
        <linearGradient
          id="linear-gradient-21"
          x1="952.9233"
          y1="454.2961"
          x2="1034.4804"
          y2="454.2961"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#401737"
          />
          <stop
            offset="0.076"
            stop-color="#433e45"
          />
          <stop
            offset="0.2046"
            stop-color="#487a5c"
          />
          <stop
            offset="0.3143"
            stop-color="#4ba56c"
          />
          <stop
            offset="0.3994"
            stop-color="#4dc076"
          />
          <stop
            offset="0.4494"
            stop-color="#4eca7a"
          />
        </linearGradient>
        <linearGradient
          id="Gradiente_sem_nome_8"
          data-name="Gradiente sem nome 8"
          x1="919.4737"
          y1="344.12"
          x2="1010.7447"
          y2="344.12"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#401737"
          />
          <stop
            offset="0.1108"
            stop-color="#411e3a"
          />
          <stop
            offset="0.277"
            stop-color="#423341"
          />
          <stop
            offset="0.4782"
            stop-color="#45554e"
          />
          <stop
            offset="0.7066"
            stop-color="#488360"
          />
          <stop
            offset="0.955"
            stop-color="#4dbe76"
          />
          <stop
            offset="1"
            stop-color="#4eca7a"
          />
        </linearGradient>
        <linearGradient
          id="linear-gradient-22"
          x1="997.7087"
          y1="458.4906"
          x2="997.7087"
          y2="452.282"
          gradientTransform="translate(1142.391 -631.7504) rotate(73.0472)"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-23"
          x1="941.5251"
          y1="595.9957"
          x2="1022.4679"
          y2="499.5318"
          xlink:href="#linear-gradient"
        />
        <linearGradient
          id="linear-gradient-24"
          x1="988.6073"
          y1="623.721"
          x2="988.6073"
          y2="606.0954"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-25"
          x1="991.6126"
          y1="614.8744"
          x2="991.6126"
          y2="600.1377"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-26"
          x1="994.8687"
          y1="497.0958"
          x2="994.8687"
          y2="481.8919"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-27"
          x1="975.0767"
          y1="595.5689"
          x2="975.0767"
          y2="584.3129"
          gradientTransform="translate(1479.6015 -431.9493) rotate(85.1016)"
          xlink:href="#linear-gradient-2"
        />
        <linearGradient
          id="linear-gradient-28"
          x1="821.4987"
          y1="382.8428"
          x2="816.8826"
          y2="385.073"
          gradientUnits="userSpaceOnUse"
        >
          <stop
            offset="0"
            stop-color="#fff"
          />
          <stop offset="1" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-29"
          x1="821.8294"
          y1="381.4053"
          x2="828.1228"
          y2="381.4053"
          xlink:href="#linear-gradient-28"
        />
      </defs>
      <g style="isolation: isolate">
        <g id="corda">
          <path
            d="M10.1381,523.7887a129.9984,129.9984,0,0,1,23.4478-28.0481,137.2,137.2,0,0,1,14.4833-11.4312,131.4185,131.4185,0,0,1,16.0282-9.3232A122.8008,122.8008,0,0,1,81.43,468.0534c2.9868-.9311,6.0182-1.7484,9.0912-2.4311q4.6143-.999,9.3441-1.5545a84.3237,84.3237,0,0,1,19.1751-.1527,64.1678,64.1678,0,0,1,19.0137,5.03,54.4889,54.4889,0,0,1,8.8048,4.9313,51.29,51.29,0,0,1,7.7448,6.6289,50.2482,50.2482,0,0,1,3.3489,3.8652l1.3657,1.7187c.416.5431.8833,1.0634,1.3227,1.5959,1.8007,2.11,3.7375,4.1481,5.7635,6.1129a126.0336,126.0336,0,0,0,27.638,19.9649A122.0777,122.0777,0,0,0,225.73,525.7655a88.8416,88.8416,0,0,0,32.9611,1.2545,76.21,76.21,0,0,0,7.9761-1.7469,72.5878,72.5878,0,0,0,7.7339-2.557,77.53,77.53,0,0,0,14.45-7.5716,100.2369,100.2369,0,0,0,23.87-23.0338,141.4885,141.4885,0,0,0,9.3889-14.208c1.4575-2.4627,2.7775-4.9956,4.1448-7.5432,1.4553-2.7422,2.9114-5.4836,4.4589-8.1762q4.6074-8.0952,9.8-15.8476,5.2212-7.7251,11.0333-15.0424A213.69,213.69,0,0,1,377.2119,404.11a180.8723,180.8723,0,0,1,30.526-22.0113,139.9645,139.9645,0,0,1,35.2769-14.33,104.4177,104.4177,0,0,1,38.5771-2.51,92.4736,92.4736,0,0,1,36.7547,12.78,110.5846,110.5846,0,0,1,28.7541,25.4918,144.872,144.872,0,0,1,10.9053,15.5219c1.6008,2.7056,3.2016,5.4117,4.6519,8.1864l1.113,2.0693,1.0443,2.0983,2.05,4.1369a222.2631,222.2631,0,0,0,17.4,30.2127,121.9379,121.9379,0,0,0,22.8687,25.18c8.7006,6.9742,18.6615,12.1735,29.2445,13.9654a50.7067,50.7067,0,0,0,15.9747.2238,56.6979,56.6979,0,0,0,15.497-4.6532,78.1028,78.1028,0,0,0,26.11-20.4673,99.4568,99.4568,0,0,0,9.81-13.8993c1.4532-2.45,2.7643-4.9855,4.01-7.5516l1.8876-4.0331c.6459-1.3956,1.3241-2.7754,1.9944-4.1585A228.387,228.387,0,0,1,730.51,418.6864a166.08,166.08,0,0,1,24.5238-27.74,121.2878,121.2878,0,0,1,14.8163-11.38,96.6508,96.6508,0,0,1,16.6384-8.7412,80.1964,80.1964,0,0,1,37.0089-5.8268c12.5584,1,24.5831,5.0685,35.5046,10.7034a148.2251,148.2251,0,0,1,30.0062,20.9443,250.8421,250.8421,0,0,1,25.2756,26.0567,1.5,1.5,0,0,1-2.2388,1.9964l-.0118-.0127a247.1063,247.1063,0,0,0-25.9278-24.6038,149.2618,149.2618,0,0,0-29.6935-19.15c-10.57-5.0008-21.9084-8.3606-33.3851-8.8706a72.891,72.891,0,0,0-33.3863,6.2489,88.3078,88.3078,0,0,0-14.9883,8.4326,112.4246,112.4246,0,0,0-13.4363,10.9474A144.7821,144.7821,0,0,0,749.3,410.4347a174.8567,174.8567,0,0,0-10.548,14.0031A217.9769,217.9769,0,0,0,721.4548,455.05c-.61,1.3342-1.2277,2.6648-1.8134,4.009l-1.8452,4.1693c-1.3191,2.8651-2.7168,5.6987-4.2729,8.45a110.8506,110.8506,0,0,1-10.6422,15.7293,88.3839,88.3839,0,0,1-29.8157,24.1271,69.0633,69.0633,0,0,1-18.8281,5.937,64.6783,64.6783,0,0,1-29.6086-2.2692,70.4885,70.4885,0,0,1-9.1971-3.605,88.2479,88.2479,0,0,1-16.52-10.25,135.2446,135.2446,0,0,1-25.883-27.606A225.59,225.59,0,0,1,554.0734,441.79l-1.9915-3.9177-.9819-1.9264-1.0427-1.8875c-1.358-2.5383-2.8467-4.9868-4.3273-7.4382a130.3666,130.3666,0,0,0-9.9445-13.85,95.8119,95.8119,0,0,0-25.1086-21.86,77.3089,77.3089,0,0,0-30.941-10.4064,85.0584,85.0584,0,0,0-16.4912-.2871,102.278,102.278,0,0,0-16.4418,2.7483,124.3046,124.3046,0,0,0-31.251,12.85,165.08,165.08,0,0,0-27.766,20.183,197.75,197.75,0,0,0-23.6736,25.2571q-5.3815,6.8186-10.2329,14.0516-4.8208,7.2434-9.1024,14.8357c-1.4388,2.5216-2.7905,5.0918-4.1444,7.66-1.4657,2.75-2.9455,5.5342-4.5528,8.2408a157.572,157.572,0,0,1-10.5269,15.8081,112.9818,112.9818,0,0,1-27.968,26.5646,93.3378,93.3378,0,0,1-17.5092,8.9514,89.2817,89.2817,0,0,1-19.0534,4.9525,102.9441,102.9441,0,0,1-38.6288-2.0733,134.4123,134.4123,0,0,1-35.1971-14.2581,139.3158,139.3158,0,0,1-29.8981-23.1059c-2.2146-2.29-4.3481-4.68-6.3677-7.2067-.4977-.6411-1.0125-1.2589-1.4918-1.9224l-1.3794-1.8546a37.9246,37.9246,0,0,0-2.4531-3.024,42.1378,42.1378,0,0,0-12.4763-9.4316c-9.5687-4.7971-21.0189-6.2548-32.3023-5.4208a107.2722,107.2722,0,0,0-33.3739,8.3137,134.2376,134.2376,0,0,0-30.1162,17.8426,136.8208,136.8208,0,0,0-24.7194,25.2979,1.5014,1.5014,0,0,1-2.48-1.6879Z"
            transform="translate(-9.9166 -135.4679)"
            fill="url(#Gradiente_sem_nome_150)"
          />
        </g>
      </g>
    </svg>
  </div>

full SVG code below

https://codepen.io/yung-silva/pen/OKGjpJ

I need it to be a gentle wave-effect animation, but I couldn’t find anything that would help me

here are the closest references you can find

https://cdn.dribbble.com/users/742876/screenshots/3631385/moon-walk.gif

https://cdn.dribbble.com/users/123785/screenshots/3789858/spaceman_final.gif

https://media1.giphy.com/media/8lNaZuf2ZmF54oalhP/giphy.gif

someone could help me?

html css svg css-animations

  • you already have some idea how you’re going to do this?

  • @Leandroangelo not, none.

1 answer

1


Not to get too complex, having to import some GSAP libraries to "morfar" the path of the string in SVG, you can use some properties of transform CSS to make this animation in a particular way on the string.

She’d be like this.

inserir a descrição da imagem aqui

As in stackoverflow Snippet does not fit the whole code I will leave the code only the string. And here is a link pro SVG complete as in the image https://codepen.io/hugocsl/pen/XWrppgB

You can play with all these values of transform to leave more to your taste.

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    background: #364254;
    width: 100%;
    height: 100%;
}

svg {
  animation: mover 4s infinite;
  /* perspective: 800px; */
}
#corda {
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: moverCorda 4s infinite;
}


@keyframes moverCorda {
    0% {
        transform: translateX(0px) scaleX(1) rotateY(0deg) rotate(0deg);
    }

    50% {
        transform: translateX(10px) scaleX(1.05) rotateX(45deg) rotate(10deg);
    }

    100% {
        transform: translateX(0px) scaleX(1) rotateY(0deg) rotate(0deg);
    }
}
<div class="wrapper">
    <svg viewBox="0 0 1445.0834 580.2761">
        <defs>
            <linearGradient id="Gradiente_sem_nome_150" data-name="Gradiente sem nome 150" x1="3.2814" y1="453.8773" x2="921.2548" y2="453.8773" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#f27075" stop-opacity="0" />
                <stop offset="0.5248" stop-color="#2d6cea" />
                <stop offset="0.5932" stop-color="#457dec" />
                <stop offset="0.7376" stop-color="#82a8f3" />
                <stop offset="0.9447" stop-color="#e4ecfc" />
                <stop offset="1" stop-color="#fff" />
            </linearGradient>
            <linearGradient id="Gradiente_sem_nome_16" data-name="Gradiente sem nome 16" x1="939.9244" y1="351.193" x2="1492.4711" y2="243.7888" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#2d3d54" />
                <stop offset="0.1341" stop-color="#2d3d54" stop-opacity="0.7621" />
                <stop offset="0.4043" stop-color="#2d3d54" stop-opacity="0.3478" />
                <stop offset="0.6262" stop-color="#2d3d54" stop-opacity="0.0928" />
                <stop offset="0.7707" stop-color="#2d3d54" stop-opacity="0" />
            </linearGradient>
            <filter id="AI_Desfoquegaussiano_4" name="AI_Desfoquegaussiano_4">
                <feGaussianBlur stdDeviation="4" />
            </filter>
            <linearGradient id="linear-gradient" x1="1021.6008" y1="714.8803" x2="1021.6008" y2="491.971" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#b9b9bd" />
                <stop offset="0.5039" stop-color="#fee7d5" />
                <stop offset="1" stop-color="#fff" />
            </linearGradient>
            <linearGradient id="linear-gradient-2" x1="1015.1188" y1="715.6549" x2="1015.1188" y2="662.471" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#401737" />
                <stop offset="1" stop-color="#2d6cea" />
            </linearGradient>
            <linearGradient id="linear-gradient-3" x1="1020.4081" y1="701.4192" x2="1020.4081" y2="673.7128" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-4" x1="1042.4303" y1="595.163" x2="1042.4303" y2="578.9113" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-5" x1="1010.7335" y1="660.0198" x2="1010.7335" y2="649.7516" gradientTransform="translate(1576.9212 -408.0767) rotate(85.1016)" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-6" x1="939.1844" y1="408.3795" x2="939.1844" y2="315.0461" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#2d3d54" />
                <stop offset="0.1808" stop-color="#7b7c84" />
                <stop offset="0.3611" stop-color="#c1b6b0" />
                <stop offset="0.4899" stop-color="#edd9cb" />
                <stop offset="0.5551" stop-color="#fee7d5" />
                <stop offset="0.765" stop-color="#fef1e6" />
                <stop offset="1" stop-color="#fff" />
            </linearGradient>
            <linearGradient id="linear-gradient-7" x1="902.9354" y1="401.3201" x2="954.2108" y2="401.3201" xlink:href="#linear-gradient-2" />
            <linearGradient id="Gradiente_sem_nome_13" data-name="Gradiente sem nome 13" x1="1116.3619" y1="414.6718" x2="1116.3619" y2="380.2045" gradientTransform="matrix(-0.9977, -0.0673, -0.0673, 0.9977, 2069.0162, 74.1349)" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#fee7d5" />
                <stop offset="1" stop-color="#ffc5a9" />
            </linearGradient>
            <linearGradient id="Gradiente_sem_nome_13-2" x1="205.2625" y1="396.867" x2="214.9458" y2="396.867" gradientTransform="matrix(0.992, 0.126, -0.126, 0.992, 801.135, -44.0006)" xlink:href="#Gradiente_sem_nome_13" />
            <linearGradient id="Gradiente_sem_nome_13-3" x1="1131.8728" y1="395.588" x2="1141.556" y2="395.588" gradientTransform="matrix(-0.992, -0.126, -0.126, 0.992, 2090.6347, 119.7773)" xlink:href="#Gradiente_sem_nome_13" />
            <linearGradient id="linear-gradient-8" x1="885.4584" y1="359.9616" x2="950.5125" y2="348.4908" xlink:href="#linear-gradient" />
            <linearGradient id="linear-gradient-9" x1="899.0038" y1="360.5009" x2="980.0221" y2="360.5009" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#f27075" />
                <stop offset="0.5248" stop-color="#2d6cea" />
                <stop offset="0.5932" stop-color="#457dec" />
                <stop offset="0.7376" stop-color="#82a8f3" />
                <stop offset="0.9447" stop-color="#e4ecfc" />
                <stop offset="1" stop-color="#fff" />
            </linearGradient>
            <linearGradient id="linear-gradient-10" x1="901.7687" y1="404.3587" x2="955.1403" y2="404.3587" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-11" x1="855.3938" y1="472.4557" x2="988.2765" y2="449.0249" xlink:href="#linear-gradient" />
            <linearGradient id="linear-gradient-12" x1="957.1854" y1="420.1377" x2="966.852" y2="420.1377" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-13" x1="911.3371" y1="400.3877" x2="948.8464" y2="400.3877" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-14" x1="890.8894" y1="434.7924" x2="902.9896" y2="434.7924" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-15" x1="864.5134" y1="493.2369" x2="864.5134" y2="480.9984" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-16" x1="936.2392" y1="458.2563" x2="949.047" y2="458.2563" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-17" x1="880.6081" y1="418.679" x2="892.6152" y2="418.679" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-18" x1="896.9408" y1="366.1418" x2="896.9408" y2="351.4266" gradientTransform="translate(1018.2501 -599.6067) rotate(75.4121)" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-19" x1="928.1403" y1="464.5368" x2="952.6186" y2="464.5368" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-20" x1="957.7139" y1="347.5472" x2="816.6332" y2="103.1882" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#4eca7a" />
                <stop offset="0.047" stop-color="#4dc278" stop-opacity="0.939" />
                <stop offset="0.3699" stop-color="#438c69" stop-opacity="0.5406" />
                <stop offset="0.6354" stop-color="#3c645d" stop-opacity="0.2487" />
                <stop offset="0.8302" stop-color="#384b57" stop-opacity="0.0684" />
                <stop offset="0.9336" stop-color="#364254" stop-opacity="0" />
            </linearGradient>
            <linearGradient id="linear-gradient-21" x1="952.9233" y1="454.2961" x2="1034.4804" y2="454.2961" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#401737" />
                <stop offset="0.076" stop-color="#433e45" />
                <stop offset="0.2046" stop-color="#487a5c" />
                <stop offset="0.3143" stop-color="#4ba56c" />
                <stop offset="0.3994" stop-color="#4dc076" />
                <stop offset="0.4494" stop-color="#4eca7a" />
            </linearGradient>
            <linearGradient id="Gradiente_sem_nome_8" data-name="Gradiente sem nome 8" x1="919.4737" y1="344.12" x2="1010.7447" y2="344.12" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#401737" />
                <stop offset="0.1108" stop-color="#411e3a" />
                <stop offset="0.277" stop-color="#423341" />
                <stop offset="0.4782" stop-color="#45554e" />
                <stop offset="0.7066" stop-color="#488360" />
                <stop offset="0.955" stop-color="#4dbe76" />
                <stop offset="1" stop-color="#4eca7a" />
            </linearGradient>
            <linearGradient id="linear-gradient-22" x1="997.7087" y1="458.4906" x2="997.7087" y2="452.282" gradientTransform="translate(1142.391 -631.7504) rotate(73.0472)" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-23" x1="941.5251" y1="595.9957" x2="1022.4679" y2="499.5318" xlink:href="#linear-gradient" />
            <linearGradient id="linear-gradient-24" x1="988.6073" y1="623.721" x2="988.6073" y2="606.0954" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-25" x1="991.6126" y1="614.8744" x2="991.6126" y2="600.1377" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-26" x1="994.8687" y1="497.0958" x2="994.8687" y2="481.8919" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-27" x1="975.0767" y1="595.5689" x2="975.0767" y2="584.3129" gradientTransform="translate(1479.6015 -431.9493) rotate(85.1016)" xlink:href="#linear-gradient-2" />
            <linearGradient id="linear-gradient-28" x1="821.4987" y1="382.8428" x2="816.8826" y2="385.073" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#fff" />
                <stop offset="1" />
            </linearGradient>
            <linearGradient id="linear-gradient-29" x1="821.8294" y1="381.4053" x2="828.1228" y2="381.4053" xlink:href="#linear-gradient-28" />
        </defs>
        <g style="isolation: isolate">
            <g id="corda">
                <path d="M10.1381,523.7887a129.9984,129.9984,0,0,1,23.4478-28.0481,137.2,137.2,0,0,1,14.4833-11.4312,131.4185,131.4185,0,0,1,16.0282-9.3232A122.8008,122.8008,0,0,1,81.43,468.0534c2.9868-.9311,6.0182-1.7484,9.0912-2.4311q4.6143-.999,9.3441-1.5545a84.3237,84.3237,0,0,1,19.1751-.1527,64.1678,64.1678,0,0,1,19.0137,5.03,54.4889,54.4889,0,0,1,8.8048,4.9313,51.29,51.29,0,0,1,7.7448,6.6289,50.2482,50.2482,0,0,1,3.3489,3.8652l1.3657,1.7187c.416.5431.8833,1.0634,1.3227,1.5959,1.8007,2.11,3.7375,4.1481,5.7635,6.1129a126.0336,126.0336,0,0,0,27.638,19.9649A122.0777,122.0777,0,0,0,225.73,525.7655a88.8416,88.8416,0,0,0,32.9611,1.2545,76.21,76.21,0,0,0,7.9761-1.7469,72.5878,72.5878,0,0,0,7.7339-2.557,77.53,77.53,0,0,0,14.45-7.5716,100.2369,100.2369,0,0,0,23.87-23.0338,141.4885,141.4885,0,0,0,9.3889-14.208c1.4575-2.4627,2.7775-4.9956,4.1448-7.5432,1.4553-2.7422,2.9114-5.4836,4.4589-8.1762q4.6074-8.0952,9.8-15.8476,5.2212-7.7251,11.0333-15.0424A213.69,213.69,0,0,1,377.2119,404.11a180.8723,180.8723,0,0,1,30.526-22.0113,139.9645,139.9645,0,0,1,35.2769-14.33,104.4177,104.4177,0,0,1,38.5771-2.51,92.4736,92.4736,0,0,1,36.7547,12.78,110.5846,110.5846,0,0,1,28.7541,25.4918,144.872,144.872,0,0,1,10.9053,15.5219c1.6008,2.7056,3.2016,5.4117,4.6519,8.1864l1.113,2.0693,1.0443,2.0983,2.05,4.1369a222.2631,222.2631,0,0,0,17.4,30.2127,121.9379,121.9379,0,0,0,22.8687,25.18c8.7006,6.9742,18.6615,12.1735,29.2445,13.9654a50.7067,50.7067,0,0,0,15.9747.2238,56.6979,56.6979,0,0,0,15.497-4.6532,78.1028,78.1028,0,0,0,26.11-20.4673,99.4568,99.4568,0,0,0,9.81-13.8993c1.4532-2.45,2.7643-4.9855,4.01-7.5516l1.8876-4.0331c.6459-1.3956,1.3241-2.7754,1.9944-4.1585A228.387,228.387,0,0,1,730.51,418.6864a166.08,166.08,0,0,1,24.5238-27.74,121.2878,121.2878,0,0,1,14.8163-11.38,96.6508,96.6508,0,0,1,16.6384-8.7412,80.1964,80.1964,0,0,1,37.0089-5.8268c12.5584,1,24.5831,5.0685,35.5046,10.7034a148.2251,148.2251,0,0,1,30.0062,20.9443,250.8421,250.8421,0,0,1,25.2756,26.0567,1.5,1.5,0,0,1-2.2388,1.9964l-.0118-.0127a247.1063,247.1063,0,0,0-25.9278-24.6038,149.2618,149.2618,0,0,0-29.6935-19.15c-10.57-5.0008-21.9084-8.3606-33.3851-8.8706a72.891,72.891,0,0,0-33.3863,6.2489,88.3078,88.3078,0,0,0-14.9883,8.4326,112.4246,112.4246,0,0,0-13.4363,10.9474A144.7821,144.7821,0,0,0,749.3,410.4347a174.8567,174.8567,0,0,0-10.548,14.0031A217.9769,217.9769,0,0,0,721.4548,455.05c-.61,1.3342-1.2277,2.6648-1.8134,4.009l-1.8452,4.1693c-1.3191,2.8651-2.7168,5.6987-4.2729,8.45a110.8506,110.8506,0,0,1-10.6422,15.7293,88.3839,88.3839,0,0,1-29.8157,24.1271,69.0633,69.0633,0,0,1-18.8281,5.937,64.6783,64.6783,0,0,1-29.6086-2.2692,70.4885,70.4885,0,0,1-9.1971-3.605,88.2479,88.2479,0,0,1-16.52-10.25,135.2446,135.2446,0,0,1-25.883-27.606A225.59,225.59,0,0,1,554.0734,441.79l-1.9915-3.9177-.9819-1.9264-1.0427-1.8875c-1.358-2.5383-2.8467-4.9868-4.3273-7.4382a130.3666,130.3666,0,0,0-9.9445-13.85,95.8119,95.8119,0,0,0-25.1086-21.86,77.3089,77.3089,0,0,0-30.941-10.4064,85.0584,85.0584,0,0,0-16.4912-.2871,102.278,102.278,0,0,0-16.4418,2.7483,124.3046,124.3046,0,0,0-31.251,12.85,165.08,165.08,0,0,0-27.766,20.183,197.75,197.75,0,0,0-23.6736,25.2571q-5.3815,6.8186-10.2329,14.0516-4.8208,7.2434-9.1024,14.8357c-1.4388,2.5216-2.7905,5.0918-4.1444,7.66-1.4657,2.75-2.9455,5.5342-4.5528,8.2408a157.572,157.572,0,0,1-10.5269,15.8081,112.9818,112.9818,0,0,1-27.968,26.5646,93.3378,93.3378,0,0,1-17.5092,8.9514,89.2817,89.2817,0,0,1-19.0534,4.9525,102.9441,102.9441,0,0,1-38.6288-2.0733,134.4123,134.4123,0,0,1-35.1971-14.2581,139.3158,139.3158,0,0,1-29.8981-23.1059c-2.2146-2.29-4.3481-4.68-6.3677-7.2067-.4977-.6411-1.0125-1.2589-1.4918-1.9224l-1.3794-1.8546a37.9246,37.9246,0,0,0-2.4531-3.024,42.1378,42.1378,0,0,0-12.4763-9.4316c-9.5687-4.7971-21.0189-6.2548-32.3023-5.4208a107.2722,107.2722,0,0,0-33.3739,8.3137,134.2376,134.2376,0,0,0-30.1162,17.8426,136.8208,136.8208,0,0,0-24.7194,25.2979,1.5014,1.5014,0,0,1-2.48-1.6879Z" transform="translate(-9.9166 -135.4679)" fill="url(#Gradiente_sem_nome_150)" />
            </g>
        </g>
    </svg>
</div>

Browser other questions tagged html css svg css-animations

You are not signed in. Login or sign up in order to post.