- From: jsnkuhn via GitHub <sysbot+gh@w3.org>
- Date: Wed, 09 Nov 2022 14:24:52 +0000
- To: public-css-archive@w3.org
jsnkuhn has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-images] [css-shapes] create simple fill-able/stroke-able CSS images == Possible solutions for creating simple fill-able/stroke-able CSS images have been mentioned here and there in other issues but I've not yet seen an issue specifically for this kind of conversation so this is that. These conversations seem to fall into 2 main categories: 1. use `<basic-shape>` inside `image()` 2. make SVG creation with CSS easier ## use `<basic-shape>` ex. fill and/or stroke a circle: a 45px diameter circle, filled with red and stroked with a 3px black line ```css background-image: image( circle(45px at 22.5px 22.5px, red, 3px black) ); background-position: center center; background-repeat: no-repeat; ``` - imagining the stroke to be added on the inside of the circle like `border` does in CSS by default? - options to fill/stroke with color, gradient, or gradient pattern?? other random thoughts - `@image-manipulation` would allow cutting shapes from gradient images with clip-path but being able to just create the shapes as images would skip a step for the browser. - does the current stripe proposal fall in here as well? - compositing shapes? ## make a CSS like syntax for creating SVG images https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8049 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 9 November 2022 14:24:53 UTC