How to download animated SVG file from website?-CodePudding

Is there any way we can download animated SVG files from the website - like from Inspect dev tool ?

I wanted to examine how the animation work by importing into after effect, but right clicking and copy/paste the SVG file just copies non-animated SVG...

Here is the example I found - there is an animated SVG file in the top hero section.

https://evervault.com/

CodePudding user response：

Yep, you can just open developer tools on browser of your choice and use "Copy->Copy Outer HTML" on SVG element. Doing this and pasting the SVG to new HTML file got me the animated lines form website you have provided.

You might as well save the copied code as .svg file and it should be enough for you to open it with supported software.

Working HTML example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="100vw" viewBox="0 0 1920 700" fill="none" >
        <path
            d="M1 3.00354C179.628 198.347 377.216 285 632.684 285C888.152 285 973.973 285 1290.31 285C1606.65 285 1797.76 143.751 1921 1.00002"
            stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
        <path d="M1 197.5C185.5 282.5 336 320 631 320C926 320 980 320 1291 320C1602 320 1746.5 276.5 1921 197.5"
            stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
        <path d="M1 354H1921" stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
        <path d="M1 510C185.5 425 336 387.5 631 387.5C926 387.5 980 387.5 1291 387.5C1602 387.5 1746.5 431 1921 510"
            stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
        <path
            d="M1 704.996C179.628 509.653 377.216 423 632.684 423C888.152 423 973.973 423 1290.31 423C1606.65 423 1797.76 564.249 1921 707"
            stroke="url(#path)" vector-effect="non-scaling-stroke"></path>
        <line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
            transform="translate(-80,0)" vector-effect="non-scaling-stroke">
            <animateMotion dur="3s" repeatCount="indefinite"
                path="M1 3.00354C179.628 198.347 377.216 285 632.684 285C888.152 285 973.973 285 1290.31 285C1606.65 285 1797.76 143.751 1921 1.00002"
                rotate="auto" begin="1"></animateMotion>
        </line>
        <line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
            transform="translate(-80,0)" vector-effect="non-scaling-stroke">
            <animateMotion dur="2.5s" repeatCount="indefinite"
                path="M1 197.5C185.5 282.5 336 320 631 320C926 320 980 320 1291 320C1602 320 1746.5 276.5 1921 197.5"
                rotate="auto" begin="5"></animateMotion>
        </line>
        <line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
            transform="translate(-80,0)" vector-effect="non-scaling-stroke">
            <animateMotion dur="4s" repeatCount="indefinite" path="M1 354H1921" rotate="auto" begin="3"></animateMotion>
        </line>
        <line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
            transform="translate(-80,0)" vector-effect="non-scaling-stroke">
            <animateMotion dur="3.5s" repeatCount="indefinite"
                path="M1 510C185.5 425 336 387.5 631 387.5C926 387.5 980 387.5 1291 387.5C1602 387.5 1746.5 431 1921 510"
                rotate="auto" begin="2"></animateMotion>
        </line>
        <line x1="0" y1="0" x2="80" y2="0" stroke="url(#datum)" stroke-width="2" stroke-linecap="round"
            transform="translate(-80,0)" vector-effect="non-scaling-stroke">
            <animateMotion dur="4.5s" repeatCount="indefinite"
                path="M1 704.996C179.628 509.653 377.216 423 632.684 423C888.152 423 973.973 423 1290.31 423C1606.65 423 1797.76 564.249 1921 707"
                rotate="auto" begin="0"></animateMotion>
        </line>
        <defs>
            <linearGradient id="datum" x1="0" y1="0" x2="80" y2="0" gradientUnits="userSpaceOnUse">
                <stop stop-color="transparent " offset="0"></stop>
                <stop stop-color="white" offset="1"></stop>
            </linearGradient>
            <linearGradient id="path" x1="0" y1="0" x2="100%" y2="0" gradientUnits="userSpaceOnUse">
                <stop stop-color="transparent " offset="0%"></stop>
                <stop stop-color="var(--primary)" offset="10%"></stop>
                <stop stop-color="var(--primary)" offset="90%"></stop>
                <stop stop-color="transparent" offset="100%"></stop>
            </linearGradient>
        </defs>
    </svg>
</body>

</html>

CodePudding user response：

There is no such thing as an "animated SVG". That site is using Javascript to modify the base SVG file on the fly.