Unveil the stunning left-to-right SVG animation

I have two SVG images and I want to create an animation with them. The animation consists of revealing the text "Full Screen" from left to right using the first SVG, and then covering the word "Screen" with the second SVG to reveal the entire second image. In the end, the word "Full" will be filled in black from the second SVG, while the words "size view"

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 2408.08 168.78" style="enable-background:new 0 0 2408.08 168.78;" xml:space="preserve">
...

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 2408.08 168.78" style="enable-background:new 0 0 2408.08 168.78;" xml:space="preserve">
...

I am completely new to working with SVG and I don't know where to start :( https://i.sstatic.net/N6zF6.gif

htmlcsssvg

Answer №1

There are various methods to achieve this:

  • utilize clipping and animate the clip
  • employ masking and animate the mask
  • directly animate the cover (for instance, using stroke-dashoffset)
  • ... ?

You have the option to implement this with plain CSS or through javascript (potentially utilizing libraries like svg.js or snap.svg)

The most suitable approach depends on several factors.

Below is a (simplified) example, inspired by this website, utilizing a path element as a cover, stroke-dasharray representing "long line lone space", and animating stroke-dashoffset to achieve the desired outcome:

<!doctype html>
<html>
<head>
    <style>
        svg { background: black }
        #cover1 { animation: reveal1 2s linear; }
        #cover2 { animation: reveal2 2s linear forwards; animation-delay: 2s }
        @keyframes reveal1 {
            0% { stroke-dashoffset: 80; }
            100% { stroke-dashoffset: 0; }
        }
        @keyframes reveal2 {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: -80; }
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="75" height="30">
        <text y="20" fill="white">Full screen</text>
        <path id="cover1" d="M 22 15 H 80" stroke-dasharray="80 80" stroke-width="20" stroke="white"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="30">
        <text y="20" fill="lightgrey">size view</text>
        <path id="cover2" d="M 0 15 H 60" stroke-dasharray="80 80" stroke-width="20" stroke="black"/>
    </svg>
</body>
</html>

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 differences between xPages and HTML templates are evident in the varying sizes of their elements

When using a html template in an xPages application, I noticed that all elements appear slightly larger compared to a plain html page. Even when checking the values in Chrome debugger, they all seem to be the same. https://i.sstatic.net/F7VdJ.png https:/ ...

htmlcssxpages

Pass the callback function `cb_func` as a parameter to the `foobar` function when calling it in the `onclick`

