Animating SVG from upper left corner to lower right corner

I am looking to create an animation on this SVG that starts from the top left and ends at the bottom right, similar to a gif. You can view the example I want to replicate in the following link: 

body {
  background: black
}

path {
  fill: white;
}


/* Animation settings */

@keyframes fadein {
  0% {
    fill: black;
  }
  50% {
    fill: gray;
  }
  100% {
    fill: white;
  }
}

@keyframes fadein2 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
  }
  100% {
    fill: white;
  }
}

.svg-wrapper:hover .S {
  animation: 1s fadein;
}

.svg-wrapper:hover .L {
  animation: 1s fadein2;
}
<a href="" class="svg-wrapper" style="margin: 100px auto; display: block; width: 200px">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1239.6 785.2">
    
    <path class="S" d="M0,784.1c258.1-165.5,516.2-330.9,775.1-496.9c-4.1-1.6-378.2-119.5-388.9-123.6c-30.7-12-50.5-43-52-75.9
        c-2-44.5,35.1-87.9,87.8-87.7c156.5,0.5,473.8,0.2,476.2,0.2c0,33,0,65.6,0,98.7c-129.3,0-258.7,0-388.1,0
        c-0.1,0.3,218.8,69.6,326.4,103.2c29.9,9.3,50.9,27.6,59.3,58.6c8.9,33.3-3.7,68.4-32.6,87.2c-55.6,36.3-682.7,437.1-685.2,437.1
        c-58.2,0.1-176.7,0.1-177.8,0.1C0.2,784.8,0.1,784.5,0,784.1z"/>
      
    <path class="L" d="M1239.6,785.2c-1.7,0-486.9,0.1-727.9-0.1c-33.8,0-58.7-15.8-72.6-46.4c-14-30.8-10.9-65.2,12.1-86.5
        c22-20.4,445-289.4,447-290.7c0.1,1.7,0.3,76.5,0.4,112.6c0,3.7-320.6,210.2-323.1,212c3.2,0,337.4,0,502.5,0.1c1.7,0,4-0.4,5.9,0.3
        c1.9,0.7,3.1,1.7,4.7,2.7C1137.7,719.9,1239.7,784.9,1239.6,785.2z"/>
    </svg>
</a>

cssanimationsvgsvg-animate

Answer №1

To create a visually appealing animation, apply the transform property along with the translate function

body {
  background: black
}

path {
  fill: white;
}


/* Customize animation below */

@keyframes comeFromTop {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(0%) translateY(0%);
  }
}

@keyframes fadein {
  0% {
    fill: black;
  }
  50% {
    fill: gray;
  }
  100% {
    fill: white;
  }
}

@keyframes fadein2 {
  0% {
    fill: black;
  }
  50% {
    fill: black;
  }
  100% {
    fill: white;
  }
}

.svg-wrapper:hover .S {
  animation: 1s fadein;
}

.svg-wrapper {
  animation: 1s comeFromTop;
}

.svg-wrapper:hover .L {
  animation: 1s fadein2;
}
<a href="" class="svg-wrapper" style="margin: 100px auto; display: block; width: 200px">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1239.6 785.2">
    
    <path class="S" d="M0,784.1c258.1-165.5,516.2-330.9,775.1-496.9c-4.1-1.6-378.2-119.5-388.9-123.6c-30.7-12-50.5-43-52-75.9
        c-2-44.5,35.1-87.9,87.8-87.7c156.5,0.5,473.8,0.2,476.2,0.2c0,33,0,65.6,0,98.7c-129.3,0-258.7,0-388.1,0
        c-0.1,0.3,218.8,69.6,326.4,103.2c29.9,9.3,50.9,27.6,59.3,58.6c8.9,33.3-3.7,68.4-32.6,87.2c-55.6,36.3-682.7,437.1-685.2,437.1
        c-58.2,0.1-176.7,0.1-177.8,0.1C0.2,784.8,0.1,784.5,0,784.1z"/>
      
    <path class="L" d="M1239.6,785.2c-1.7,0-486.9,0.1-727.9-0.1c-33.8,0-58.7-15.8-72.6-46.4c-14-30.8-10.9-65.2,12.1-86.5
        c22-20.4,445-289.4,447-290.7c0.1,1.7,0.3,76.5,0.4,112.6c0,3.7-320.6,210.2-323.1,212c3.2,0,337.4,0,502.5,0.1c1.7,0,4-0.4,5.9,0.3
        c1.9,0.7,3.1,1.7,4.7,2.7C1137.7,719.9,1239.7,784.9,1239.6,785.2z"/>
    </svg>
</a>

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

Stock Chart that resembles the functionality of Google's popular line chart feature

Can anyone recommend a Javascript or SVG chart library that has a style similar to a Google Chart? I have been searching without much luck and would appreciate some guidance on how to achieve a similar look. I've looked into the Google Visualization ...

