Blocs + Animated SVG

We’ve just updated our website!!! Now Blocs + Animated SVG :slight_smile:

Power of Blocs App! :heart:


Looks nice @mackyangeles, the tile should be “Blocs + Keyshape = Animated SVG” :wink: :stuck_out_tongue_winking_eye:

I’m just curious why not 1 SVG vs using 2 like you did ?

1 Like

Hi @Blocs_User, thank you! :slight_smile: yep! Keyshape is awesome!

Why not 1 SVG vs using 2? I have to set it as background. So I have to separate the bloc for content :slight_smile:

Yeah sorry I spoke without observing things enough, I was focused more on the SVG itself, oops. :wink:

1 Like

@mackyangeles Sweeeet! very nice indeed. How exactly did you achieve this? Could make a wild guess but would love to know if you feel like sharing.

1 Like

Just create an Animated SVG via Keyshape and set it as background :slight_smile:

1 Like

@mackyangeles I just looked this is up on the website and SVG browser compatibility varies widely depending on the usage. Have you have tested this with browsers like IE and Edge to see what happens?

Surprisingly, it works fine on latest Edge but not on IE11 with Win10 (all up to date).

When factoring using “cool effects” you might want to check page speed…just a tip.

Google Page Stats:

PSI estimates this page requires 6 render-blocking round trips and 55 resources (6.7MB) to load. Fewer round trips and bytes results in faster pages.

The proper way to test page speed is by an actual test …the results do have to be with a “grain of salt” a bit but customers do just leave slow loading sites. It also affects your SEO. If you check your google analytics for example you will see the bounce rate improve in your favor with faster loading pages. Especially the home page…

May I ask, once you create it in Keyshape what export format and options do you use to make it work in Blocs ? Thanks for your help.

Animated SVG format

Hi Thanks for your prompt reply. @mackyangeles

However, under format only the following options are available :

  • SVG
  • SVG Compressed
  • PNG
  • JPG
  • Animated GIF
  • MPG-4

And under Animation the options are :

  • None
  • KeyShape JS Animation
  • CSS Animation
  • Image Sequence
  • Sprite Sheet

I have tried a number of different combinations but cannot get it right.

Which options have you chosen ?

Thanks again for your help.