I have an element that I want to trigger an onclick event with a callback function. Here is the code snippet: function cb_func() { alert("hello world!"); } function foobar(i, cb) { // do something if (cb != undefined) cb(); } onclic ...

javascriptjqueryhtml

What is the reason for having both "DOCTYPE: HTML5" and "HTML5" options in the web toolbar of VS 2012 RC?

Upon installing VS 2012 RC, I noticed that in the HTML toolbar dropdown, there are two options related to HTML5: DOCTYPE: HTML5 HTML5 I am curious to know what the distinction is between these two HTML5 choices. I was under the impression that the recom ...

htmlvisual-studio

The source of the image gets disrupted when it is not on the homepage

My images are stored in the directory images/icons/artist_default.png On the homepage, the image is displayed with this path: http://localhost:7777/images/icons/artist_default.png However, on a user's page like http://localhost:7777/user/giorgio-m ...

htmlcss

Update the text content in the specific span element when the class attribute matches the selected option in the

How can I dynamically update text inside a span based on matching classes and attributes without hardcoding them all? An ideal solution would involve a JavaScript function that searches for matches between span classes and select field options, updating t ...

javascriptjqueryhtmldrop-down-menu

What is the best way to keep a button visible at all times and active without needing to be clicked?

<v-card :style="{ textAlign: 'left' }" class="basic-card pa-6" :class="{ 'small-padding': !$vuetify.breakpoint.xl }" elevation="0" flat :height="windowHeight - 104 + 'px&ap ...

javascripthtmlvue.jsvue-componentvuetify.js

Having trouble with jQuery toggle fade: Unable to make the div fade in/out when toggling

Is there a way to modify the functionality of my black button so that when clicked, the red div fades out while the blue div fades in? Right now, clicking the button switches between the two divs without any fading effect. Fiddle: http://jsfiddle.net/ddac ...

javascriptjquerycss

Get the data in string format and save it as a CSV file

I've coded a script that transforms a JSON object into comma-separated values using the ConvertToCSV function. Now I'm wondering how to save the variable csvData as a downloadable CSV file? The code is already wrapped inside a function triggered ...

javascripthtmljsoncsv

Click to enlarge font size across the entire project

I'm working on a project for elderly users and my client wants a feature where they can easily adjust the font size throughout the application with just one click of a button. What is the best approach for implementing this functionality? My initial ...

jquerycss

Incorporating personalized CSS and JavaScript into Shopify

Currently, my project involves integrating vertical tabs into a Shopify page that is utilizing the 'Atlantic' theme. Since this particular theme doesn't come with vertical tabs built-in, I have incorporated external JS and CSS files known as ...

javascriptjqueryhtmlcssshopify

managing the action of a form to launch it with the help of facebox

Is there a way to use facebox to display a contact form and have the submit action also open in a facebox? Currently, I can easily open a link in a facebox using the rel attribute, like this: <a href="contact.html" rel="facebox">Contact</a> W ...

phpjqueryhtmlcssfacebox

What is causing the background image size to adjust when the carousel is toggled?

Can you help me understand why the background-image increases in size vertically when transitioning from url/path to url/path2? I need it to stay the same size as it toggles through all the images. What mistake am I making and how can I correct it? Snipp ...

htmlcssdebuggingbootstrap-4

I am experiencing an issue where the CSS file is not being loaded in my HTML file while using the Netbeans IDE

I am a beginner in HTML and CSS and I have been trying to link my CSS file to my HTML code after reading various solutions on Stack Overflow. Unfortunately, I am facing difficulty as the CSS file is not loading in my HTML code. If anyone can offer assistan ...

htmlcss

Move the Form to the Top of the Window and Highlight the First Input Field

There's a link in the header that says "Let's chat": <div class="letstalk"> <a href="javascript:scrollForm();"> Let's chat <img src="/wp-content/uploads/link-icon.png"> </a> </div> ...

javascripthtml

Adjust font size using jQuery and CSS styles

I'm currently working on a website where the body has a specified font-size property that is inherited by all elements on the page. Some tags on the page have font-sizes specified in percentages (%). Others are assigned sizes in pixels (px). I&apos ...

jqueryhtmlcssfonts

Showcasing a JavaScript array retrieved through JSON on a web page

Apologies if I am causing any inconvenience again =x Thanks to the assistance from everyone, especially Scott Harwell, I successfully passed my php array to a js array using the code below: var horse_array = <?php echo json_encode($horse_info);?>; ...

jqueryhtmlarraysjson

When trying to show a Vue view, there was an issue with reading properties of null, specifically the 'style' property

I am experiencing an issue with a header that has an @click event in the body. Instead of displaying a Vue view upon clicking, I am encountering the following error: Cannot read properties of null (reading 'style') Upon researching on Stack Ove ...

javascripthtmlcssvue.js

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

Issues encountered when dealing with floating elements and margins

Having some difficulties with aligning elements on my website. As someone who is not highly skilled in coding, I am struggling to define the width and float properties for certain classes. Despite my attempts, it seems that the elements are not positioning ...

htmlcsscss-floatmargin

Personalize the appearance of a component using React Bootstrap styling

I am looking to customize the default style of a react-bootstrap component. For instance, when using the Panel component, I would like to make the title bold. How can I accomplish this without losing the default styles of a "warning" panel when using bsCl ...

csstwitter-bootstrapreactjscustomization