Looking to transform an SVG into another?

After searching for an hour, I finally turned to SO and stumbled upon a tutorial on SVG shape morphing at https://css-tricks.com/svg-shape-morphing-works/. The tutorial instructs to create two SVGs with the same number of points and then provides code like this:

<svg viewBox="0 0 194.6 185.1">

  <polygon fill="#FFD41D" points=" ... shape 1 points ... ">

  </polygon>

</svg>

However, the tutorial lacks explanations about the created SVG images and their purpose. It mentions using "points," which I assume are some sort of coordinate system for plotting the image. The viewbox attribute value seems arbitrary.

I also explored GreenSocks' svgmorphing tool but found it too complex for simply morphing two 40px images together.

(The two images can be found at:

and

)

htmlcsssvg

Answer №1

When morphing between two paths, it is important that both paths have the same number and type of path commands. These commands are represented by single letters in the path definition under the attribute d="". To learn more about these commands, refer to the SVG spec.

The first SVG file (arr.svg) contains X commands:

arr.svg           add.svg
--------------    --------------
M12.222,13.293    M29.000,22.000
L7.000,13.000     L22.000,22.000
L17.172,23.899    L22.000,29.000
L17.172,23.899    L18.000,33.000
L20.000,26.728    L18.000,22.000
L20.000,26.728    L7.000,22.000
L20.000,26.728    L10.000,18.000
L22.828,23.899    L18.000,18.000
L22.828,23.899    L18.000,10.000
L33.000,13.000    L22.000,7.000
L27.778,13.293    L22.000,18.000
L20.000,21.071    L32.000,18.000
L14.343,15.414    L29.000,22.000
                  Z

Your two SVG files are very similar. By adding a 'Z' command to the first file, you should be able to animate them seamlessly.

<svg viewBox="0 0 121.5 60.834">
  
  <path d="">
    <animate attributeName="d" dur="2s" repeatCount="indefinite"
      keyTimes="0;0.5;1"
      values="M12.222,13.293 L7.000,13.000 L17.172,23.899 L17.172,23.899 L20.000,26.728 L20.000,26.728 L20.000,26.728 L22.828,23.899 L22.828,23.899 L33.000,13.000 L27.778,13.293 L20.000,21.071 L14.343,15.414 Z;
              M29.000,22.000 L22.000,22.000 L22.000,29.000 L18.000,33.000 L18.000,22.000 L7.000,22.000 L10.000,18.000 L18.000,18.000 L18.000,10.000 L22.000,7.000 L22.000,18.000 L32.000,18.000 L29.000,22.000 Z;
              M12.222,13.293 L7.000,13.000 L17.172,23.899 L17.172,23.899 L20.000,26.728 L20.000,26.728 L20.000,26.728 L22.828,23.899 L22.828,23.899 L33.000,13.000 L27.778,13.293 L20.000,21.071 L14.343,15.414 Z"/>
  </path>
  
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The form action now triggers the download of the PHP file instead of simply loading

I'm encountering an issue with the form on my website: <div class="searchBar"> <form action="searchDB.php" method="get"> <input type="text" class="searchBarInput" bdo dir="rtl" name="k"> <input type="image" cl ...

phphtml

Concealing the toolbars on iOS 7 with the overlay technique

After researching on Stack Overflow and Google, I have been trying to find a reliable method to hide the toolbars on iOS 7 since the old scroll trick is no longer effective. I came across this resource: I attempted the following code: <!doctype html& ...

javascriptjqueryioscss

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them. Currently, it appears like this: https://i.sstatic.net/F7Rqk.png My desired outcome is something similar to: https://i.sstatic.net/ALKa9.png CSS Code: .tabl ...

htmlcss

Display a Button exclusively at the bottom row of a Table using just Javascript

I am currently working on a 4-column table with a "+" button in the last column. This button's purpose is to add an additional column when clicked. However, the button is appearing in all rows of the table, and I would like it to be displayed only in ...

javascripthtmluser-interfacebootstrap-4

Problem encountered when attempting to insert a new division into an existing flexbox container

I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...

htmlcssflexbox

`Creating a HTML Table with Checkbox Options and PHP Variables`

