Can anyone help with svg animation?

[sshendric (sergey shendrik)]

Hello everyone,

Perhaps someone can point me to the right direction on this one.

This is what I have right now: link

The X in a square … when you hover over it, animation goes fine until it becomes a cross within a circle.

Now, the idea is to move each line of a “cross” about 10px so it would look like this

I’ve tried to animate a drawing of a square and its working fine, but its done via drawing each side of a square with <path … > and then animating it with svg. However, i can not “spin” it after.

So i have to use div and then spin it like:
in .css
.rotate{
border: 2px solid white;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
}
.rotate:hover{
border-radius:50%;
-webkit-transform:rotate(405deg) scale(0.75);
-moz-transform:rotate(405deg) scale(0.75);
-ms-transform:rotate(405deg) scale(0.75);
-o-transform:rotate(405deg) scale(0.75);
transform:rotate(405deg) scale(0.75);
}

and the X is .png file which I wrap around that div and rotate it until I get the + shape.

any help is greatly apreciated

[coolest_vlad (Vlad Radchenko)]

From what I understand you want to separate the plus sign that currently looks like this:

To do this you will have to have the + or X whatever you want to call it, 4 different lines made in Webflow rather than a full connected .png; for you then won’t be able to separate the picture apart if it is a .png.

Also I would stick with using the Webflow Div lines because on my iMac 4k the .png looks very blurry while the Webflow lines look sharp.

Hope this helps. If not, be sure to ask more questions.