Lea Verou Reporter
	Description • 4 years ago

Conic gradients [1] are useful for a number of effects on the Web that cannot be emulated in any other way (see [2]). They can be implemented in Cairo via mesh gradients. Please implement them.

[1]: http://www.w3.org/TR/css4-images/#conic-gradients
[2]: http://leaverou.github.io/conic-gradient

	Jeff Muizelaar [:jrmuizel]
	Comment 2 • 4 years ago

(In reply to Lea Verou from comment #0)
> Conic gradients [1] are useful for a number of effects on the Web that
> cannot be emulated in any other way (see [2]). They can be implemented in
> Cairo via mesh gradients. Please implement them.
> 
> [1]: http://www.w3.org/TR/css4-images/#conic-gradients
> [2]: http://leaverou.github.io/conic-gradient

Conic gradients are not natively supported by Direct2D, CoreGraphics and Cairo which means this is a bunch of work and without an implementation in other browsers not a high priority right now.

	Lea Verou Reporter
	Comment 3 • 4 years ago

(In reply to Jeff Muizelaar [:jrmuizel] from comment #2)

> Conic gradients are not natively supported by Direct2D, CoreGraphics and
> Cairo which means this is a bunch of work and without an implementation in
> other browsers not a high priority right now.


1. Re:Cairo, see above. See also [1], where conical gradients are actually mentioned as an example of a use case.
2. Have you investigated how much work it would be? Of course you can’t draw much from one instance, but the complexity seems manageable, based on my brief experience implementing a (partial) polyfill [2]. All it requires is an arc command, which all three (Direct2D, CoreGraphics, Cairo) do provide. The rest (color interpolation, compositing) are there already.

[1]: http://libregraphicsworld.org/blog/entry/mesh-gradients-in-cairo-now-official
[2]: http://leaverou.github.io/conic-gradient/

	Jeff Muizelaar [:jrmuizel]
	Comment 4 • 4 years ago

(In reply to Lea Verou from comment #3)
> (In reply to Jeff Muizelaar [:jrmuizel] from comment #2)
> 
> > Conic gradients are not natively supported by Direct2D, CoreGraphics and
> > Cairo which means this is a bunch of work and without an implementation in
> > other browsers not a high priority right now.
> 
> 
> 1. Re:Cairo, see above. See also [1], where conical gradients are actually
> mentioned as an example of a use case.

Our in-tree version of cairo doesn't support mesh gradients. Updating cairo is currently blocked
on switching away from cairo to Skia for rendering on Windows.

> 2. Have you investigated how much work it would be? Of course you can’t draw
> much from one instance, but the complexity seems manageable, based on my
> brief experience implementing a (partial) polyfill [2]. All it requires is
> an arc command, which all three (Direct2D, CoreGraphics, Cairo) do provide.
> The rest (color interpolation, compositing) are there already.

I haven't investigated how much work it would be. Can you describe how the polyfill works?

	Sreenivasulu S
	Comment 5 • 4 years ago

Conic gradients are quite powerful in creating cool looking effects.
Definitely, it is a useful in the toolkit of a web developer.
This is needed to be implemented in all all the browsers: Chrome, Opera, Firefox, IE, Safari.

	Jeff Muizelaar [:jrmuizel]
	Comment 7 • 4 years ago

(In reply to vinci from comment #6)
> +1. This would be very useful for static pie charts.

Do you have an example of what you have in mind?

	Markus Stange [:mstange]
	Comment 8 • 4 years ago

(In reply to Jeff Muizelaar [:jrmuizel] from comment #7)
> Do you have an example of what you have in mind?

See http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/#future-pie-charts and the rest of the article.

	Robert Kaiser
	Comment 9 • 4 years ago

For another description of the pie chart thing, view https://air.mozilla.org/view-source-tuesday-pm-session/ starting at 1:03 (or starting at 1:32 is you are only interested in conic gradients).

Oh and even animated ones and pie charts with multiple slices work fine with conic gradients, not just static ones as mentioned in comment #6. And yes, if you look at who presented that talk and who filed this bug, you will find some similarity. ;-)

	Lea Verou Reporter
	Comment 10 • 4 years ago

(In reply to vinci from comment #6)
> +1. This would be very useful for static pie charts.

Not just static. Once gradient interpolation is implemented, this would be animatable too.

@Jeff: Direct2D 1.1 does support mesh gradients, so this should be easy(ish) to implement on Windows. From my discussions with other Mozilla graphics guys it seems that the main roadblock here is Core Graphics, though I've heard from Apple guys that they have requested something similar from the CG team. When it will be implemented, who knows. But it should be noted that Microsoft has put conical gradients on the backlog for Edge [1].

[1]: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/8471413-implement-conic-gradients-from-css-image-values-le

	David Baron :dbaron: (away October 5-21)
	Comment 12 • 3 years ago

blink-dev intent to implement thread:
https://groups.google.com/a/chromium.org/d/topic/blink-dev/-z66SwKdklc/discussion

	yisibl
	Comment 13 • 3 years ago

https://bugzilla.mozilla.org/show_bug.cgi?id=1352643

	keith
	Comment 14 • 2 years ago

Other browsers have started to implement conic gradients:

In development for blink (and useable in Chrome stable behind "Experimental Web Platform Features" flag):
https://www.chromestatus.com/features/5706155347148800

In development for webkit: 
https://webkit.org/status/#feature-conic-gradients

	j.j.
	Comment 16 • 2 years ago

Chrome intents to ship conic-gradient now:

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ySuNvyaB8jY

	Sreenivasulu S
	Comment 17 • 2 years ago
notechnicalvalue

Glad to see the conic gradients are getting shipped in Chrome.
Finally, Lea Verou's push to get these in the browser is fruitful.
Congrats Lea Verou for your efforts!

	David Baron :dbaron: (away October 5-21)
	Comment 18 • Last year

Conic gradients were cleared to ship in https://lists.w3.org/Archives/Public/www-style/2018Mar/0021.html

	captlid
	Comment 19 • Last year

I would like conic gradients implemented too. 

I am writing a script where a pie chart will change each color's size based on form oninput typed in by the user that calculates percentages.

	Sander
	Comment 20 • Last year

Latest Safari Technical Preview supports conical gradients: https://webkit.org/blog/8414/release-notes-for-safari-technology-preview-66/

	Jeff Muizelaar [:jrmuizel]
	Comment 21 • Last year

(In reply to captlid from comment #19)
> I would like conic gradients implemented too. 
> 
> I am writing a script where a pie chart will change each color's size based
> on form oninput typed in by the user that calculates percentages.

I'd recommend just using SVG for this. Using conical gradients will be much more expensive to draw than solid slices of a pie.

	Estelle Weyl
	Comment 22 • 10 months ago

https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient (BCD and Interactive examples need to be merged, but complete)

	Sebastian Zartner [:sebo]
	Comment 23 • 10 months ago

Very detailed description, Estelle! As far as I know (and please correct me if that info is not valid anymore), dev-doc-needed is kept until a feature is implemented in Gecko to signal that the compatibility data needs to be adjusted and the feature mentioned in the release notes. So I'm resetting it.

Sebastian

	captlid
	Comment 24 • 10 months ago

> I'd recommend just using SVG for this. Using conical gradients will be much
> more expensive to draw than solid slices of a pie.

What features of svg would be the best for this then?

Desktop Chrome finally enabled conic gradients!!!

I finally got this working, works in firefox, my friend's iphone 6. Had no other devices to test on. 
https://codepen.io/captlid/pen/BvZybM

Uses css clip and runs calculations and logic for slices bigger than 50%.

Seems to work fast enough without lag issues.