How to stack and animate 2 svg paths?

Question

I'd like to animate my logo by filling circle with water and moving my logo inside the circle. I have 2 separate svg paths. One of water and second of my logo. When I try to animate them by putting in div #banner I get both animated but logo is 'out of view'. I tried adding z index but it didn't help. Here's my code:

 .logo{z-index:1000;
    position: relative;}
    
    #banner {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background: #b7c6ce;
        overflow: hidden;
        backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
    }
    #banner .fill {
        animation-name: fillAction;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(.2, .6, .8, .4);
        animation-duration: 4s;
        animation-fill-mode: forwards;
    }
    #banner #waveShape {
        animation-name: waveAction;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 0.5s;
        width:300px;
        height: 150px;
        fill: #04ACFF;
        z-index:-1;
    }
    
    @keyframes fillAction {
        0% {
            transform: translate(0, 150px);
        }
        100% {
            transform: translate(0, -5px);
        }
    }
    @keyframes waveAction {
        0% {
            transform: translate(-150px, 0);
        }
        100% {
            transform: translate(0, 0);
        }
    }

I took code from [https://stackoverflow.com/questions/29738787/filling-water-animation/29740828#=][1]

[1]: http://wateranimation tried to edit but no luck so far. Many thanks in advance for help, Neko

Paul LeBeau · Accepted Answer

You have two problems:

The logo is first in the SVG file, so it is hidden behind the blue water. You need to move it so it is after the water path.
The logo is too large relative to everything else, so you need to scale and move it a bit so it is in the right place and is the right size. To do that, I added a transform to the logo path:
```
transform="scale(0.3,0.3) translate(30,-30)"
```

With those changes, you get a better result.

.logo{z-index:1000;
    position: relative;}
    
    #banner {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background: #b7c6ce;
        overflow: hidden;
        backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
    }
    #banner .fill {
        animation-name: fillAction;
        animation-iteration-count: 1;
        animation-timing-function: cubic-bezier(.2, .6, .8, .4);
        animation-duration: 4s;
        animation-fill-mode: forwards;
    }
    #banner #waveShape {
        animation-name: waveAction;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 0.5s;
        width:300px;
        height: 150px;
        fill: #04ACFF;
        z-index:-1;
    }
    
    @keyframes fillAction {
        0% {
            transform: translate(0, 150px);
        }
        100% {
            transform: translate(0, -5px);
        }
    }
    @keyframes waveAction {
        0% {
            transform: translate(-150px, 0);
        }
        100% {
            transform: translate(0, 0);
        }
    }

How to stack and animate 2 svg paths?

Answers (1)

Related Questions