Cursor hover distortion on svg background

Design help Animations & Interactions
1

Hello! I need help with this interaction, please.

I want to make a background to react to a cursor hover.
The actual background is a svg pattern made out of “+” (plus signs).
When the cursor hovers over the a “+”, the sign should scale up and rotate within its axis.

As I’m writing this, I just realised that the “+” could be a .json animated element or even an .apng, couldn’t it?

But, how can I make each “+” to react indenpendtly to the others? Does it need a custom code?

Thanks!

image
image3360×1944 371 KB

Here is my public share link: LINK
(how to access public share link)

2

Hi @tppms

You want each and every individual plus sign to scale up? When it scales up, then what is it going to do?

3

Hello @garymichael1313
Scale up X% when the mouse is hovering on it and go back to the original state when the mouse goes away.

4

Ok, I see. You can add one 1 interaction for all of them to make is easier. You’ll need a dummy element to start the class name that all of them will use. So it can be done.