Is it possible to control/customize WebGL background elements using CSS?

Site URL: https://steven.squarespace.com/home-2

The WebGL background that I'm using lets you adjust the size of floating shapes. I currently have it set to 20. Is it possible to change the size, for example, to 10 for mobile only using CSS? Any help would be greatly appreciated. Thanks.

1 hour ago, pro said:

Site URL: https://steven.squarespace.com/home-2

The background art that I'm using lets you adjust the size of floating shapes. I currently have it set to 20. Is it possible to change the size, for example, to 10 for mobile only using CSS or JS? Any help would be greatly appreciated. Thanks.

Which part are you mentioning about?

32 minutes ago, bangank36 said:

Which part are you mentioning about?

The blue shapes.

5 hours ago, pro said:

The blue shapes.

Try

section[data-section-id="62ec3a8368bdfa3285f350ca"] .section-background canvas {
  transform: scale(1.2);
}

Let me know how it works on your site

My testing

16 hours ago, bangank36 said:

Try

section[data-section-id="62ec3a8368bdfa3285f350ca"] .section-background canvas {
  transform: scale(1.2);
}

Let me know how it works on your site

Thank you, BaNgan. I see that you scaled the canvas, but not the shapes themselves. Is there a CSS code that would make the shapes smaller as opposed to making the canvas bigger? I also would like to reduce the number of shapes for mobile. Currently there are 100 shapes. But for mobile, I would like 20 shapes. Sorry, this issue is low-priority.

BaNgan, could you take a look at this page https://steven.squarespace.com. It's more important than the issue above 😁

I would like to customize the canvas for mobile:

1. Make it 200% wide
2. Center it horizontally

Could you help me with that? I'd be so grateful. Thank you in advance.