Implement conic gradients from CSS Image Values Level 4
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 many graphics libraries today (e.g. Cairo) via mesh gradients. Please implement them.
[1]: http://www.w3.org/TR/css4-images/#conic-gradients
[2]: http://leaverou.github.io/conic-gradient
Lea Verou
shared this idea
The status for conic gradients can be tracked at https://dev.modern.ie/platform/status/conicgradients/
20 comments
-
Besides Chrome 69, conic gradients just landed in WebKit: https://bugs.webkit.org/show_bug.cgi?id=189329
-
HM the Gold Link
commented
+1 due to Chrome shipping to in M69
-
HM the Gold Link
commented
Chrome intends to ship it on M69
-
Anonymous
commented
+1
-
Akshay Malhotra
commented
Kidnly add the Conic Gradiants, they are useful.
-
Ced c
commented
Would be really nice for making light weight pie charts !
-
Arturo Coronel
commented
excellent!!
-
Øystein Amundsen commented
Would very much like this! :-)
-
qpeuling
commented
Would be very nice! Trying to implement it as a preloader now :)
Best regards!
-
gustav gans
commented
Yes, please!
Would also love to have those for CanvasRenderingContext2D, too.
And ctx.createMeshGradient() etc.
I would also happily use a CSS mesh-gradient().
And diamond- and repeating diamond gradients, preferably with arbitrary number of sides / segments.
No biggie but still quite convenient would be a ctx.createRepeatingLinearGradient (IMHO ctx2d gradient API is not very nice at all. I would rather set a css gradient string as ctx.fillStyle or even set a (serialization of a) mutable gradient object, ideally one that can be obtained from CSSStyleDeclaration or so. Why are Canvas-, CSS- and SVG gradients so different anyway?).
I guess Houdini and custom shading could also do the trick.
Well and I wonder why call it conic-gradient and not angular-gradient? Wouldn't radial-gradient have to be named spheric-gradient then?
Sorry for being OT, but I don't know where else to put these suggestions. -
John Smith
commented
This is going to make absolutely dead-easy to make piecharts!
-
Steve Tegtmejer
commented
Voted and looking forward to use this in modern browsers :)
-
Chris Lilley
commented
I see the editor's draft at
https://drafts.csswg.org/css-images-4/#conic-gradients
was recently updated, there are more examples of conic gradient syntax and the rendering of each. The spec text is clearer, also. -
Just wanted to say, it’s super easy for Edge to implement this, since you guys are only on one platform and Direct2D 1.1 supports mesh gradients, of which conic gradients are just a special case. Please dare to lead the way here, it’s one of those graphical features that authors get really excited about and it’s super easy for you to implement (unlike e.g. Safari who needs to wait for Core Graphics to add mesh gradients — which is coming).
-
John Smith
commented
One use case is for a Japanese website. To create that quintessential Japanese starburst background thing, also known as the Japanese Naval ensign. Would be cool to have this natively.
-
@Ryan, could you share the use case it came up for? Use cases are always useful :)
-
Ryan Dunn
commented
I couldn't believe this was missing once it came up in a project.
-
Anonymous
commented
Conic gradients are cool! We would like to have them implemented in the browser so that we can use them in the websites!
-
Šime Vidas
commented
The editor’s draft is more recent: http://dev.w3.org/csswg/css-images-4/#conic-gradients (I haven’t checked if there have been any changes to the syntax).
-
Massimo Artizzu
commented
We needed this for a long time. Can we please have it at last?