The SVG animation is reversing and decreasing in size from the bottom

Question

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation.

The bottom of the svg seems to resize and get smaller, and I am completely baffled as to why. Here is a link to the code: https://codepen.io/deeluxe/pen/VwvdgrN

<svg class="svg-wave" preserveAspectRatio="none" viewBox="0 0 1440 932">
  <path class="polymorph" d="M485.168 37.924C264.292 -30.76 69.6908 9.30565 0 37.924V932H1442V105.029C1336.46 77.3975 1129.89 162.266 1019.35 160.785C908.815 159.305 761.264 123.779 485.168 37.924Z" fill="url(#paint0_linear)"/>
  <defs>
    <linearGradient id="paint0_linear" x1="775.269" y1="112.006" x2="722.687" y2="680.065" gradientUnits="userSpaceOnUse">
      <stop stop-color="#05CDDA"/>
      <stop offset="1" stop-color="#034E53"/>
    </linearGradient>
  </defs>

But the confusion doesn't end there. When trying a simple Gauge, it plays in reverse! Check it out here: https://codepen.io/deeluxe/pen/mdeKvYe

<svg class="svg-wave" preserveAspectRatio="xMaxYMin  meet" width="240" height="561" viewBox="0 0 240 561" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="polymorph" d="M239.5 0.5H0.5V560.5H239.5V0.5Z" fill="#EC0000"/>
</svg>
anime({
    targets: '.polymorph',
    d: [
      { value: 'M239.5 0H0.5V118.5H239.5V0Z'},
    ],
    easing: 'linear',
    duration: 8000,
    loop: true
  });

I created copies of these svgs with Figma. If anyone can help fix either of the codes, I might finally understand what's going on. Thanks!

css vue.js animation svg

Answer 1

Answer №1

If I have grasped your question correctly, the issue with the first example lies in the fact that the target path does not align perfectly with your desired outcome.

Within the d value, there is a segment stating V895, which corresponds to point 895. However, considering your viewBox has a height of 932, there remains a 37-pixel gap at the bottom.

In contrast, your original path features V932, extending all the way down to the bottom.

I am uncertain about your intentions or how you arrived at this dilemma, but substituting V895 with V932 in the target d value should prevent the blue region's lower edge from creeping upward.

I am somewhat confused by the problem described in the second example. If the issue pertains to playing in reverse, wouldn't swapping the two paths suffice?

Update:

Firstly, I recommend consulting the MDN guide on SVGs, as it provides an excellent introduction to drawing fundamental shapes:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

Your most recent example exhibits some peculiar inconsistencies concerning half pixels. Utilizing half pixels by itself poses no issues, yet maintaining consistency between the starting and ending paths appears lacking.

Here is one approach to achieving your desired effect.

Initially, let's outline the initial rectangle. While you could utilize <rect> for this purpose, I will adhere to employing <path> to maintain uniformity with your previous practices.

To begin, move the cursor to the image's bottom-left corner, denoted as M0 300. Proceed by drawing a horizontal line along the bottom (H652), followed by moving up the right-hand side (V0). Subsequently, traverse along the top (H0) before concluding with a Z to connect back to the starting point. Note that when utilizing uppercase letters, coordinates are absolute rather than relative. Hence, when specifying something like V0, it signifies 'move vertically until y equals 0'. Alternatively, using lowercase letters would denote a relative position based on the current cursor location.

The finalized path appears as follows:

<path class="polymorph" d="M0 300H652V0H0Z" fill="black"/>

You may insert additional spaces for improved readability, such as M0 300 H652 V0 H0 Z.

The target path closely resembles the initial path, with the exception of adjusting the V0 component. To ensure the black rectangle does not extend entirely to the top (y=0), maintaining its final height as 44 (as per your example), we need to set

V256</code, where <code>256 = 300 - 44

due to the viewBox's height being 300.

Therefore, the revised target path reads as follows:

