Making shape materials look close to the actual design, dark inner shadows and lite fill colors

Questions
, , , ,
1

Hello there,
I am working on this project, The idea is to have these shapes follow the mouse position in a parallax manner with concentric color animation.

image
image1920×997 66.5 KB

for context:
it started of as plain react project with DOM elements manipulation, Standard stuff.
https://codesandbox.io/p/sandbox/compassionate-hugle-ml7ll7 ← (use chrome or brave to view else the svg filters kills some browsers)

Later on moved to playing around with shader to see if I can get something close enough to above.

struggled alot with getting things right, But learned a ton.

Final stop: Giving it a go using Three js/R3F:
I got the basic parts in place here:
https://codesandbox.io/p/sandbox/zealous-hertz-8ljhsk

The thing I am struggling with here is the materials, Not sure what to use to make it look close to the screenshot above. (dark inner shadows and lite fill colors, etc…)

I am very new to shaders and Three Js,
Any help/suggestions will be appreciated.

Cheers.

2

When it comes to gradient fill, you can check the code for contour gradient here:

the solution is based on passing the info about the lines the shape is made of into the shader and colorize depending on the pixel distance from the shape border.

Also, you could use edge highlighting to achieve this effect, here is an example: