How can we improve the Microsoft Edge developer experience?

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

609 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Lea VerouLea Verou shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    13 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • gustav gansgustav gans commented  ·   ·  Flag as inappropriate

        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.

      • Lea VerouLea Verou commented  ·   ·  Flag as inappropriate

        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 SmithJohn Smith commented  ·   ·  Flag as inappropriate

        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.

      • Lea VerouLea Verou commented  ·   ·  Flag as inappropriate

        @Ryan, could you share the use case it came up for? Use cases are always useful :)

      • Anonymous commented  ·   ·  Flag as inappropriate

        Conic gradients are cool! We would like to have them implemented in the browser so that we can use them in the websites!

      Feedback and Knowledge Base