Safari can't animate defs

[benoit]

Hi,

 

This pen works on Chrome, FF, Opera… but nothing moves in Safari. Any idea ?

 

b.

See the Pen WdPjGr?editors=1010 by benoitwimart (@benoitwimart) on CodePen.

[OSUblake]

Any reason for doing it like that?

 

My advice for SVGs, don't use <use> ever. It can be really slow, and super buggy.

[benoit]

Thank you OSUblake !
I made this : https://jenseign.com/2018 with <use>, it's like an old flash movieclip ?
An alternative to <use> ?

[OSUblake]

That's pretty neat effect!

 

The best alternative is to just animate each element individually. Yes, it requires more tweens, but performance should be the same or better, and you don't have to deal with weird rendering issues. 

 

 

 

 

[OSUblake]

I'm also wondering if a pattern might work here. 

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

 

 

 

[benoit]

See the Pen ZvwjGR by benoitwimart (@benoitwimart) on CodePen.

it's fun and OK for Safari !

[benoit]

with x attr :

See the Pen PEVBGb by benoitwimart (@benoitwimart) on CodePen.

 

[mikel]

Hi @benoit,

 

super ... - I like it!

 

See the Pen YYBjNy by mikeK (@mikeK) on CodePen.

 

Best regards

Mikel

[OSUblake]

Nice!

 

For some pattern inspiration, you should check out Yoksel on CodePen. She does some pretty crazy stuff.

https://codepen.io/yoksel/

 

@Dipscom too. I know he has some good pattern animations buried somewhere on CodePen.

https://codepen.io/dipscom/