The Orange

Alex — Sun, 31 Mar 2024 10:35:38 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

I find an Orange a nice and refreshing snack. To statisfy the requirements of this challenge I could have just done an orange with some gradients for a bit of depth and called it a day... but where's the fun in that 😉

Demo

The orange itself is made purely with CSS, utilising radial gradients to smooth out the jump between the orange peel and the pith. The orange segments themselves are created using a clip path, along with the stem and the leaf. Each segment is a repeat rotating around the center of the orange and another radial gradient is used to create a slight reflection effect on the outside of the orange.

Now this part could be considered a bit of a cheat given that there is the smallest amount of JS present directly in my demo (one could consider it bleeding edge, whatever works for you). However this is enabling the use of the CSS paint api feature (that you'll likely only be able to see work properly/at all in Chrome at the moment). I'm using a CSS Houdini Paint Worklet that creates a Voronoi diagram that I felt could give a slightly more interesting/fun representation of the cell structure that appear in the segments of an orange.

^{This probably only works in Chrome based browsers...}

Header image generated using Microsoft Copilot.

DEV Community: Alex

[Boost]

A Pragmatic Look at AI in 2030

[Boost]

Dialogs, Popovers & the Top Layer Mess

Andrew Bone ・ Feb 18

The Orange

Inspiration

Demo