How do I get my svg moving free in a background?

Question

How do I get my svg moving free in a background?

Asked 4 years, 9 months ago

Viewed 199 times

1

I have javascript animated path and want to move it freely through the background of my <body> so that this path exceeds the maxwidth it automatically appears on the opposite side (as a portal) . But for that I need to put a div as my background, because my svg paths are inside that div,

<div class= "meupath" <path d="MEU PATH"></div>

In css:

.body {
   background: src(.meupath)
   animation: move infinite 
}

@keyframes move {
   @-webkit-keyframes slide {
    from { background-position:(initial position) 0; }
    to { background-position: (final position) 0; }
    }
}

as an ex: https://codepen.io/subz/pen/GgPrJP

only instead of this background, it could be my "div" with my path inside.

would like clarification if possible.

Is it for a game or is it an effect on the page? I ask because if it is an animation for game it has to be done in javascript. If it’s an effect on the page, you can do it with CSS.

– Augusto Vasques

2019/10/01 at 05:12

1 answer

Browser other questions tagged javascript css svg

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-10-01T10:38:26+00:00

Dude I don’t know if I understand you because the code you used in the question is really weird, you can’t use the path, or polygon, or line, or rect so "loose" inside a div, these vectors must be within a SVG and not of a div.

Another bridge is the way you made yours background-position, (initial position) this syntax seems wrong to me... What if you want to animate a path/SVG that is on the page you do not have to animate the background, you have to animate the element itself.

Follow the image code above

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    height: 160px;
    background-color: #ddd;
}

svg {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translate(0, -50%);

    animation: anda 2s linear infinite;
}

@keyframes anda {
    to {
        left: 100%;
    }
}

<div>
    <svg xmlns="http://www.w3.org/2000/svg" viewbox="2 2 198 198">
        <polygon points="100,10 40,198 190,78 10,78 160,198" fill="black" style="fill:yellow" />
    </svg>
</div>

Option 2

In case you really want to wear one svg/path as background of a div you need to make some adjustments. First you have to declare your background-image as url("data:image/svg+xml; ... "); and put your path there, it would be like below.

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

After that you can manipulate the background-position to make the effect that you want, being that the initial value is 0 by default and the end I put 100%

Follow the image code above

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    height: 160px;
    background-color: azure;
}

.bg {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

    /* display: inline-block; */
    /* width: 100%; */
    /* height: 1.5em; */
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 32px 32px;

    animation: anda 2s linear infinite;
}

@keyframes anda {
    to {
        background-position: calc(100% + 32px) center;
    }
}

<div class="bg"></div>