W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2020

Re: [csswg-drafts] [css-shapes] Find a way to create a polygon with rounded-corners and non-absolute coordinates (#5674)

From: Noam Rosenthal via GitHub <sysbot+gh@w3.org>
Date: Sun, 01 Nov 2020 09:36:39 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-720060556-1604223398-sysbot+gh@w3.org>
Great. The current syntax I have in mind is approximately this: 

`[[[[relative]? move to] | M | m] <<length-percentage>> <<length-percentage>>] |

[[[[relative]? line to] | L | l] <<length-percentage>> <<length-percentage>>] |
[[[[relative]? [horizontal|vertical] line to] | h | H | v | V] <<length-percentage>>]
[[[[relative]? curve to] | Q | q | c | C]<<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>> [<<length-percentage>> <<length-percentage>>]] | 
[[[[relative]? smooth curve to] | S | s | T | t] <<length-percentage>> [to|by] <<length-percentage>> [<<length-percentage>> <<length-percentage>>]] |
[[[[relative]? arc to] | a | A] <<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>> <<length-percentage>>] |
[close | z | Z]
`

For the example of a scalable balloon-with-cursor clip, it would look like:
`path(m 0 calc(var(--radius) + var(--cursor-height)),
     Q 0 var(--cursor-height) var(--radius) var(--cursor-height))
     H calc(var(--cursor-offset) - var(--cursor-width) / 2),
     L var(--cursor-offset) 0,
     l calc(var(--offset-width) / 2, calc(0 - var(--cursor-height))),
     L calc(100% - var(--radius)),
     Q 100% 0 100% var(--radius),
     V calc(100% - var(--radius)),
     Q 100% 100% calc(100% - var(--radius)) 100%,
     H var(--radius),
     Q 0 100% 0 calc(100% - var(--radius)),
     Z)`

or `
path(from 0 calc(var(--radius) + var(--cursor-height)),
     curve to 0 var(--cursor-height) var(--radius) var(--cursor-height))
     horizontal line to calc(var(--cursor-offset) - var(--cursor-width) / 2),
     relative line to calc(var(--offset-width) / 2, calc(0 - var(--cursor-height))),
     line to calc(var(--cursor-offset) + var(--cursor-width) / 2),
     horizontal line to calc(100% - var(--radius)),
     curve to 100% 0 100% var(--radius),
     vertical line to calc(100% - var(--radius)),
     curve to 100% 100% calc(100% - var(--radius)) 100%,
     horizontal line to var(--radius),
     curve to 0 100% 0 calc(100% - var(--radius)),
     close)
`

or a combination of both.

Some doubts I'm contemplating:
- Whether both syntaxes are actually necessary, maybe the SVG-like one is sufficient, though the other one feels more like CSS (e.g. like the gradient syntaxes)
- Perhaps use `by` instead of `relative` for relative lines/curves/etc?
- Maybe use `lineto` etc instead of `line to`, as it conforms with the names in [SVG](https://www.w3.org/TR/SVG11/paths.html)

- 

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 1 November 2020 09:36:41 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:22 UTC