Re: [csswg-drafts] [css-images] Mesh gradient / Freeform gradient / 2D gradient (#7648)

I published [a blog post](https://www.joshtumath.uk/posts/2024-06-11-mesh-gradients-in-css/) about this yesterday. I'd thought of some questions around the details of how a freeform gradient function might work:

#### The name

Is the name right? Is 'freeform gradient' just an Adobe term?

#### Spread

Adobe Illustrator supports increasing the spread of the colour stops (i.e. how dominant the colour is). How would we specify that? Could each colour stop have an optional `<percentage>` or `<length-percentage>` value for specifying this?

```css
background-image: freeform-gradient(
  in oklab,
  red top left / 2%,
  gold 60% 40% / 4px,
  yellow bottom right %5
);
```

#### Specifying lines

Adobe Illustrator supports setting lines as well as points as colour stops. Is that something we would want to support in CSS, too? These would be some kind of linear path bezier path.

I know we have the `<cubic-bezier-easing-function>`, but that only accepts four arguments and doesn't allow you to create a continuous line with many bends on a set of coordinates. I imagine a new kind of positioning function might be needed. Maybe something like the `path()` function used in CSS Shapes?

#### Animation

We often see apps and websites use animated mesh gradients. I'd imagine this is computationally expensive to do unless it's pre-rendered.

I suppose, with this proposal, you could animate a freeform gradient by registering CSS custom properties using `@property` and animating the value changing.

-- 
GitHub Notification of comment by JoshTumath
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7648#issuecomment-2163568107 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 12 June 2024 17:30:22 UTC