{ value: 'M0 300H652V256H0Z'}

To address these challenges, it is advisable to disable the animation temporarily. Initially focus on rendering the target path within your static HTML content. Once you have achieved the desired visualization, proceed with implementing animations.

Answer 2

If I have grasped your question correctly, the issue with the first example lies in the fact that the target path does not align perfectly with your desired outcome.

Within the d value, there is a segment stating V895, which corresponds to point 895. However, considering your viewBox has a height of 932, there remains a 37-pixel gap at the bottom.

In contrast, your original path features V932, extending all the way down to the bottom.

I am uncertain about your intentions or how you arrived at this dilemma, but substituting V895 with V932 in the target d value should prevent the blue region's lower edge from creeping upward.

I am somewhat confused by the problem described in the second example. If the issue pertains to playing in reverse, wouldn't swapping the two paths suffice?

Update:

Firstly, I recommend consulting the MDN guide on SVGs, as it provides an excellent introduction to drawing fundamental shapes:

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

Your most recent example exhibits some peculiar inconsistencies concerning half pixels. Utilizing half pixels by itself poses no issues, yet maintaining consistency between the starting and ending paths appears lacking.

Here is one approach to achieving your desired effect.

Initially, let's outline the initial rectangle. While you could utilize <rect> for this purpose, I will adhere to employing <path> to maintain uniformity with your previous practices.

To begin, move the cursor to the image's bottom-left corner, denoted as M0 300. Proceed by drawing a horizontal line along the bottom (H652), followed by moving up the right-hand side (V0). Subsequently, traverse along the top (H0) before concluding with a Z to connect back to the starting point. Note that when utilizing uppercase letters, coordinates are absolute rather than relative. Hence, when specifying something like V0, it signifies 'move vertically until y equals 0'. Alternatively, using lowercase letters would denote a relative position based on the current cursor location.

The finalized path appears as follows:

<path class="polymorph" d="M0 300H652V0H0Z" fill="black"/>

You may insert additional spaces for improved readability, such as M0 300 H652 V0 H0 Z.

The target path closely resembles the initial path, with the exception of adjusting the V0 component. To ensure the black rectangle does not extend entirely to the top (y=0), maintaining its final height as 44 (as per your example), we need to set

V256</code, where <code>256 = 300 - 44

due to the viewBox's height being 300.

Therefore, the revised target path reads as follows:

{ value: 'M0 300H652V256H0Z'}

To address these challenges, it is advisable to disable the animation temporarily. Initially focus on rendering the target path within your static HTML content. Once you have achieved the desired visualization, proceed with implementing animations.

The SVG animation is reversing and decreasing in size from the bottom

Answer №1

Similar questions

Illustrating SVG links

Having trouble with implementing checkbox hack syntax

Having trouble getting the full width of a hidden div to work properly?

Why is it that a click event outside of an HTML element cannot be detected in this Vue 3 application?

The challenge of removing an event listener

Building chat rooms using VueJS

What could be causing the lack of functionality in my nested CSS transition?

The `sameAs` validator in vuelidate does not function properly when using the `not` validator with a computed value

"While attempting to delete an object with axios and Symfony, a status code 500 was returned. However, the

The menu on the webpage in smartphone mode is infiltrating other divs on the page

Tips for updating the current user's username value in local storage in Angular

Why is the last move of the previous player not displayed in this game of tic tac toe?

Issues arise with the Dropend Menu in Bootstrap when attempting to utilize a dropdown menu

Scrolling in Bootstrap 4 Cards conceals the fixed Header

What could be causing the undefined status of this length function?

What is the best way to load the contents of an HTML file into a <div> element without it behaving as an object?

What causes the error message "Request payer account number does not match session" to appear when utilizing the PayPal smart button with multiple recipients?

What could be causing my jQuery animation to lack smoothness?

What is the best way to manage horizontal scrolling using buttons?

Is it possible to arrange elements in CSS based on their attribute values?