My HTML table has 7 columns for data pulled from an XML feed and looped through for each item. PHP variables are assigned as follows: foreach ($xml->Game as $Game) { $Date = $Game->Date; $AwayTeam = $Game->AwayTeam; // Then, I assign arrays t ...

phphtmlarrayscheckboxhtml-table

What could be the reason for JavaScript delaying the execution of DOM statements until a variable is true?

Today I've been tackling numerous bugs, but there's one particularly tricky bug that has me stumped. The snippet of code below pertains to a basic logon page. Currently, the only valid username is 'admin' and the corresponding password ...

javascripthtmldom

The JavaScript code functions perfectly when inputted directly into the Chrome Developer Console and executed, however, encounters an error when run from the index.html file using the src tag

I am starting from scratch with web development. On my page, there is an image carousel with two buttons for navigating between different images. When I use Brackets live preview to test my website, I encounter the following error message. Uncaught TypeErr ...

javascripthtmlcss

Developing an interactive website utilizing AngularJS, WCF Service, and SQL Server

Exploring the possibilities of creating a web application, I stumbled upon AngularJS. With plans to incorporate WCF Service and SQL Server into my project, I am intrigued by what these technologies can offer. I want to ensure that AngularJS aligns with my ...

javascriptjqueryhtmlwcfangularjs

IE11 displaying errors with flex-box layout in Angular8 causing screen misalignment

I'm currently experiencing a CSS issue specifically in IE11, as it seems to work fine on all other browsers except for this one. The problem arises due to the length of a string causing the screen not to fit properly within the browser window. To add ...

cssbootstrap-4flexbox

The flex container is expanding larger than its parent container due to the height of its child elements

I have designed the following HTML element. In this case, the remaining-height class is intended to be the remaining height of the container-div, which should be 100 - 15 = 85px. However, because the grand-child-div has a height of 200 px, the remaining-h ...

htmlcss

Reducing the size of an internal label within a flex container

Hello everyone, I could really use some assistance here. The problem I'm facing involves a flex-container with tabs (the number of tabs can vary as they are passed as an array in a React component). Each tab consists of a label and a span with a numb ...

cssreactjsflexboxwidthstyled-components

Eliminate perfect-scrollbar functionality on mobile devices

I have applied the perfect-scrollbar class with 'height: auto' on mobile screens, expecting it to work properly. It's functioning well in responsive mode on the web. However, it does not scroll on mobile devices. @media (max-width: 992px) { ...

cssangular

Do you require a lightbox for a white text box set against a semi-transparent black background?

Currently, I am in the process of developing a Chrome extension that will be compatible with my Android app. As part of this development, I need to code the HTML/CSS for the extension. The main functionality of the extension allows users to add tags to a s ...

htmlcssgoogle-chrome

Is it possible for the scroll event to be triggered while scrolling only when a div element is used?

While utilizing window.onscroll to track scroll events during scrolling, I noticed that in certain Android devices the scroll event is only triggered after the scroll has completed. However, when monitoring scroll events within a specific div element, it ...

javascriptandroidhtmlcss

The elements on the webpage are spilling over with content

I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result: https://i.stack.imgur.com/5qHJY.jpg Be ...

htmlcssangularflexbox

Issue with code displaying boxes according to selected radio checkboxes

I stumbled upon this Code Snippet, but for some reason, I can't seem to make it work on my website or even on a simple test page. I'm not sure what I'm overlooking? Check out the JS Fiddle: http://jsfiddle.net/technologrich/tT48f/4/ I&apos ...

javascripthtml

What is the reasoning behind the return type of void for Window.open()?

There is a difference in functionality between javascript and GWT in this scenario: var newWindow = window.open(...) In GWT (specifically version 1.5, not sure about later versions), the equivalent code does not work: Window window = Window.open("", "", ...

javascripthtmlgwt

Struggling with Internet Explorer?

My script is working perfectly on all browsers except for Internet Explorer. The script refreshes the page to display a chat, but it seems to be causing issues in IE. Do you have any suggestions on how to make this work specifically for Internet Explorer? ...

phpjqueryhtmlajax

How can you adjust a background image to perfectly fit across various screen sizes?

I am just starting out with web development and I am building a website using HTML/CSS. The background of my site looks good on my macbook pro, but when I try to view it on a larger screen, the background repeats and the content stays in the top left corne ...

htmlcssbackgroundresizescreen