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

Removing the blue border around a button upon being clicked

VueJS / v-html is displaying a blank page (Bokeh-html)

Browser does not support the Media Query

Issue with CSS not loading correctly when switching routes in AngularJS using Gulp and Router

Discover the possibilities of setting the dimensions of your anchor tags using only inline-block spans

Tips on integrating data from Vuex into your component

Application with menu design, similar to the layout of google.com on mobile devices

Selected Angular Radio Button

Two CSS borders of varying heights

The grid layout in Bootstrap 4 does not seem to be compatible with dompdf

Refresh the content of VueJS Resource

What could be the reason for my onChange event not functioning properly?

Issue with background/hero video not adjusting its size

Difficulty arises with z-index when hover effects are applied to clip-path shapes

What sets apart the intended usage of the DOM `hidden` from the CSS `visibility` property?

Is there a way to temporarily toggle classes with jQuery?

What is the most efficient method for identifying and modifying an element's in-line style while performing a swipe gesture?

What could be causing jQuery animate to malfunction on mobile devices when a viewport is present?

State in Vuex is failing to update effectively when actions are being utilized

Is there a way to verify if a mixin has been successfully applied to the component?