Having difficulties creating an HTML SVG Welcome screen

I'm currently working on developing an engaging splash screen for my mobile application. To accomplish this, I need to utilize SVG, HTML, and CSS in order to align with the app's architecture.

The initial GIF represents the desired outcome that I am striving to achieve, while the second GIF showcases what I have managed to create so far.

My current obstacle involves creating a circular effect using <circle>, which has proven to be quite challenging. Additionally, I am looking to implement zoom in/out animations on the text elements and ensure that the background color fills the entire screen seamlessly.

This is the code snippet that I've been working with:

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

#jazztel {
  fill: white;
  animation-name: fill;
  animation-duration: 5s;
}

@keyframes colorChange {
  0% {
    fill: #da1884;
  }
  ...
</svg>

htmlcsssplash-screen

Answer №1

After successfully resolving all my issues, I have provided a snippet below showcasing the functional version.

I decided to eliminate the <rect> tag and opted for a <div> element to enclose the SVG while adding a background to address the issue of the background not occupying the entire screen.

To tackle the zoom problem on the text, I applied a transform: scale(x) to the aforementioned div rather than the actual text, which consists of multiple paths (applying it to the path wouldn't achieve the desired effect). This adjustment simulates bringing a painting closer to someone's face rather than directly zooming in on the text.

Lastly, concerning the <circle> effect, I removed the background color from the HTML tag and transferred it into the @keyframes section within the CSS.

@keyframes textColorChange {
        0% {
            fill: white;

        }
        50% {
            fill: black;

        }
        100% {
            fill: white;

        }
    }

    #jazztel {
        fill: white;
        animation-name: textColorChange;
        animation-duration: 5s;
    }

    @keyframes bgColorChange {
        0% {
            background-color: #da1884;
            transform: scale(1);
        }
        50% {
            background-color: #ffffff;
            transform: scale(1.5);
        }
        100% {
            background-color: #ffcd00;
            transform: scale(1);
        }
    }

    .splashBackground {
        background-color: #ffcd00;
        width: 100%;
        height: 100%;
        animation: bgColorChange 5s;
    }

    @keyframes circleTransition {
        0% {
            transform: scale(0);
            fill: #FFFFFF;
        }
        50% {
            transform: scale(1);
        }
        100% {
            transform: scale(0);
        }
    }

    .innerCircle {
        animation-duration: 3s;
        animation-name: circleTransition;
        transform-origin: center center;
    }
<div class="splashBackground">
    <svg width="100%" height="100%" viewBox="0 0 1131 1247" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle class="innerCircle" cx="50%" cy="50%" r="50%" />
        ...
        ... <!-- Insertion of additional SVG code would continue here -->
        ...
    </svg>
</div>

Visit this link for further reference.

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

SSL page on Wordpress struggles to load CSS files

My current website is on WordPress: The issue I am facing is on this particular page: , where the CSS is not loading correctly. This specific page uses SSL connection, and when checking through Firebug, I noticed that no CSS files are being sent. What co ...

htmlcsswordpressssl

Exploring the intricate design and information dynamics of MRAID 2

I am currently in the process of developing a new MRAID (v2) compliant SDK for Android that will enable rich media ads to be displayed within various android apps. Additionally, I plan to implement a backend platform that allows advertisers to create their ...

javascriptandroidhtmladsmraid

A versatile CSS and JavaScript slider component that is designed to be reused multiple times within a single webpage

Looking to create a CSS/jQuery slider that can be used multiple times on one HTML page. I have a client who wants sliders as category links, but I'm struggling to get it working as a single slider on a page. Can someone review the code and point out ...

javascriptjqueryhtmlcssslider

Guide on how to showcase the chosen option of a dropdown menu in a table by clicking an arrow icon

I am looking to modify the code below so that instead of pushing data to the selected panel, it pushes data to a table inside the panel. The new data should be added to a new row every time the arrow is clicked. <html> <head> <title>Bo ...

htmlangularjs

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

While working on a liquid layout, I have set all my width and height values in percentages. However, during the design process, I needed to check how my CSS was rendering so I temporarily set the height in pixels. Eventually, the height in percentage wil ...

css-floatcss

Issues with iOS 7's absolute positioning not functioning properly within a table-responsive container

I successfully implemented fixing the first two left columns in my tables by following the instructions on . The columns are only fixed when the screen size is less than 768px, making the table scrollable (check it out on jsFiddle). This functionality work ...

ioscsstwitter-bootstrapwebkit

Using JQuery with special characters in attributes

Within my jQuery script, I am required to dynamically translate certain content. As a part of this function, I have the following code: $('#password').attr('placeholder', 'Contrase&ntilde;a'); In this code snippet, I att ...

javascriptjqueryhtml

Tips for determining the size and identifier of a newly appended element in jQuery?

Struggling to create a select element with a width="347px" and id="select-box-1". I attempted to use .append("select"), but my search on .append() didn't yield the desired results. Unsuccessful Attempt: .append("< ...

javascripthtmld3.jsappend

How come my primary content is always spilling onto the header section?

Whenever I try to insert my header (after adding my context), it ends up getting placed below the context, making it invisible. I have attempted adjusting the padding and other sizes, but nothing seems to resolve the issue. https://jsfiddle.net/L30trdfn/ ...

html

Implementing modifications to all HTML elements simultaneously

In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...

javascripthtmlcss

Align labels on top and inputs at the bottom using Bootstrap

I'm facing an issue with alignment in my form using Bootstrap 4.4. Whenever a select element is included, it disrupts the layout by breaking the alignment of labels and inputs on the same row. Is there a way to always keep the labels at the top and t ...

htmlcssbootstrap-4

Maintaining the layout of two columns in Bootstrap 4, responsive design turns them into a single stacked

Currently using Bootstrap v4 with a two-column layout that splits the container in half. On larger screens, the items in each column display correctly. However, on smaller screens, Bootstrap shuffles the items from column 2 into column 1. I am looking to ...

htmlcsstwitter-bootstrap

Arranging xml information in chronological order using jQuery

I need help sorting and displaying date information extracted from a RSS feed. Can someone assist me with this? Thank you! $('#feedContainer').empty(); $.ajax({ type: 'GET', ...

javascriptjqueryhtmlxmlsorting

Modify the default navbar from Bootstrap to display as a fixed navbar

Is there a way to change my default navbar into a fixed navbar when I scroll? I have tried adding data-spy="affix" data-offset-top="200", which works but doesn't look quite right. Should I create a new CSS class or is there an easier solution availab ...

jqueryhtmlcsstwitter-bootstrap

the spillage exhibits only a thin streak of gray

My website is primarily a Single Page Website, however, there are specific pages that can only be accessed by registered users. On the website, there is a section referred to as a "block" where you will find a button labeled "Login / Register". Upon clicki ...

javascriptjqueryhtmlcssoverflow

downloading responsive design

Using media queries to define backgrounds with separate images based on browser size: @media (min-width:1440px){div.container{background:URL('bg1440.png');}} @media (min-width:960px){div.container{background:URL('bg960.png');}} @media ...

htmlcssmedia-queries

The element in the HTML source code evades detection by Selenium

Given: Python 3.11.2 Selenium 4.8.2 Chrome as the browser engine I am searching for the following HTML code snippet: <input type="text" class="datepicker apex-item-text apex-item-datepicker hasDatepicker" size="32" value= ...

htmlpython-3.xselenium-webdriverselenium-chromedriver

Once I incorporated Bootstrap into my project, I noticed a noticeable white space between the div elements

Welcome to My Code Playground I was sailing smoothly with my project until I decided to include Bootstrap. Seems like there's something missing in the details, so here I am reaching out. If you spot the issue, please feel free to correct my code. &l ...

javascripthtmlcssbootstrap-5division

Apply scrollbars to a div when its parent div is too small

I am facing an issue where the child div remains fixed in size, even when the parent div is smaller. I need the child div to stay within the parent div and show scrollbars when necessary. Check out the example here Here is the HTML: <div id="parent"&g ...

htmlcss

How to use CSS to ensure that divs inside table columns all have equal height

Click here to view my example. I have encountered an issue where if you have two table columns, one with taller content than the other, then divs inside the shorter column do not expand to match the height of the first column, even with a height set to 10 ...

csshtml-tablemultiple-columns