javascriptangularjssvgchartsangular-material

Problematic situation concerning the lack of effectiveness of jQuery's .removeClass() function

I am encountering a strange issue with some code that adds and removes classes from an element in JavaScript. Despite my best efforts, I cannot replicate the odd behavior in a simple jsfiddle example. Below is the relevant section of JavaScript that is ca ...

jquerycssjquery-uisettimeout

Customize the MUI Slider Component with unique colored thumbs

Check out MUI's slider component at this link. I'm using it to let users select a value range with two thumbs. You can find the documentation for MUI's multi-thumb slider here. If you want to customize the style of the slider thumb, visit ...

javascriptcssreactjsmaterial-uislider

Manipulate CSS using jQuery's ID selector

I am attempting to modify a particular style of a div by its unique id, but it appears that my code is not functioning properly. The relevant codes are provided below: Jquery: $(document).ready(function () { $(".a_10.08.201223:56:49").hover(function(){ ...

jquerycss

Injecting CSS into a dynamically created element within a Polymer component using jQuery

Having an issue when trying to add a CSS class to a jQuery created element within a Polymer component. The code for the Polymer component is as follows: <dom-module id="image-add"> <style> .image { height: 100%; } </sty ...

jquerycsspolymer

The absence of a datepicker in Bootstrap has become glaringly obvious

My form includes a single date input using <input type='date' class='form-control'>. When utilizing the form-control feature from Bootstrap 5, the default white color is applied to the date picker, matching the rest of the form. ...

htmlcssbootstrap-5

Tips for arranging headers next to each other on a restaurant menu

I'm currently working on a website for a local restaurant, my very first project of this kind. As I draft the menu section, I'm struggling with displaying Starters and Main Courses side by side on the screen. Additionally, the layout falls apart ...

htmlcssflexboxbootstrap-4

You are unable to use multiple background colors on a material UI snackbar

Is there a way to apply multiple background colors to a material UI snackbar? I attempted using linear-gradient as shown below, but it didn't work. import Snackbar from 'material-ui/Snackbar'; const bodyStyle = { border: `2px solid ${co ...

javascriptcssreactjsmaterial-uisnackbar

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...

javascriptjqueryhtmlcss

Troubleshooting: Issue with CSS chaining adjacent sibling and :checked functionality

When I click the second radio button in Chrome, why does paragraph 2 stay highlighted and paragraph 4 doesn't get highlighted? Is this a bug with Chrome? HTML: <input type="radio" name="toggler" checked /> <p>Paragraph one</p> < ...

cssgoogle-chromecss-selectorspseudo-class

Aligning items vertically within a container with a constant height

I'm currently working on a website that requires a pixel-based navbar with a height of 80px. The issue I'm facing is the difficulty in vertically centering the ul and li elements. I have experimented with various methods such as using top:50%; ...

htmlcssflexboxcss-position

Integrate a scrollbar seamlessly while maintaining the website's responsiveness

I encountered an issue where I couldn't add a scrollbar while maintaining a responsive page layout. In order to include a scrollbar in my datatables, I found the code snippet: "scrollY": "200px" However, this code sets the table size to 200 pixels r ...

javascriptjqueryhtmlcssdatatables

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...

javascripthtmlcss

Leveraging the Power of CSS in Your Express Applications

Struggling to make my CSS links functional while working on localhost. Currently, when I view Index.html on my server, it displays as plain text without any styling. Even after trying the express middleware, the CSS files are still not being served, result ...

javascripthtmlcssnode.jsexpress

Steps to shorten HTML content while maintaining consistent column width

Is there a way to ensure that the fixed column width is maintained even with long strings? I am trying to display a report in a jsp by having headers in one table and content in another table, both with columns set to the same width. However, some of the ...

htmlcss

Is there a more efficient approach to extracting the border width using javascript?

I implemented the following code: const playGard = document.getElementsByClassName("playGard")[0]; const borderW = getComputedStyle(playGard,null).getPropertyValue('border-left-width').substr(0,2); The result I obtained was "10". Is there a m ...

javascriptcssgetcomputedstyle

Changing styles with the use of bootstrap.css themes on the fly

I'm experimenting with toggling between a custom dark and light theme in my MVC application. On the _Layout.cshtml page, the default theme is loaded by the following code: <link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original. ...

javascripthtmlcssasp.net-mvc

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss

Making a div element shift position in response to the user resizing the window

Unique Content: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery-1.6.4.min ...

htmlcss

Internet Explorer is automatically inserting extra vertical space after the first list item in a basic menu design

Does anyone else have trouble with IE? (Or is it just me?) I'm creating a list with a background. The first and last LI elements are 5px high, while the others are 16px high. However, in IE there's a strange blank space between the first and se ...

jquerycssinternet-explorerhtml-lists