Absolute Radial Gradient [Question]

[dickinson0718]

Describe your question
I'm wondering if there is a way to have multiple objects have the same radial gradient? By this I mean there would be one universal radial gradient and each object would be a window on to the same radial gradient. Currently I think that the units you are using are units scaled to each individual object. The units of "objectBoundingBox" as described at the bottom of this page. Changing to "userSpaceOnUse" units (as described on the bottom of the same page) maybe be the solution? However I'm not familiar enough with exactly how SVG works to determine if this would allow me to do what I want to do. Below is my attempt to describe what I'm after.

Update: I found the "userSpaceOnUse" unit and they don't quite do want I want. The units are still relative to the object. For example, (0,0) still appears to be the center of each object. (See the commented out portion of the CodePen example below.) I would like for there to be units (or something..) where in one radial gradient (0,0) is the center of the entire scene, then each object assigned that gradient would show their portion of the gradient where ever the object happens to be.

Your code (either pasted here, or a link to a hosted example)
Using the options that I know about, this is how two.js currently works with gradients. Notice that there are two rectangles and each contains a half circle worth of radial gradient and the pattern in each rectangle is translated.

I would like to assign a common radial gradient to each rectangle and then for both rectangles there is one center and one radius and one set of gradient stops. This would look exactly like the codepen example above, except the pattern in each rectangle would appear to be a reflection over the line common to both rectangles. Said differently, it would look like one green (spreading to red to blue) centered circle spread across two rectangles.

Does this make sense?

Thanks for being an active maintainer!

Will

[jonobr1]

Unfortunately, that's not how (at least from testing Chrome and Safari) browsers render userSpaceOnUnits. While the number value is in the coordinate space of the user. The center is still anchored to the object that is invoking the gradient. So, in your example you'd need two separate gradients that consider the offset transform of the objects that they are referencing.

Or, you could use masks: https://codepen.io/jonobr1/pen/abyRyoY
As you eluded to in your question, the clipping mask acts as a window into an entire group of Two.js objects.

Hope this helps,

[dickinson0718]

think I can create separate gradients for each object and then transform them appropriately based on the object they are attached to so that they appear to be the windows that I was hoping for.

Clipping mask doesn't quite solve the issue I'm dealing with.

Thanks Jono.

PS. I love the fun creative nature of the background in your code pen example!

[jonobr1]

Makes sense.

It would be a cool feature to add and change the units space to work how you've described.