Animated SVG

1

Hej

I have a customer that want to animate his logo. It is a lion head drawn in one single line. What would be the best app to animate it? I have checked Keyshape in the app store. I am a little worried about the Keyshape JS, because I am not skilled in implementing a JS library in RapidWeaver. It can do CSS animations though. Otherwise it looks really good.

Kind Regards
Kent

2

I think HypePro is a good Software to get something like that.
You can animate a single line easely. You have to redraw the path in Hype ( using VectorShape), or with original SVG but you have to use an external library " vivus.js".
I wrote an article on hypedocks about this. Here a demo
The export is responsive HTML, animated GIF or PNG sequence ( for videos).

1 Like
3

Hejsan

OK thank you, I actually have Hype Pro, but I have not been using it for some years now. I will look into it :-) Did not think about using Hype. It is off course an obvious contender.

4

I have made it. I simply made it with the online tool of Vivus, Vivus instant :-) https://maxwellito.github.io/vivus-instant/ and it works beautifully. Thanks a lot.

4 Likes
5

The vektor graphics I made in Affinity Designer.

7
4 Likes
8

That’s excellent. Great job!

1 Like
9

Nice result! the virus works in a different way but you can use external path, I use Affinity Designer with it. However the vector shape natively is better for controls and integration with Hype and you can also change the shape during the extrusion, here an example

2 Likes
10

Yes thank you, no doubt that Hype Pro is an amazing tool. I kind of do not have time to use it as much as I would. I hope I will get time to use it more in the future. Your example are amazing.

1 Like