From f31c0732a6a831bf607a4d3b10323082ef8003b8 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Wed, 1 May 2024 22:51:19 -0400 Subject: [PATCH 01/32] wip --- .../en-us/web/css/basic-shape/circle/index.md | 2 +- .../en-us/web/css/basic-shape/shape/index.md | 158 ++++++++++++++++++ files/en-us/web/css/path/index.md | 2 +- files/en-us/web/svg/attribute/d/index.md | 20 +-- 4 files changed, 170 insertions(+), 12 deletions(-) create mode 100644 files/en-us/web/css/basic-shape/shape/index.md diff --git a/files/en-us/web/css/basic-shape/circle/index.md b/files/en-us/web/css/basic-shape/circle/index.md index 88a6b181e55285a..2341af9440180eb 100644 --- a/files/en-us/web/css/basic-shape/circle/index.md +++ b/files/en-us/web/css/basic-shape/circle/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.circle {{CSSRef}} -The **`circle()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Types). +The **`circle()`** CSS [function](/en-US/docs/Web/CSS/CSS_Functions) defines a circle using a radius and a position. It is one of the {{cssxref("<basic-shape>")}} data types. {{EmbedInteractiveExample("pages/css/function-circle.html")}} diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md new file mode 100644 index 000000000000000..b4e03ae39111e3e --- /dev/null +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -0,0 +1,158 @@ +--- +title: shape() +slug: Web/CSS/basic-shape/shape +page-type: css-function +browser-compat: css.types.basic-shape.shape +--- + +{{CSSRef}} + +The **`shape()`** [CSS function](/en-US/docs/web/css/css_functions) is used to define a shape for the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The `shape()` function is one of the {{cssxref("<basic-shape>")}} data types. + + + +## Syntax + +```css +offset-path: shape(nonzero from 0px 0px, line to 10px 10px) +offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close); +offset-path: shape(from 10px 10px, hline by 10px, vline to 5rem); +offset-path: shape(from 10px 10px, curve to 50px 20px via 160px 1px 20% 16px); +offset-path: shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg); +``` + +### Parameters + +- [``](/en-US/docs/web/svg/attribute/fill-rule) {{optional_inline}} + + - : Specifies how overlapping regions of a shape should be filled. The possible values include: + + - `nonzero`: A point is considered inside the shape if a ray drawn from the point crosses more left-to-right than right-to-left path segments, resulting in a non-zero count. This is the default value when `` is omitted. + + - `evenodd`: A point is considered inside the shape if a ray drawn from the point crosses an odd number of path segments. + +- `from ` + + - : Defines the starting point for the first `` as a pair of coordinates that are measured from the top-left corner of the reference box. The coordinates are specified as a {{cssxref("<length-percentage>")}} value. + +- `` + + - : Specifies one or a list of comma-seperated commands that define the shape, using syntax identical to that of an [SVG path command](/en-US/docs/web/svg/attribute/d#path_commands). Each command's starting point is the previous command's ending point. + + The syntax of most shape commands is the operation keyword, such as `move` or `line`, followed by the `by` or `to` keyword, and then a set of coordinates. + + `by`: Indicates that the `` is relative to the command's starting point ("relative" value). + + `to`: Indicates that the `` is relative to the top-left corner of the reference box ("absolute" value). + + > **Note:** If `` is specified as a percentage, the position is calculated relative to the size of the reference box. + + The following ``s can be specified: + + - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/web/svg/attribute/d#moveto_path_commands) to the list of shape commands. It does not draw a shape; rather it specifies the position for the next command. The `by`or `to` keyword specify whether the `` point is "relative" or "absolute", respectively. + + - ``: Specified as `line [by | to] `. This command adds a [LineTo command](/en-US/docs/web/svg/attribute/d#lineto_path_commands) to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The `by`or `to` keyword specify whether the ending point specified by `` is "relative" or "absolute", respectively. + + - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/web/svg/attribute/d#lineto_path_commands) to the list of shape commands. It draws a horizontal or vertical line from the command's starting point to its ending point. The `by`or `to` keyword determine the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with `` providing the horizontal or vertical component. + + - ``: Specified as `curve [by | to] via []`. This command adds a Bézier curve command to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + + The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a quadratic Bézier curve; if two ``s are provided, the command draws a cubic Bézier curve. + + - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth Bézier curve command to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + + The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. + + - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an elliptical arc curve command to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + + The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs. The `of` keyword specifies the size of the ellipse fom which the arc is taken. The first `` provides the horizontal radius of the ellipse, and the second provides the vertical radius. If only one `` is provided, the same value is used for both the radii. The following parameters help to choose from a possibility of four arcs: + + - ``: Indicates whether the desired arc is the one traced around the ellipse clockwise (`cw`) or counter-clockwise (`ccw`). If omitted, this defaults to `ccw`. + - ``: Indicates whether the desired arc is the larger (`large`) or smaller (`small`) of the two arcs. If omitted, this defaults to `small`. + - ``: Specifies the angle, in degrees, by which to rotate the ellipse relative to the x axis. A positive angle rotates the ellipse clockwise, and a negative angle rotates it counter-clockwise. If omitted, this defaults to `0deg`. + + > **Note:** If the starting and ending points of the arc lie on exactly opposite sides of the ellipse, there is only one possible ellipse and two possible arcs. In this case, `` specifies the arc to choose, and `` has no effect. + + - `close` + +## Description + +The `shape()` function allows you to define complex shapes. It is similar to the `{{cssxref("path","path()")}}` function in several ways: + +- The `` parameter in the `shape()` function works exactly like the same parameter in the `path()` function. +- The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/web/svg/attribute/d#path_commands), such as MoveTo, LineTo, and ClosePath. + +However, `shape()` offers several advantages over using `path()`: + +- Unlike `path()`, which uses the [SVG path](/en-US/docs/web/SVG/Element/path) syntax, `shape()` uses standard CSS syntax, making it easier to create and modify shapes directly in your stylesheet. +- The `path()` function inherits some limitations from SVG, such as requiring shapes to be written as a single string and limiting units to `px`. The `shape()` function, on the other hand, supports a variety of CSS units, including percentages, `rem`, and `em`. +- `shape()` also allows the use of CSS math functions, providing more versatility when defining shapes. + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Examples of correct values for path() + +```css +path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); +path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); +``` + +### Use as the value of offset-path + +The `path()` function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle. + +{{EmbedGHLiveSample("css-examples/path/offset-path.html", '100%', 960)}} + +### Modify the value of the SVG path d attribute + +The `path()` can be used to modify the value of the SVG [`d` attribute](/en-US/docs/web/svg/attribute/d), which can also be set to `none` in your CSS. + +The "V" symbol will flip vertically when you hover over it, if `d` is supported as a CSS property. + +#### CSS + +```css +html, +body, +svg { + height: 100%; +} + +/* This path is displayed on hover*/ +#svg_css_ex1:hover path { + d: path("M20,80 L50,20 L80,80"); +} +``` + +#### HTML + +```html + + + +``` + +#### Result + +{{EmbedLiveSample('Modify the value of the SVG path d attribute', '100%', 200)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("clip-path")}} +- {{cssxref("offset-path")}} +- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module +- [Overview of shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) guide +- [Basic shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) guide +- [The SVG path syntax: An illustrated guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/) on CSS-Tricks (2021) diff --git a/files/en-us/web/css/path/index.md b/files/en-us/web/css/path/index.md index 8ab20757a2ab1d8..bacda57c08dbf75 100644 --- a/files/en-us/web/css/path/index.md +++ b/files/en-us/web/css/path/index.md @@ -22,7 +22,7 @@ path() When used in {{cssxref("clip-path")}}: ```css -path([<'fill-rule'>,]?) +path( [,]? ) ``` ### Parameters diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index 80c3539b30df02d..1a1de6807e5635d 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -161,12 +161,12 @@ Path commands are instructions that define a path to be drawn. Each command is c SVG defines 6 types of path commands, for a total of 20 commands: -- MoveTo: `M`, `m` -- LineTo: `L`, `l`, `H`, `h`, `V`, `v` -- Cubic Bézier Curve: `C`, `c`, `S`, `s` -- Quadratic Bézier Curve: `Q`, `q`, `T`, `t` -- Elliptical Arc Curve: `A`, `a` -- ClosePath: `Z`, `z` +- [MoveTo](#moveto_path_commands): `M`, `m` +- [LineTo](#lineto_path_commands): `L`, `l`, `H`, `h`, `V`, `v` +- [Cubic Bézier curve]: `C`, `c`, `S`, `s` +- [Quadratic Bézier curve]: `Q`, `q`, `T`, `t` +- [Elliptical arc curve]: `A`, `a` +- [ClosePath]: `Z`, `z` > **Note:** Commands are _case-sensitive_. An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position. @@ -456,7 +456,7 @@ svg { {{EmbedLiveSample('LineTo_path_commands', '100%', 200)}} -### Cubic Bézier Curve +### Cubic Bézier curve commands _Cubic [Bézier curves](/en-US/docs/Glossary/Bezier_curve)_ are smooth curve definitions using four points: @@ -684,7 +684,7 @@ svg { {{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}} -### Quadratic Bézier Curve +### Quadratic Bézier curve commands _Quadratic [Bézier curves](/en-US/docs/Glossary/Bezier_curve)_ are smooth curve definitions using three points: @@ -909,7 +909,7 @@ svg { {{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}} -### Elliptical Arc Curve +### Elliptical arc curve commands _Elliptical arc curves_ are curves defined as a portion of an ellipse. It is sometimes easier to draw highly regular curves with an elliptical arc than with a Bézier curve. @@ -1063,7 +1063,7 @@ svg { {{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}} -### ClosePath +### ClosePath commands _ClosePath_ instructions draw a straight line from the _current position_ to the first point in the path. From ee92aee9e8ac52ead2ecd4fd39a8b401c1b8f4b6 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 3 May 2024 09:26:54 -0400 Subject: [PATCH 02/32] tests link updates --- files/en-us/web/svg/attribute/d/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index 1a1de6807e5635d..d7f7d2745db83fa 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -163,7 +163,7 @@ SVG defines 6 types of path commands, for a total of 20 commands: - [MoveTo](#moveto_path_commands): `M`, `m` - [LineTo](#lineto_path_commands): `L`, `l`, `H`, `h`, `V`, `v` -- [Cubic Bézier curve]: `C`, `c`, `S`, `s` +- [Cubic Bézier curve](#cubic_bézier_curve_commands): `C`, `c`, `S`, `s` - [Quadratic Bézier curve]: `Q`, `q`, `T`, `t` - [Elliptical arc curve]: `A`, `a` - [ClosePath]: `Z`, `z` From 420a2b2735400c5f0c8c5af06dbe1479f99e17ed Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 3 May 2024 09:28:13 -0400 Subject: [PATCH 03/32] adds more inline links) --- files/en-us/web/svg/attribute/d/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index d7f7d2745db83fa..0963ddaf7d8214e 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -164,9 +164,9 @@ SVG defines 6 types of path commands, for a total of 20 commands: - [MoveTo](#moveto_path_commands): `M`, `m` - [LineTo](#lineto_path_commands): `L`, `l`, `H`, `h`, `V`, `v` - [Cubic Bézier curve](#cubic_bézier_curve_commands): `C`, `c`, `S`, `s` -- [Quadratic Bézier curve]: `Q`, `q`, `T`, `t` -- [Elliptical arc curve]: `A`, `a` -- [ClosePath]: `Z`, `z` +- [Quadratic Bézier curve](#quadratic-bézier-curve-commands): `Q`, `q`, `T`, `t` +- [Elliptical arc curve](#elliptical-arc-curve-commands): `A`, `a` +- [ClosePath](#closepath-commands): `Z`, `z` > **Note:** Commands are _case-sensitive_. An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position. From c945c9d6511eb1345dba7754b7bfebae516b7fb5 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 3 May 2024 09:32:00 -0400 Subject: [PATCH 04/32] test links in shape page --- files/en-us/web/css/basic-shape/shape/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index b4e03ae39111e3e..4aa85cee6314b53 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -55,11 +55,11 @@ offset-path: shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg); - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/web/svg/attribute/d#lineto_path_commands) to the list of shape commands. It draws a horizontal or vertical line from the command's starting point to its ending point. The `by`or `to` keyword determine the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with `` providing the horizontal or vertical component. - - ``: Specified as `curve [by | to] via []`. This command adds a Bézier curve command to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/web/svg/attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a quadratic Bézier curve; if two ``s are provided, the command draws a cubic Bézier curve. - - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth Bézier curve command to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/web/svg/attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. From c1f29cb900c9c6e5295471424c91804e5dfbf681 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 3 May 2024 09:38:54 -0400 Subject: [PATCH 05/32] adds reminaing links to path commands --- files/en-us/web/css/basic-shape/shape/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 4aa85cee6314b53..a59c7eab9805822 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -57,13 +57,13 @@ offset-path: shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg); - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/web/svg/attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a quadratic Bézier curve; if two ``s are provided, the command draws a cubic Bézier curve. + The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/web/svg/attribute/d#quadratic-bézier-curve-commands); if two ``s are provided, the command draws a cubic Bézier curve. - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/web/svg/attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. - - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an elliptical arc curve command to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/web/svg/attribute/d#elliptical-arc-curve-commands) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs. The `of` keyword specifies the size of the ellipse fom which the arc is taken. The first `` provides the horizontal radius of the ellipse, and the second provides the vertical radius. If only one `` is provided, the same value is used for both the radii. The following parameters help to choose from a possibility of four arcs: @@ -73,7 +73,7 @@ offset-path: shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg); > **Note:** If the starting and ending points of the arc lie on exactly opposite sides of the ellipse, there is only one possible ellipse and two possible arcs. In this case, `` specifies the arc to choose, and `` has no effect. - - `close` + - `close`: Adds a [ClosePath command](/en-US/docs/web/svg/attribute/d#closepath-commands) to the list of shape commands. ## Description From 7580009a91e7fc9e95d61eb7f075c0c5bc61126e Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 6 May 2024 13:00:56 -0400 Subject: [PATCH 06/32] updates other basic-shape pages --- files/en-us/web/css/basic-shape/index.md | 97 ++++---- .../en-us/web/css/basic-shape/shape/index.md | 210 ++++++++++++++---- files/en-us/web/css/clip-path/index.md | 2 + files/en-us/web/css/offset-path/index.md | 2 +- 4 files changed, 224 insertions(+), 87 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 0a7ed11b3a9c7eb..b96396d39b30cee 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -25,89 +25,101 @@ The default reference box is the `margin-box`, as demonstrated in the below imag The following shapes are supported. All `` values use functional notation and are defined here using the [value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax). -- `{{cssxref("basic-shape/inset","inset()")}}` +- `{{cssxref("basic-shape/circle","circle()")}}` - - : Defines an inset rectangle. + - : Defines a circle using a radius and a position. ```css - inset( {1,4} [ round <`border-radius`> ]? ) + circle( ? [ at ]? ) ``` - When all of the first four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the position of the edges of the inset rectangle. These arguments follow the syntax of the {{cssxref("margin")}} shorthand, which lets you set all four insets with one, two, three, or four values. + The `` argument represents _r_, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. - The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. + The {{cssxref("<position>")}} argument defines the center of the circle. This defaults to center if omitted. - A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. +- `{{cssxref("basic-shape/ellipse","ellipse()")}}` -- `{{cssxref("basic-shape/rect","rect()")}}` + - : Defines an ellipse using two radii and a position. - - : Defines a rectangle using the specified distances from the top and left edges of the reference box. + ```css + ellipse( [ {2} ]? [ at ]? ) + ``` + + The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. + + The position argument defines the center of the ellipse. This defaults to center if omitted. + +- `{{cssxref("basic-shape/inset","inset()")}}` + + - : Defines an inset rectangle. ```css - rect( [ | auto ]{4} [ round <`border-radius`> ]? ) + inset( {1,4} [ round <`border-radius`> ]? ) ``` - You specify four values to create the rectangle. Each of the four values is either a ``, a ``, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. + When all of the first four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the position of the edges of the inset rectangle. These arguments follow the syntax of the {{cssxref("margin")}} shorthand, which lets you set all four insets with one, two, three, or four values. The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. -- `{{cssxref("basic-shape/xywh","xywh()")}}` + A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. - - : Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. +- `{{cssxref("path","path()")}}` + + - : Defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). ```css - xywh( {2} {2} [ round <`border-radius`> ]? ) + path( [ , ]? ) ``` - The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand syntax. + The optional `` represents the {{SVGAttr("fill-rule")}} used to determine the interior of the path. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. -- `{{cssxref("basic-shape/circle","circle()")}}` + The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes. - - : Defines a circle using a radius and a position. +- `{{cssxref("basic-shape/polygon","polygon()")}}` + + - : Defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of vertices. ```css - circle( ? [ at ]? ) + polygon( ? [ ]# ) ``` - The `` argument represents _r_, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. + `` is optional and represents the {{SVGAttr("fill-rule")}} used to determine the interior of the polygon. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. - The {{cssxref("<position>")}} argument defines the center of the circle. This defaults to center if omitted. + Each pair argument in the list represents _xi_ and _yi_ - the x and y axis coordinates of the vertex of the polygon at position i. -- `{{cssxref("basic-shape/ellipse","ellipse()")}}` +- `{{cssxref("basic-shape/rect","rect()")}}` - - : Defines an ellipse using two radii and a position. + - : Defines a rectangle using the specified distances from the top and left edges of the reference box. ```css - ellipse( [ {2} ]? [ at ]? ) + rect( [ | auto ]{4} [ round <`border-radius`> ]? ) ``` - The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. + You specify four values to create the rectangle. Each of the four values is either a ``, a ``, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. - The position argument defines the center of the ellipse. This defaults to center if omitted. + The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. -- `{{cssxref("basic-shape/polygon","polygon()")}}` +- `{{cssxref("basic-shape/shape","shape()")}}` {{Experimental_Inline}} - - : Defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of vertices. + - : Defines a shape using an initial starting point and a series of shape commands. ```css - polygon( ? [ ]# ) + shape( ? from , # ) ``` - `` represents the {{SVGAttr("fill-rule")}} used to determine the interior of the polygon. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. + `` is optional and represents the {{SVGAttr("fill-rule")}} used to determine the interior of the polygon. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. - Each pair argument in the list represents _xi_ and _yi_ - the x and y axis coordinates of the vertex of the polygon at position i. + `from ` represents the starting point for the first shape command, and `` defines one one or more shape commands, which are similar to the [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). -- `{{cssxref("path","path()")}}` +- `{{cssxref("basic-shape/xywh","xywh()")}}` - - : Defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). + - : Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. ```css - path( [ , ]? ) + xywh( {2} {2} [ round <`border-radius`> ]? ) ``` - The optional `` represents the {{SVGAttr("fill-rule")}} used to determine the interior of the path. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. - - The required \ is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes + The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand syntax. The arguments not defined above are defined as follows: @@ -134,14 +146,17 @@ The values in a `` function are computed as specified, with these e ### Interpolation of basic shapes -When animating between one `` and another, the rules below are applied. The values in the shape functions {{Glossary("interpolation", "interpolate")}} as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc", "calc()")}} where possible. If list values are not one of those types but are identical, those values do interpolate. +When animating between one `` and another, the rules below are applied. The values in the `` functions {{Glossary("interpolation", "interpolate")}} as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc", "calc()")}} where possible. If list values are not one of those types but are identical, those values do interpolate. - Both shapes must use the same reference box. -- If both shapes are the same type, that type is `ellipse()` or `circle()`, and none of the radii use the `closest-side` or `farthest-side` keywords, interpolate between each value in the shape functions. -- If both shapes are of type `inset()`, interpolate between each value in the shape functions. -- If both shapes are of type `polygon()`, both polygons have the same number of vertices, and use the same ``, interpolate between each value in the shape functions. -- If both shapes are of type `path()`, both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers. -- In all other cases no interpolation occurs. +- If the two shapes are of the same type, namely `ellipse()` and `circle()` and if their radii do not use the `closest-side` or `farthest-side` keywords, interpolation is applied between each value in the shape functions. +- If both shapes are of type `inset()`, interpolation is applied between each value in the shape functions. +- If both shapes are of type `polygon()`, and both polygons have the same number of vertices and use the same ``, interpolation is applied between each value in the shape functions. +- If both shapes are of type `path()`, and both path strings have the same number and types of path data commands and in the same order, each path data command is interpolated as a real number. +- If the two shapes are of type `shape()` and `path()` and have matching path data commands in length and order, the interpolated value is a `path()` function if both starting and ending values are `path()` functions; otherwise, it's treated as a `shape()` function. The interpolated value must represent the same list of path data commands, with numerical components interpolated between the corresponding components of the starting and ending list. +- If both shapes are of type `shape()`, the shape commands are considered the same if they share the identical command keyword and `` parameters; for `` and ``, the number of control points must match. +- If both shapes of type `shape()` with an `` have different `` between their starting and ending lists, then the interpolated result uses `cw` for any progress value between `0` and `1`. If the shapes have different `` keywords, then the interpolated result uses `large` for any progress value between `0` and `1`. +- In all other cases, no interpolation occurs. ## Examples diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index a59c7eab9805822..e47cf848c3bd2ea 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -7,23 +7,56 @@ browser-compat: css.types.basic-shape.shape {{CSSRef}} -The **`shape()`** [CSS function](/en-US/docs/web/css/css_functions) is used to define a shape for the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The `shape()` function is one of the {{cssxref("<basic-shape>")}} data types. +The **`shape()`** [CSS function](/en-US/docs/Web/CSS/CSS_Functions) is used to define a shape for the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The `shape()` function is one of the {{cssxref("<basic-shape>")}} data types. ## Syntax ```css -offset-path: shape(nonzero from 0px 0px, line to 10px 10px) +/* */ +offset-path: shape(nonzero from 0px 0px, line to 10px 10px); + +/* , , and close */ offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close); -offset-path: shape(from 10px 10px, hline by 10px, vline to 5rem); -offset-path: shape(from 10px 10px, curve to 50px 20px via 160px 1px 20% 16px); -offset-path: shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg); + +/* */ +offset-path: shape(from 10px 10px, hline by 50px, vline to 5rem); + +/* */ +offset-path: shape(from 10px 10px, curve to 80px 80px via 160px 1px 20% 16px); + +/* */ +offset-path: shape(from 10px 10px, smooth to 100px 50pt); + +/* */ +offset-path: shape( + from 5% 0.5rem, + arc to 80px 1pt of 10% ccw large rotate 25deg +); + +/* Using a CSS math function */ +offset-path: shape( + from 5px -5%, + hline to 50px, + vline by calc(0% + 160px), + hline by 70.5px, + close, + vline by 60px +); + +clip-path: shape( + nonzero from 10px 10px, + curve to 60px 20% via 40px 0, + smooth to 90px 0, + curve by -20px 60% via 10% 40px 20% 20px, + smooth by -40% -10px via -10px 70px +); ``` ### Parameters -- [``](/en-US/docs/web/svg/attribute/fill-rule) {{optional_inline}} +- [``](/en-US/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}} - : Specifies how overlapping regions of a shape should be filled. The possible values include: @@ -33,54 +66,54 @@ offset-path: shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg); - `from ` - - : Defines the starting point for the first `` as a pair of coordinates that are measured from the top-left corner of the reference box. The coordinates are specified as a {{cssxref("<length-percentage>")}} value. + - : Defines the starting point for the first `` as a pair of coordinates that are measured from the top-left corner of the reference box. The coordinates are specified as a {{cssxref("<length-percentage>")}} value. Add a comma after this parameter. - `` - - : Specifies one or a list of comma-seperated commands that define the shape, using syntax identical to that of an [SVG path command](/en-US/docs/web/svg/attribute/d#path_commands). Each command's starting point is the previous command's ending point. + - : Specifies one or a list of comma-seperated commands that define the shape, using syntax similar to [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). The commands to define a shape include ``, ``, ``, ``, ``, ``, and `close`. Each command's starting point is the previous command's ending point; the starting point of the shape is defined by the [`from `](#from_coordinate-pair) parameter. - The syntax of most shape commands is the operation keyword, such as `move` or `line`, followed by the `by` or `to` keyword, and then a set of coordinates. + The syntax of most shape commands is the operation keyword such as `move` or `line`, followed by the `by` or `to` keyword, and then a set of coordinates. `by`: Indicates that the `` is relative to the command's starting point ("relative" value). `to`: Indicates that the `` is relative to the top-left corner of the reference box ("absolute" value). - > **Note:** If `` is specified as a percentage, the position is calculated relative to the size of the reference box. + > **Note:** If a coordinate in `` is specified as a percentage, the value is calculated relative to the respective width or height of the reference box. The following ``s can be specified: - - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/web/svg/attribute/d#moveto_path_commands) to the list of shape commands. It does not draw a shape; rather it specifies the position for the next command. The `by`or `to` keyword specify whether the `` point is "relative" or "absolute", respectively. + - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands) to the list of shape commands. It does not draw a shape; rather it specifies the position for the next command. The `by`or `to` keyword specify whether the `` point is "relative" or "absolute", respectively. - - ``: Specified as `line [by | to] `. This command adds a [LineTo command](/en-US/docs/web/svg/attribute/d#lineto_path_commands) to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The `by`or `to` keyword specify whether the ending point specified by `` is "relative" or "absolute", respectively. + - ``: Specified as `line [by | to] `. This command adds a [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The `by`or `to` keyword specify whether the ending point specified by `` is "relative" or "absolute", respectively. - - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/web/svg/attribute/d#lineto_path_commands) to the list of shape commands. It draws a horizontal or vertical line from the command's starting point to its ending point. The `by`or `to` keyword determine the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with `` providing the horizontal or vertical component. + - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a horizontal or vertical line from the command's starting point to its ending point. The `by`or `to` keyword determine the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with `` providing the horizontal or vertical component. - - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/web/svg/attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/web/svg/attribute/d#quadratic-bézier-curve-commands); if two ``s are provided, the command draws a cubic Bézier curve. + The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic-bézier-curve-commands); if two ``s are provided, the command draws a cubic Bézier curve. - - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/web/svg/attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. - - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/web/svg/attribute/d#elliptical-arc-curve-commands) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical-arc-curve-commands) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs. The `of` keyword specifies the size of the ellipse fom which the arc is taken. The first `` provides the horizontal radius of the ellipse, and the second provides the vertical radius. If only one `` is provided, the same value is used for both the radii. The following parameters help to choose from a possibility of four arcs: - ``: Indicates whether the desired arc is the one traced around the ellipse clockwise (`cw`) or counter-clockwise (`ccw`). If omitted, this defaults to `ccw`. - ``: Indicates whether the desired arc is the larger (`large`) or smaller (`small`) of the two arcs. If omitted, this defaults to `small`. - - ``: Specifies the angle, in degrees, by which to rotate the ellipse relative to the x axis. A positive angle rotates the ellipse clockwise, and a negative angle rotates it counter-clockwise. If omitted, this defaults to `0deg`. + - ``: Specifies the angle, in degrees, by which to rotate the ellipse relative to the x-axis. A positive angle rotates the ellipse clockwise, and a negative angle rotates it counter-clockwise. If omitted, this defaults to `0deg`. > **Note:** If the starting and ending points of the arc lie on exactly opposite sides of the ellipse, there is only one possible ellipse and two possible arcs. In this case, `` specifies the arc to choose, and `` has no effect. - - `close`: Adds a [ClosePath command](/en-US/docs/web/svg/attribute/d#closepath-commands) to the list of shape commands. + - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath-commands) to the list of shape commands. ## Description The `shape()` function allows you to define complex shapes. It is similar to the `{{cssxref("path","path()")}}` function in several ways: - The `` parameter in the `shape()` function works exactly like the same parameter in the `path()` function. -- The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/web/svg/attribute/d#path_commands), such as MoveTo, LineTo, and ClosePath. +- The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/Web/SVG/Attribute/d#path_commands), such as [MoveTo](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands), [LineTo](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands), and [ClosePath](/en-US/docs/Web/SVG/Attribute/d#closepath-commands). However, `shape()` offers several advantages over using `path()`: @@ -94,51 +127,139 @@ However, `shape()` offers several advantages over using `path()`: ## Examples -### Examples of correct values for path() +### Using `shape()` to define a path + +This example demonstrates how the `shape()` function can be used in the {{cssxref("offset-path")}} property to define the shape of the path that an element can follow. We're creating a curved path in this example. + +```html hidden +
+ Using <curve-command> +
>>
+
+ +
+ Using <move-command> and + <hvline-command> +
>>
+
+``` + +```css hidden +body { + align-items: center; + justify-content: center; + display: flex; +} + +.container { + position: relative; + display: inline-block; + width: 250px; + height: 250px; + border: 2px dotted green; + margin: 20px; +} +``` ```css -path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); -path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); +.shape { + width: 50px; + height: 50px; + background: #2bc4a2; + position: absolute; + text-align: center; + line-height: 50px; + animation: move 5s infinite alternate ease-in-out; +} + +.shape1 { + offset-path: shape(from 30% 60px, curve to 180px 180px via 90px 190px); +} + +.shape2 { + offset-path: shape( + from 20px 20px, + move to 50px 90px, + hline to 8em, + vline by 20% + ); +} + +@keyframes move { + 0% { + offset-distance: 0%; + } + 100% { + offset-distance: 100%; + } +} ``` -### Use as the value of offset-path +#### Result -The `path()` function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle. +{{EmbedLiveSample('Using shape() to define a path', '100%', 300)}} -{{EmbedGHLiveSample("css-examples/path/offset-path.html", '100%', 960)}} +### Using `shape()` to define the visible part of an element -### Modify the value of the SVG path d attribute +This example demonstrates how the `shape()` function can be used in the {{cssxref("clip-path")}} property to create the shape of the clipping region. -The `path()` can be used to modify the value of the SVG [`d` attribute](/en-US/docs/web/svg/attribute/d), which can also be set to `none` in your CSS. +```html hidden +
+
+
-The "V" symbol will flip vertically when you hover over it, if `d` is supported as a CSS property. +
+
+
+``` -#### CSS +```css hidden +body { + align-items: center; + justify-content: center; + display: flex; +} + +.container { + position: relative; + display: inline-block; + width: 200px; + height: 200px; + margin: 20px; + background-color: lightgray; +} +``` ```css -html, -body, -svg { +.shape { + width: 100%; height: 100%; + background: #2bc4a2; + position: absolute; + text-align: center; + line-height: 50px; } -/* This path is displayed on hover*/ -#svg_css_ex1:hover path { - d: path("M20,80 L50,20 L80,80"); +/* Simple triangle */ +.shape1 { + clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close); } -``` - -#### HTML -```html - - - +/* More complex shape with curves and smooth transitions */ +.shape2 { + clip-path: shape( + from 10px 10px, + curve to 60px 20% via 40px 0, + smooth to 90px 0, + curve by -20px 60% via 10% 40px 20% 20px, + smooth by -40% -10px via -10px 70px + ); +} ``` #### Result -{{EmbedLiveSample('Modify the value of the SVG path d attribute', '100%', 200)}} +{{EmbedLiveSample('Using shape() to define the visible part of an element', '100%', 300)}} ## Specifications @@ -155,4 +276,3 @@ svg { - [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module - [Overview of shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) guide - [Basic shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) guide -- [The SVG path syntax: An illustrated guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/) on CSS-Tricks (2021) diff --git a/files/en-us/web/css/clip-path/index.md b/files/en-us/web/css/clip-path/index.md index 36b2cafcfb64175..806b35d398cdf59 100644 --- a/files/en-us/web/css/clip-path/index.md +++ b/files/en-us/web/css/clip-path/index.md @@ -73,6 +73,8 @@ The `clip-path` property is specified as one or a combination of the values list - : Defines a shape using an optional SVG filling rule and an SVG path definition. - {{cssxref("basic-shape/rect","rect()")}} - : Defines a rectangle using the specified distances from the edges of the reference box. + - {{cssxref("shape","shape()")}} {{Experimental_Inline}} + - : Defines a shape using an optional SVG filling rule and shape commands for lines, curves, and arcs. - {{cssxref("basic-shape/xywh","xywh()")}} - : Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index 43902b76ffa450b..af138a463a2baf6 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -74,7 +74,7 @@ The `offset-path` property takes as its value an `` value, a [`` is an `ellipse()` function, then the path is the outline of the ellipse, starting at the rightmost point of the ellipse, proceeding clockwise through a full rotation. For `ellipse()` and `circle()`, which accept the `at ` parameter, if the `` is omitted, the position defaults to `center` unless the element has an {{cssxref("offset-position")}} specified. In this case, the `offset-position` value is used for the `at ` parameter. + - : Specifies the offset path as the equivalent path of a {{cssxref("basic-shape", "CSS basic shape function")}}, such as {{cssxref("basic-shape/circle","circle()")}}, {{cssxref("basic-shape/ellipse","ellipse()")}}, {{cssxref("basic-shape/inset","inset()")}}, {{cssxref("path","path()")}}, {{cssxref("basic-shape/polygon","polygon()")}}, {{cssxref("basic-shape/rect","rect()")}}, or {{cssxref("basic-shape/xywh","xywh()")}}. For example, if the `` is an `ellipse()` function, then the path is the outline of the ellipse, starting at the rightmost point of the ellipse, proceeding clockwise through a full rotation. For `ellipse()` and `circle()`, which accept the `at ` parameter, if the `` is omitted, the position defaults to `center` unless the element has an {{cssxref("offset-position")}} specified. In this case, the `offset-position` value is used for the `at ` parameter. More complex shapes can be defined using the {{cssxref("basic-shape/shape","shape()")}} function. - [``](/en-US/docs/Web/CSS/box-edge#values) From 9804085403ebc27ee905607a4a45e713a61994e6 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 6 May 2024 13:36:41 -0400 Subject: [PATCH 07/32] undo's the alphabetical ordering of shape functions --- files/en-us/web/css/basic-shape/index.md | 72 ++++++++++++------------ 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index b96396d39b30cee..620c2d851498f2a 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -25,55 +25,65 @@ The default reference box is the `margin-box`, as demonstrated in the below imag The following shapes are supported. All `` values use functional notation and are defined here using the [value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax). -- `{{cssxref("basic-shape/circle","circle()")}}` +- `{{cssxref("basic-shape/inset","inset()")}}` - - : Defines a circle using a radius and a position. + - : Defines an inset rectangle. ```css - circle( ? [ at ]? ) + inset( {1,4} [ round <`border-radius`> ]? ) ``` - The `` argument represents _r_, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. + When all of the first four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the position of the edges of the inset rectangle. These arguments follow the syntax of the {{cssxref("margin")}} shorthand, which lets you set all four insets with one, two, three, or four values. - The {{cssxref("<position>")}} argument defines the center of the circle. This defaults to center if omitted. + The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. -- `{{cssxref("basic-shape/ellipse","ellipse()")}}` + A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. - - : Defines an ellipse using two radii and a position. +- `{{cssxref("basic-shape/rect","rect()")}}` + + - : Defines a rectangle using the specified distances from the top and left edges of the reference box. ```css - ellipse( [ {2} ]? [ at ]? ) + rect( [ | auto ]{4} [ round <`border-radius`> ]? ) ``` - The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. + You specify four values to create the rectangle. Each of the four values is either a ``, a ``, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. - The position argument defines the center of the ellipse. This defaults to center if omitted. + The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. -- `{{cssxref("basic-shape/inset","inset()")}}` +- `{{cssxref("basic-shape/xywh","xywh()")}}` - - : Defines an inset rectangle. + - : Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. ```css - inset( {1,4} [ round <`border-radius`> ]? ) + xywh( {2} {2} [ round <`border-radius`> ]? ) ``` - When all of the first four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the position of the edges of the inset rectangle. These arguments follow the syntax of the {{cssxref("margin")}} shorthand, which lets you set all four insets with one, two, three, or four values. + The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand syntax. - The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. +- `{{cssxref("basic-shape/circle","circle()")}}` - A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. + - : Defines a circle using a radius and a position. -- `{{cssxref("path","path()")}}` + ```css + circle( ? [ at ]? ) + ``` - - : Defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). + The `` argument represents _r_, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. + + The {{cssxref("<position>")}} argument defines the center of the circle. This defaults to center if omitted. + +- `{{cssxref("basic-shape/ellipse","ellipse()")}}` + + - : Defines an ellipse using two radii and a position. ```css - path( [ , ]? ) + ellipse( [ {2} ]? [ at ]? ) ``` - The optional `` represents the {{SVGAttr("fill-rule")}} used to determine the interior of the path. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. + The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. - The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes. + The position argument defines the center of the ellipse. This defaults to center if omitted. - `{{cssxref("basic-shape/polygon","polygon()")}}` @@ -87,17 +97,17 @@ The following shapes are supported. All `` values use functional no Each pair argument in the list represents _xi_ and _yi_ - the x and y axis coordinates of the vertex of the polygon at position i. -- `{{cssxref("basic-shape/rect","rect()")}}` +- `{{cssxref("path","path()")}}` - - : Defines a rectangle using the specified distances from the top and left edges of the reference box. + - : Defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). ```css - rect( [ | auto ]{4} [ round <`border-radius`> ]? ) + path( [ , ]? ) ``` - You specify four values to create the rectangle. Each of the four values is either a ``, a ``, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. + The optional `` represents the {{SVGAttr("fill-rule")}} used to determine the interior of the path. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. - The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. + The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes. - `{{cssxref("basic-shape/shape","shape()")}}` {{Experimental_Inline}} @@ -111,16 +121,6 @@ The following shapes are supported. All `` values use functional no `from ` represents the starting point for the first shape command, and `` defines one one or more shape commands, which are similar to the [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). -- `{{cssxref("basic-shape/xywh","xywh()")}}` - - - : Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. - - ```css - xywh( {2} {2} [ round <`border-radius`> ]? ) - ``` - - The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand syntax. - The arguments not defined above are defined as follows: ```css From 850d5517698865d7ef1b1612ece489f0b74a0e6c Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 6 May 2024 14:00:57 -0400 Subject: [PATCH 08/32] updates fill-rule example syntax --- files/en-us/web/css/basic-shape/shape/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index e47cf848c3bd2ea..ca70f8d63a440e8 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -9,13 +9,11 @@ browser-compat: css.types.basic-shape.shape The **`shape()`** [CSS function](/en-US/docs/Web/CSS/CSS_Functions) is used to define a shape for the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The `shape()` function is one of the {{cssxref("<basic-shape>")}} data types. - - ## Syntax ```css /* */ -offset-path: shape(nonzero from 0px 0px, line to 10px 10px); +clip-path: shape(nonzero from 0px 0px, line to 10px 10px); /* , , and close */ offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close); From 0ff428d1d8e0e7dd5b1abe52e0ff3c6a7c66fec5 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 6 May 2024 14:08:36 -0400 Subject: [PATCH 09/32] fixes shape() link --- files/en-us/web/css/clip-path/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/clip-path/index.md b/files/en-us/web/css/clip-path/index.md index 806b35d398cdf59..f663667795d45eb 100644 --- a/files/en-us/web/css/clip-path/index.md +++ b/files/en-us/web/css/clip-path/index.md @@ -73,7 +73,7 @@ The `clip-path` property is specified as one or a combination of the values list - : Defines a shape using an optional SVG filling rule and an SVG path definition. - {{cssxref("basic-shape/rect","rect()")}} - : Defines a rectangle using the specified distances from the edges of the reference box. - - {{cssxref("shape","shape()")}} {{Experimental_Inline}} + - {{cssxref("basic-shape","shape()")}} {{Experimental_Inline}} - : Defines a shape using an optional SVG filling rule and shape commands for lines, curves, and arcs. - {{cssxref("basic-shape/xywh","xywh()")}} - : Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. From 78a618a760c068d0b0f017128e42908bee586535 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 6 May 2024 14:16:14 -0400 Subject: [PATCH 10/32] fixes broken link --- files/en-us/web/css/basic-shape/shape/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index ca70f8d63a440e8..ad81072d264a2aa 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -115,7 +115,7 @@ The `shape()` function allows you to define complex shapes. It is similar to the However, `shape()` offers several advantages over using `path()`: -- Unlike `path()`, which uses the [SVG path](/en-US/docs/web/SVG/Element/path) syntax, `shape()` uses standard CSS syntax, making it easier to create and modify shapes directly in your stylesheet. +- Unlike `path()`, which uses the [SVG path](/en-US/docs/Web/SVG/Element/path) syntax, `shape()` uses standard CSS syntax, making it easier to create and modify shapes directly in your stylesheet. - The `path()` function inherits some limitations from SVG, such as requiring shapes to be written as a single string and limiting units to `px`. The `shape()` function, on the other hand, supports a variety of CSS units, including percentages, `rem`, and `em`. - `shape()` also allows the use of CSS math functions, providing more versatility when defining shapes. From 3f8de16b18b895c1d0d8c1d0d0c5ce939487a827 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 9 May 2024 17:15:02 -0400 Subject: [PATCH 11/32] partial review fixes --- files/en-us/web/css/basic-shape/index.md | 36 ++++++++++++------- .../en-us/web/css/basic-shape/shape/index.md | 10 +++--- files/en-us/web/css/path/index.md | 3 ++ 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 620c2d851498f2a..13b9b55cbd8d63b 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -105,7 +105,7 @@ The following shapes are supported. All `` values use functional no path( [ , ]? ) ``` - The optional `` represents the {{SVGAttr("fill-rule")}} used to determine the interior of the path. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. + ``, if present, determines the interior of the path. Default value when omitted is `nonzero`. The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes. @@ -117,10 +117,12 @@ The following shapes are supported. All `` values use functional no shape( ? from , # ) ``` - `` is optional and represents the {{SVGAttr("fill-rule")}} used to determine the interior of the polygon. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. + ``, if present, determines the interior of the path. Default value when omitted is `nonzero`. `from ` represents the starting point for the first shape command, and `` defines one one or more shape commands, which are similar to the [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). +> **Note:** `` is not supported in the {{cssxref("offset-path")}} property. + The arguments not defined above are defined as follows: ```css @@ -146,17 +148,25 @@ The values in a `` function are computed as specified, with these e ### Interpolation of basic shapes -When animating between one `` and another, the rules below are applied. The values in the `` functions {{Glossary("interpolation", "interpolate")}} as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc", "calc()")}} where possible. If list values are not one of those types but are identical, those values do interpolate. - -- Both shapes must use the same reference box. -- If the two shapes are of the same type, namely `ellipse()` and `circle()` and if their radii do not use the `closest-side` or `farthest-side` keywords, interpolation is applied between each value in the shape functions. -- If both shapes are of type `inset()`, interpolation is applied between each value in the shape functions. -- If both shapes are of type `polygon()`, and both polygons have the same number of vertices and use the same ``, interpolation is applied between each value in the shape functions. -- If both shapes are of type `path()`, and both path strings have the same number and types of path data commands and in the same order, each path data command is interpolated as a real number. -- If the two shapes are of type `shape()` and `path()` and have matching path data commands in length and order, the interpolated value is a `path()` function if both starting and ending values are `path()` functions; otherwise, it's treated as a `shape()` function. The interpolated value must represent the same list of path data commands, with numerical components interpolated between the corresponding components of the starting and ending list. -- If both shapes are of type `shape()`, the shape commands are considered the same if they share the identical command keyword and `` parameters; for `` and ``, the number of control points must match. -- If both shapes of type `shape()` with an `` have different `` between their starting and ending lists, then the interpolated result uses `cw` for any progress value between `0` and `1`. If the shapes have different `` keywords, then the interpolated result uses `large` for any progress value between `0` and `1`. -- In all other cases, no interpolation occurs. +When animating from one `` to another, the {{Glossary("interpolation")}} rules listed below are followed. For any interpolation between two shapes, both must use the same reference box. The values between two `` functions interpolate based on their computed values, forming a simple list. The list values are interpolated as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc", "calc()")}} where possible. If the list values are not one of those types but are identical (such as `nonzero` in the same position in both `basic-shape` functions), those values also interpolate. + +- **Both shapes are of type `ellipse()` or type `circle()`**: Interpolation is applied between each corresponding value if their radii are specified as {{cssxref("<length-percentage>")}} (rather than keywords such as `closest-side` or `farthest-side`). + +- **Both shapes are of type `inset()`**: Interpolation is applied between each corresponding value. + +- **Both shapes are of type `polygon()`**: Interpolation is applied between each corresponding value, including the vertices (specified as x/y coordinate pairs), if they have the same number of vertices and use the same ``. + +- **Both shapes are of type `path()`**: Each parameter of the path data command is interpolated as a real number if the path strings in both `path()` shapes have the same number and type of [path data commands](/en-US/docs/Web/SVG/Attribute/d#path_commands) in the same sequence. + +- **Both shapes are of type `shape()`**: Interpolation is applied between each corresponding value if they have the identical command keyword and use the same `` keyword. If `shape()` is used in the {{cssxref("clip-path")}} property, the two shapes interpolate if they also have the same ``. + + - If they use the `` or the ``, the number of control points must match for interpolation. + + - If they use the `` with different `` directions, the interpolated result goes clockwise (`cw`). If they use different `` keywords, the size is interpolated using the `large` value. + +- **One shape is of type `path()` and the other is of type `shape()`**: Interpolation is applied between each corresponding value if the list of path data commands is identical in number as well as sequence. The interpolated shape is a `shape()` function, maintaining the same list of path data commands. + +In all other cases, no interpolation occurs and the animation is discrete. ## Examples diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index ad81072d264a2aa..8d78f5eddc9ff1a 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -62,6 +62,8 @@ clip-path: shape( - `evenodd`: A point is considered inside the shape if a ray drawn from the point crosses an odd number of path segments. + > **Note:** `` is not supported in the {{cssxref("offset-path")}} property. + - `from ` - : Defines the starting point for the first `` as a pair of coordinates that are measured from the top-left corner of the reference box. The coordinates are specified as a {{cssxref("<length-percentage>")}} value. Add a comma after this parameter. @@ -86,15 +88,15 @@ clip-path: shape( - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a horizontal or vertical line from the command's starting point to its ending point. The `by`or `to` keyword determine the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with `` providing the horizontal or vertical component. - - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_b%C3%A9zier_curve_commands) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic-bézier-curve-commands); if two ``s are provided, the command draws a cubic Bézier curve. + The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_b%C3%A9zier_curve_commands); if two ``s are provided, the command draws a cubic Bézier curve. - - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve_commands) to the list of shape commands. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_b%C3%A9zier_curve_commands) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. - - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical-arc-curve-commands) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve_commands) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs. The `of` keyword specifies the size of the ellipse fom which the arc is taken. The first `` provides the horizontal radius of the ellipse, and the second provides the vertical radius. If only one `` is provided, the same value is used for both the radii. The following parameters help to choose from a possibility of four arcs: diff --git a/files/en-us/web/css/path/index.md b/files/en-us/web/css/path/index.md index bacda57c08dbf75..a8b647dfb774b96 100644 --- a/files/en-us/web/css/path/index.md +++ b/files/en-us/web/css/path/index.md @@ -28,7 +28,10 @@ path( [,]? ) ### Parameters - [``](/en-US/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}} + - : An optional value of [`nonzero`](/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero) (the default when omitted) or [`evenodd`](/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd), which specifies the filling rule. + > **Note:** `` is not supported in the {{cssxref("offset-path")}} property. + - {{cssxref("string")}} - : A [data string](/en-US/docs/Web/SVG/Attribute/d) for defining an [SVG path](/en-US/docs/Web/SVG/Element/path). The syntax for the contents of this `` is identical to SVG. From 5a828c1023a08ce0d781950849d250291aa07a86 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 9 May 2024 17:52:04 -0400 Subject: [PATCH 12/32] fixes anchor links --- files/en-us/web/css/basic-shape/shape/index.md | 4 ++-- files/en-us/web/svg/attribute/d/index.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 8d78f5eddc9ff1a..bf34940ea3b7143 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -106,14 +106,14 @@ clip-path: shape( > **Note:** If the starting and ending points of the arc lie on exactly opposite sides of the ellipse, there is only one possible ellipse and two possible arcs. In this case, `` specifies the arc to choose, and `` has no effect. - - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath-commands) to the list of shape commands. + - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath_commands) to the list of shape commands. ## Description The `shape()` function allows you to define complex shapes. It is similar to the `{{cssxref("path","path()")}}` function in several ways: - The `` parameter in the `shape()` function works exactly like the same parameter in the `path()` function. -- The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/Web/SVG/Attribute/d#path_commands), such as [MoveTo](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands), [LineTo](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands), and [ClosePath](/en-US/docs/Web/SVG/Attribute/d#closepath-commands). +- The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/Web/SVG/Attribute/d#path_commands), such as [MoveTo](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands), [LineTo](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands), and [ClosePath](/en-US/docs/Web/SVG/Attribute/d#closepath_commands). However, `shape()` offers several advantages over using `path()`: diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index 0963ddaf7d8214e..2632b26a6a98822 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -164,9 +164,9 @@ SVG defines 6 types of path commands, for a total of 20 commands: - [MoveTo](#moveto_path_commands): `M`, `m` - [LineTo](#lineto_path_commands): `L`, `l`, `H`, `h`, `V`, `v` - [Cubic Bézier curve](#cubic_bézier_curve_commands): `C`, `c`, `S`, `s` -- [Quadratic Bézier curve](#quadratic-bézier-curve-commands): `Q`, `q`, `T`, `t` -- [Elliptical arc curve](#elliptical-arc-curve-commands): `A`, `a` -- [ClosePath](#closepath-commands): `Z`, `z` +- [Quadratic Bézier curve](#quadratic_bézier_curve_commands): `Q`, `q`, `T`, `t` +- [Elliptical arc curve](#elliptical_arc_curve_commands): `A`, `a` +- [ClosePath](#closepath_commands): `Z`, `z` > **Note:** Commands are _case-sensitive_. An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position. From 8f6ab4658af1f83432a5b6c97305f315f1b5af1a Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 9 May 2024 17:55:51 -0400 Subject: [PATCH 13/32] another attempt at anchor links --- files/en-us/web/svg/attribute/d/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index 2632b26a6a98822..e0f226ec8d4648f 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -163,8 +163,8 @@ SVG defines 6 types of path commands, for a total of 20 commands: - [MoveTo](#moveto_path_commands): `M`, `m` - [LineTo](#lineto_path_commands): `L`, `l`, `H`, `h`, `V`, `v` -- [Cubic Bézier curve](#cubic_bézier_curve_commands): `C`, `c`, `S`, `s` -- [Quadratic Bézier curve](#quadratic_bézier_curve_commands): `Q`, `q`, `T`, `t` +- [Cubic Bézier curve](#cubic_b%C3%A9zier_curve_commands): `C`, `c`, `S`, `s` +- [Quadratic Bézier curve](#quadratic_b%C3%A9zier_curve_commands): `Q`, `q`, `T`, `t` - [Elliptical arc curve](#elliptical_arc_curve_commands): `A`, `a` - [ClosePath](#closepath_commands): `Z`, `z` From d1a91f30a42f649c82fe638f5c8e28ee73ff15ad Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 9 May 2024 18:05:56 -0400 Subject: [PATCH 14/32] check if removing bezier works --- files/en-us/web/css/basic-shape/shape/index.md | 6 +++--- files/en-us/web/svg/attribute/d/index.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index bf34940ea3b7143..e8361d3628d1766 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -88,11 +88,11 @@ clip-path: shape( - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a horizontal or vertical line from the command's starting point to its ending point. The `by`or `to` keyword determine the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with `` providing the horizontal or vertical component. - - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_b%C3%A9zier_curve_commands) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_curve_commands) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_b%C3%A9zier_curve_commands); if two ``s are provided, the command draws a cubic Bézier curve. + The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_curve_commands); if two ``s are provided, the command draws a cubic Bézier curve. - - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_b%C3%A9zier_curve_commands) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_curve_commands) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index e0f226ec8d4648f..ec0cf6de4a89843 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -163,8 +163,8 @@ SVG defines 6 types of path commands, for a total of 20 commands: - [MoveTo](#moveto_path_commands): `M`, `m` - [LineTo](#lineto_path_commands): `L`, `l`, `H`, `h`, `V`, `v` -- [Cubic Bézier curve](#cubic_b%C3%A9zier_curve_commands): `C`, `c`, `S`, `s` -- [Quadratic Bézier curve](#quadratic_b%C3%A9zier_curve_commands): `Q`, `q`, `T`, `t` +- [Cubic Bézier curve](#cubic_curve_commands): `C`, `c`, `S`, `s` +- [Quadratic Bézier curve](#quadratic_curve_commands): `Q`, `q`, `T`, `t` - [Elliptical arc curve](#elliptical_arc_curve_commands): `A`, `a` - [ClosePath](#closepath_commands): `Z`, `z` From d66a299801353065fa2e65900b5faa060af0b099 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 10 May 2024 11:57:31 -0400 Subject: [PATCH 15/32] adjusts interpolation text --- files/en-us/web/css/basic-shape/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 13b9b55cbd8d63b..b817ead950ff4ff 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -148,7 +148,7 @@ The values in a `` function are computed as specified, with these e ### Interpolation of basic shapes -When animating from one `` to another, the {{Glossary("interpolation")}} rules listed below are followed. For any interpolation between two shapes, both must use the same reference box. The values between two `` functions interpolate based on their computed values, forming a simple list. The list values are interpolated as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc", "calc()")}} where possible. If the list values are not one of those types but are identical (such as `nonzero` in the same position in both `basic-shape` functions), those values also interpolate. +When animating from one `` to another, the {{Glossary("interpolation")}} rules listed below are followed. For any interpolation to happen between two shapes, both must use the same reference box. The values between two `` functions interpolate based on their computed values, forming a simple list. The list values are interpolated as {{cssxref("<number>")}}, {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, {{cssxref("<angle>")}}, or {{cssxref("calc", "calc()")}} where possible. If the list values are not one of those types but are identical (such as `nonzero` in the same position in both `basic-shape` functions), those values also interpolate. - **Both shapes are of type `ellipse()` or type `circle()`**: Interpolation is applied between each corresponding value if their radii are specified as {{cssxref("<length-percentage>")}} (rather than keywords such as `closest-side` or `farthest-side`). @@ -156,7 +156,7 @@ When animating from one `` to another, the {{Glossary("interpolatio - **Both shapes are of type `polygon()`**: Interpolation is applied between each corresponding value, including the vertices (specified as x/y coordinate pairs), if they have the same number of vertices and use the same ``. -- **Both shapes are of type `path()`**: Each parameter of the path data command is interpolated as a real number if the path strings in both `path()` shapes have the same number and type of [path data commands](/en-US/docs/Web/SVG/Attribute/d#path_commands) in the same sequence. +- **Both shapes are of type `path()`**: Interpolation is applied to each parameter as a {{cssxref("<number>")}} if the path strings in both the shapes match the number, type, and sequence of [path data commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). - **Both shapes are of type `shape()`**: Interpolation is applied between each corresponding value if they have the identical command keyword and use the same `` keyword. If `shape()` is used in the {{cssxref("clip-path")}} property, the two shapes interpolate if they also have the same ``. From dc9e95b952459aad0b989d2143d72cda4f14978f Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 10 May 2024 12:08:42 -0400 Subject: [PATCH 16/32] undo the section title changes in d attribute --- files/en-us/web/css/basic-shape/shape/index.md | 12 ++++++------ files/en-us/web/svg/attribute/d/index.md | 16 ++++++++-------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index e8361d3628d1766..21276f38fc56009 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -88,15 +88,15 @@ clip-path: shape( - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a horizontal or vertical line from the command's starting point to its ending point. The `by`or `to` keyword determine the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with `` providing the horizontal or vertical component. - - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_curve_commands) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_curve_commands); if two ``s are provided, the command draws a cubic Bézier curve. + The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_bézier_curve); if two ``s are provided, the command draws a cubic Bézier curve. - - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_curve_commands) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. - - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve_commands) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs. The `of` keyword specifies the size of the ellipse fom which the arc is taken. The first `` provides the horizontal radius of the ellipse, and the second provides the vertical radius. If only one `` is provided, the same value is used for both the radii. The following parameters help to choose from a possibility of four arcs: @@ -106,14 +106,14 @@ clip-path: shape( > **Note:** If the starting and ending points of the arc lie on exactly opposite sides of the ellipse, there is only one possible ellipse and two possible arcs. In this case, `` specifies the arc to choose, and `` has no effect. - - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath_commands) to the list of shape commands. + - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath) to the list of shape commands. ## Description The `shape()` function allows you to define complex shapes. It is similar to the `{{cssxref("path","path()")}}` function in several ways: - The `` parameter in the `shape()` function works exactly like the same parameter in the `path()` function. -- The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/Web/SVG/Attribute/d#path_commands), such as [MoveTo](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands), [LineTo](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands), and [ClosePath](/en-US/docs/Web/SVG/Attribute/d#closepath_commands). +- The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/Web/SVG/Attribute/d#path_commands), such as [MoveTo](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands), [LineTo](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands), and [ClosePath](/en-US/docs/Web/SVG/Attribute/d#closepath). However, `shape()` offers several advantages over using `path()`: diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index ec0cf6de4a89843..cce8329bff89ae8 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -163,10 +163,10 @@ SVG defines 6 types of path commands, for a total of 20 commands: - [MoveTo](#moveto_path_commands): `M`, `m` - [LineTo](#lineto_path_commands): `L`, `l`, `H`, `h`, `V`, `v` -- [Cubic Bézier curve](#cubic_curve_commands): `C`, `c`, `S`, `s` -- [Quadratic Bézier curve](#quadratic_curve_commands): `Q`, `q`, `T`, `t` -- [Elliptical arc curve](#elliptical_arc_curve_commands): `A`, `a` -- [ClosePath](#closepath_commands): `Z`, `z` +- [Cubic Bézier curve](#cubic_bézier_curve): `C`, `c`, `S`, `s` +- [Quadratic Bézier curve](#quadratic_bézier_curve): `Q`, `q`, `T`, `t` +- [Elliptical arc curve](#elliptical_arc_curve): `A`, `a` +- [ClosePath](#closepath): `Z`, `z` > **Note:** Commands are _case-sensitive_. An upper-case command specifies absolute coordinates, while a lower-case command specifies coordinates relative to the current position. @@ -456,7 +456,7 @@ svg { {{EmbedLiveSample('LineTo_path_commands', '100%', 200)}} -### Cubic Bézier curve commands +### Cubic Bézier curve _Cubic [Bézier curves](/en-US/docs/Glossary/Bezier_curve)_ are smooth curve definitions using four points: @@ -684,7 +684,7 @@ svg { {{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}} -### Quadratic Bézier curve commands +### Quadratic Bézier curve _Quadratic [Bézier curves](/en-US/docs/Glossary/Bezier_curve)_ are smooth curve definitions using three points: @@ -909,7 +909,7 @@ svg { {{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}} -### Elliptical arc curve commands +### Elliptical arc curve _Elliptical arc curves_ are curves defined as a portion of an ellipse. It is sometimes easier to draw highly regular curves with an elliptical arc than with a Bézier curve. @@ -1063,7 +1063,7 @@ svg { {{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}} -### ClosePath commands +### ClosePath _ClosePath_ instructions draw a straight line from the _current position_ to the first point in the path. From a50e5bd496a46d2b1293ad1c364364fb73b0f4b1 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 10 May 2024 12:22:34 -0400 Subject: [PATCH 17/32] moves path under basic-shape --- files/en-us/_redirects.txt | 5 +++-- files/en-us/_wikihistory.json | 8 ++++---- files/en-us/mozilla/firefox/releases/97/index.md | 2 +- files/en-us/web/css/{ => basic-shape}/path/index.md | 2 +- files/en-us/web/svg/attribute/d/index.md | 2 +- 5 files changed, 10 insertions(+), 9 deletions(-) rename files/en-us/web/css/{ => basic-shape}/path/index.md (98%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index c20167a37284a8a..05b87eda4c78a12 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11614,7 +11614,7 @@ /en-US/docs/Web/CSS/filter-function/hue-rotate() /en-US/docs/Web/CSS/filter-function/hue-rotate /en-US/docs/Web/CSS/filter-function/invert() /en-US/docs/Web/CSS/filter-function/invert /en-US/docs/Web/CSS/filter-function/opacity() /en-US/docs/Web/CSS/filter-function/opacity -/en-US/docs/Web/CSS/filter-function/path() /en-US/docs/Web/CSS/path +/en-US/docs/Web/CSS/filter-function/path() /en-US/docs/Web/CSS/basic-shape/path /en-US/docs/Web/CSS/filter-function/saturate() /en-US/docs/Web/CSS/filter-function/saturate /en-US/docs/Web/CSS/filter-function/sepia() /en-US/docs/Web/CSS/filter-function/sepia /en-US/docs/Web/CSS/filter-function/url /en-US/docs/Web/CSS/url @@ -11680,7 +11680,8 @@ /en-US/docs/Web/CSS/pad /en-US/docs/Web/CSS/@counter-style/pad /en-US/docs/Web/CSS/paint /en-US/docs/Web/CSS/image/paint /en-US/docs/Web/CSS/paint() /en-US/docs/Web/CSS/image/paint -/en-US/docs/Web/CSS/path() /en-US/docs/Web/CSS/path +/en-US/docs/Web/CSS/path /en-US/docs/Web/CSS/basic-shape/path +/en-US/docs/Web/CSS/path() /en-US/docs/Web/CSS/basic-shape/path /en-US/docs/Web/CSS/prefix /en-US/docs/Web/CSS/@counter-style/prefix /en-US/docs/Web/CSS/radial-gradient /en-US/docs/Web/CSS/gradient/radial-gradient /en-US/docs/Web/CSS/radial-gradient() /en-US/docs/Web/CSS/gradient/radial-gradient diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index a55243c284a93cb..4784271c41d4084 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -80647,6 +80647,10 @@ "rebeccahauck" ] }, + "Web/CSS/basic-shape/path": { + "modified": "2020-12-11T11:12:50.012Z", + "contributors": ["chrisdavidmills", "rachelandrew"] + }, "Web/CSS/blend-mode": { "modified": "2020-10-15T21:29:47.283Z", "contributors": [ @@ -88398,10 +88402,6 @@ "AkashMishraa" ] }, - "Web/CSS/path": { - "modified": "2020-12-11T11:12:50.012Z", - "contributors": ["chrisdavidmills", "rachelandrew"] - }, "Web/CSS/percentage": { "modified": "2020-12-14T06:48:33.216Z", "contributors": [ diff --git a/files/en-us/mozilla/firefox/releases/97/index.md b/files/en-us/mozilla/firefox/releases/97/index.md index 33502c5b9b09952..8a6b14b00412705 100644 --- a/files/en-us/mozilla/firefox/releases/97/index.md +++ b/files/en-us/mozilla/firefox/releases/97/index.md @@ -37,7 +37,7 @@ No notable changes ### SVG - The SVG {{SVGAttr('d')}} attribute, used to define a path to be drawn, can now be used as a property in CSS. - It accepts the values [path()](/en-US/docs/Web/CSS/path) or `none`. (See [Firefox bug 1744599](https://bugzil.la/1744599) for details.) + It accepts the values [path()](/en-US/docs/Web/CSS/basic-shape/path) or `none`. (See [Firefox bug 1744599](https://bugzil.la/1744599) for details.) #### Removals diff --git a/files/en-us/web/css/path/index.md b/files/en-us/web/css/basic-shape/path/index.md similarity index 98% rename from files/en-us/web/css/path/index.md rename to files/en-us/web/css/basic-shape/path/index.md index a8b647dfb774b96..d5574baa3075e86 100644 --- a/files/en-us/web/css/path/index.md +++ b/files/en-us/web/css/basic-shape/path/index.md @@ -1,6 +1,6 @@ --- title: path() -slug: Web/CSS/path +slug: Web/CSS/basic-shape/path page-type: css-function browser-compat: css.types.basic-shape.path --- diff --git a/files/en-us/web/svg/attribute/d/index.md b/files/en-us/web/svg/attribute/d/index.md index cce8329bff89ae8..ae44bf9d3a75cd1 100644 --- a/files/en-us/web/svg/attribute/d/index.md +++ b/files/en-us/web/svg/attribute/d/index.md @@ -119,7 +119,7 @@ For {{SVGElement('missing-glyph')}}, `d` is a string containing a series of path ## Using d as a CSS property `d` is a presentation attribute, and hence can be also be modified using CSS. -The property takes either [path()](/en-US/docs/Web/CSS/path) or `none`. +The property takes either [path()](/en-US/docs/Web/CSS/basic-shape/path) or `none`. The example below shows how you might apply a new path on hover over an element. The new path is the same as the old one, but adds a line across the heart. From ee6294a07db4af4e8338f861be3227c117f3602a Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 10 May 2024 13:33:37 -0400 Subject: [PATCH 18/32] improves the basic-shape page --- files/en-us/web/css/basic-shape/index.md | 141 ++++++++---------- files/en-us/web/css/basic-shape/path/index.md | 2 +- 2 files changed, 66 insertions(+), 77 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index b817ead950ff4ff..acbb48a5a2ee2e4 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -13,130 +13,119 @@ The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/C ## Syntax -The `` data type is defined with one of the basic shape functions listed below. +The `` data type is defined using one of the basic shape functions described in the sections below. All `` values use functional notation and are defined using the [value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax). -When creating a shape, the reference box is defined by each property that uses `` values. The coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box. - -The default reference box is the `margin-box`, as demonstrated in the below image which shows a circle created using `shape-outside: circle(50%)`. The shape is being defined with reference to the margin box. - -![An image showing a circle inspected with the Firefox DevTools Shape Inspector. The different parts of the box model are highlighted.](shapes-reference-box.png) - -### Shape functions +Parameters common across some basic shape functions include: -The following shapes are supported. All `` values use functional notation and are defined here using the [value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax). +- `round <'border-radius'>` -- `{{cssxref("basic-shape/inset","inset()")}}` + - : Defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. This parameter is specified in the `inset()`, `rect()`, and `xywh()` functions. - - : Defines an inset rectangle. +- `` - ```css - inset( {1,4} [ round <`border-radius`> ]? ) - ``` + - : Defines the radius for a circle or an ellipse. The valid values include ``, ``, `closest-side` and `farthest-side`. Negative values are invalid. It defaults to `closest-side` if omitted. - When all of the first four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the position of the edges of the inset rectangle. These arguments follow the syntax of the {{cssxref("margin")}} shorthand, which lets you set all four insets with one, two, three, or four values. + `closest-side` uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension. - The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. + `farthest-side` uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension. - A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. +- `` -- `{{cssxref("basic-shape/rect","rect()")}}` + - : Defines the center of the shape. It defaults to center of the shape if omitted. This parameter is specified in the `circle()` and `ellipse()` functions. - - : Defines a rectangle using the specified distances from the top and left edges of the reference box. +- `` - ```css - rect( [ | auto ]{4} [ round <`border-radius`> ]? ) - ``` + - : Represents the {{SVGAttr("fill-rule")}} used to determine the interior of the shape. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. This parameter is specified in the `polygon()`, `path()`, and `shape()` functions. - You specify four values to create the rectangle. Each of the four values is either a ``, a ``, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. + > **Note:** `` is not supported in the {{cssxref("offset-path")}} property. - The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. +### Inset -- `{{cssxref("basic-shape/xywh","xywh()")}}` +The `{{cssxref("basic-shape/inset","inset()")}}` function defines an inset rectangle. - - : Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. - - ```css - xywh( {2} {2} [ round <`border-radius`> ]? ) - ``` - - The optional `round <'border-radius'>` parameter defines rounded corners for the inset rectangle using the [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand syntax. +```plain +inset( {1,4} [ round <`border-radius`> ]? ) +``` -- `{{cssxref("basic-shape/circle","circle()")}}` +When all of the first four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the position of the edges of the inset rectangle. These arguments follow the syntax of the {{cssxref("margin")}} shorthand, which lets you set all four insets with one, two, three, or four values. - - : Defines a circle using a radius and a position. +A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. - ```css - circle( ? [ at ]? ) - ``` +### Rectangle by distance - The `` argument represents _r_, the radius of the circle. Negative values are invalid. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. +The `{{cssxref("basic-shape/rect","rect()")}}` function defines a rectangle using the specified distances from the top and left edges of the reference box. - The {{cssxref("<position>")}} argument defines the center of the circle. This defaults to center if omitted. +```plain +rect( [ | auto ]{4} [ round <`border-radius`> ]? ) +``` -- `{{cssxref("basic-shape/ellipse","ellipse()")}}` +You specify four values to create the rectangle. Each of the four values is either a ``, a ``, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. - - : Defines an ellipse using two radii and a position. +### Rectangle with dimensions - ```css - ellipse( [ {2} ]? [ at ]? ) - ``` +The `{{cssxref("basic-shape/xywh","xywh()")}}` function defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. - The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Negative values for either radius are invalid. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. +```plain +xywh( {2} {2} [ round <`border-radius`> ]? ) +``` - The position argument defines the center of the ellipse. This defaults to center if omitted. +### Circle -- `{{cssxref("basic-shape/polygon","polygon()")}}` +The `{{cssxref("basic-shape/circle","circle()")}}` function defines a circle using a radius and a position. - - : Defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of vertices. +```plain +circle( ? [ at ]? ) +``` - ```css - polygon( ? [ ]# ) - ``` +The `` argument represents _r_, the radius of the circle. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. - `` is optional and represents the {{SVGAttr("fill-rule")}} used to determine the interior of the polygon. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. +### Ellipse - Each pair argument in the list represents _xi_ and _yi_ - the x and y axis coordinates of the vertex of the polygon at position i. +The `{{cssxref("basic-shape/ellipse","ellipse()")}}` function defines an ellipse using two radii and a position. -- `{{cssxref("path","path()")}}` +```plain +ellipse( [ {2} ]? [ at ]? ) +``` - - : Defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). +The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. - ```css - path( [ , ]? ) - ``` +### Polygon - ``, if present, determines the interior of the path. Default value when omitted is `nonzero`. +The `{{cssxref("basic-shape/polygon","polygon()")}}` function defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of vertices. - The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes. +```plain +polygon( ? [ ]# ) +``` -- `{{cssxref("basic-shape/shape","shape()")}}` {{Experimental_Inline}} +Each `` pair in the list represents _xi_ and _yi_ - the x and y axis coordinates of the vertex of the polygon at position i. - - : Defines a shape using an initial starting point and a series of shape commands. +### Path - ```css - shape( ? from , # ) - ``` +The `{{cssxref("path","path()")}}` function defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). - ``, if present, determines the interior of the path. Default value when omitted is `nonzero`. +```plain +path( [ , ]? ) +``` - `from ` represents the starting point for the first shape command, and `` defines one one or more shape commands, which are similar to the [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). +The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes. -> **Note:** `` is not supported in the {{cssxref("offset-path")}} property. +### Shape {{Experimental_Inline}} -The arguments not defined above are defined as follows: +The `{{cssxref("basic-shape/shape","shape()")}}` function defines a shape using an initial starting point and a series of shape commands. -```css - = | - = | | closest-side | farthest-side +```plain +shape( ? from , # ) ``` -Defines a radius for a circle or ellipse. If omitted it defaults to `closest-side`. +The `from ` parameter represents the starting point for the first shape command, and `` defines one one or more shape commands, which are similar to the [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). -`closest-side` uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension. +## Description -`farthest-side` uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension. +When creating a shape, the reference box is defined by each property that uses `` values. The coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box. -## Description +The default reference box is the `margin-box`, as demonstrated in the below image which shows a circle created using `shape-outside: circle(50%)`. The shape is being defined with reference to the margin box. + +![An image showing a circle inspected with the Firefox DevTools Shape Inspector. The different parts of the box model are highlighted.](shapes-reference-box.png) ### Computed values of basic shapes diff --git a/files/en-us/web/css/basic-shape/path/index.md b/files/en-us/web/css/basic-shape/path/index.md index d5574baa3075e86..e6a49e926dfb77b 100644 --- a/files/en-us/web/css/basic-shape/path/index.md +++ b/files/en-us/web/css/basic-shape/path/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.path {{CSSRef}} -The **`path()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) accepts an SVG path string, and is used in [CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes) and CSS Motion Path to enable a shape to be drawn. +The **`path()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) accepts an SVG path string, and is used in [CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes) and CSS Motion Path to enable a shape to be drawn. The `path()` function is one of the {{cssxref("<basic-shape>")}} data types. {{EmbedInteractiveExample("pages/css/function-path.html")}} From 790596e8b81f0b8ca59b034007b83f1b2e77445e Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 10 May 2024 13:50:01 -0400 Subject: [PATCH 19/32] updates links to path() --- files/en-us/web/css/basic-shape/index.md | 16 ++++++++-------- files/en-us/web/css/basic-shape/shape/index.md | 2 +- files/en-us/web/css/offset-path/index.md | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index acbb48a5a2ee2e4..30d92cfe286dfc2 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -41,7 +41,7 @@ Parameters common across some basic shape functions include: ### Inset -The `{{cssxref("basic-shape/inset","inset()")}}` function defines an inset rectangle. +The {{cssxref("basic-shape/inset","inset()")}} function defines an inset rectangle. ```plain inset( {1,4} [ round <`border-radius`> ]? ) @@ -53,7 +53,7 @@ A pair of insets in either dimension that add up to more than the used dimension ### Rectangle by distance -The `{{cssxref("basic-shape/rect","rect()")}}` function defines a rectangle using the specified distances from the top and left edges of the reference box. +The {{cssxref("basic-shape/rect","rect()")}} function defines a rectangle using the specified distances from the top and left edges of the reference box. ```plain rect( [ | auto ]{4} [ round <`border-radius`> ]? ) @@ -63,7 +63,7 @@ You specify four values to create the rectangle. Each of the four values is eith ### Rectangle with dimensions -The `{{cssxref("basic-shape/xywh","xywh()")}}` function defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. +The {{cssxref("basic-shape/xywh","xywh()")}} function defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. ```plain xywh( {2} {2} [ round <`border-radius`> ]? ) @@ -71,7 +71,7 @@ xywh( {2} {2} [ round <`border-rad ### Circle -The `{{cssxref("basic-shape/circle","circle()")}}` function defines a circle using a radius and a position. +The {{cssxref("basic-shape/circle","circle()")}} function defines a circle using a radius and a position. ```plain circle( ? [ at ]? ) @@ -81,7 +81,7 @@ The `` argument represents _r_, the radius of the circle. A percen ### Ellipse -The `{{cssxref("basic-shape/ellipse","ellipse()")}}` function defines an ellipse using two radii and a position. +The {{cssxref("basic-shape/ellipse","ellipse()")}} function defines an ellipse using two radii and a position. ```plain ellipse( [ {2} ]? [ at ]? ) @@ -91,7 +91,7 @@ The `` arguments represent rx and ry, the x-axis and y-axis radii ### Polygon -The `{{cssxref("basic-shape/polygon","polygon()")}}` function defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of vertices. +The {{cssxref("basic-shape/polygon","polygon()")}} function defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of vertices. ```plain polygon( ? [ ]# ) @@ -101,7 +101,7 @@ Each `` pair in the list represents _xi_ and _yi_ - the x and ### Path -The `{{cssxref("path","path()")}}` function defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). +The {{cssxref("basic-shape/path","path()")}} function defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). ```plain path( [ , ]? ) @@ -111,7 +111,7 @@ The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string ### Shape {{Experimental_Inline}} -The `{{cssxref("basic-shape/shape","shape()")}}` function defines a shape using an initial starting point and a series of shape commands. +The {{cssxref("basic-shape/shape","shape()")}} function defines a shape using an initial starting point and a series of shape commands. ```plain shape( ? from , # ) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 21276f38fc56009..2c54138d39c1e19 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -110,7 +110,7 @@ clip-path: shape( ## Description -The `shape()` function allows you to define complex shapes. It is similar to the `{{cssxref("path","path()")}}` function in several ways: +The `shape()` function allows you to define complex shapes. It is similar to the {{cssxref("basic-shape/path","path()")}} function in several ways: - The `` parameter in the `shape()` function works exactly like the same parameter in the `path()` function. - The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/Web/SVG/Attribute/d#path_commands), such as [MoveTo](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands), [LineTo](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands), and [ClosePath](/en-US/docs/Web/SVG/Attribute/d#closepath). diff --git a/files/en-us/web/css/offset-path/index.md b/files/en-us/web/css/offset-path/index.md index af138a463a2baf6..6ac64360b933a79 100644 --- a/files/en-us/web/css/offset-path/index.md +++ b/files/en-us/web/css/offset-path/index.md @@ -74,7 +74,7 @@ The `offset-path` property takes as its value an `` value, a [`` is an `ellipse()` function, then the path is the outline of the ellipse, starting at the rightmost point of the ellipse, proceeding clockwise through a full rotation. For `ellipse()` and `circle()`, which accept the `at ` parameter, if the `` is omitted, the position defaults to `center` unless the element has an {{cssxref("offset-position")}} specified. In this case, the `offset-position` value is used for the `at ` parameter. More complex shapes can be defined using the {{cssxref("basic-shape/shape","shape()")}} function. + - : Specifies the offset path as the equivalent path of a {{cssxref("basic-shape", "CSS basic shape function")}}, such as {{cssxref("basic-shape/circle","circle()")}}, {{cssxref("basic-shape/ellipse","ellipse()")}}, {{cssxref("basic-shape/inset","inset()")}}, {{cssxref("basic-shape/path","path()")}}, {{cssxref("basic-shape/polygon","polygon()")}}, {{cssxref("basic-shape/rect","rect()")}}, or {{cssxref("basic-shape/xywh","xywh()")}}. For example, if the `` is an `ellipse()` function, then the path is the outline of the ellipse, starting at the rightmost point of the ellipse, proceeding clockwise through a full rotation. For `ellipse()` and `circle()`, which accept the `at ` parameter, if the `` is omitted, the position defaults to `center` unless the element has an {{cssxref("offset-position")}} specified. In this case, the `offset-position` value is used for the `at ` parameter. More complex shapes can be defined using the {{cssxref("basic-shape/shape","shape()")}} function. - [``](/en-US/docs/Web/CSS/box-edge#values) @@ -296,7 +296,7 @@ The SVG rectangle that defines the path shape is shown here only to visually dem - {{cssxref("offset-distance")}} - {{cssxref("offset-rotate")}} - [SVG \](/en-US/docs/Web/SVG/Tutorial/Paths) -- {{cssxref("path","path()")}} +- {{cssxref("basic-shape/path","path()")}} - Other demos: - [Examples using various shapes values](https://codepen.io/team/css-tricks/pen/WZdKMq) on Codepen by CSS-Tricks - [Moving a triangle along a curved path](https://codepen.io/ericwilligers/pen/jMbJPp) on Codepen by Eric Willigers From 830b59c200bbfb56d489bf3b143bc7e520925677 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 10 May 2024 13:54:46 -0400 Subject: [PATCH 20/32] missed this file in previous round --- files/en-us/web/css/clip-path/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/clip-path/index.md b/files/en-us/web/css/clip-path/index.md index f663667795d45eb..b2a8920390e6493 100644 --- a/files/en-us/web/css/clip-path/index.md +++ b/files/en-us/web/css/clip-path/index.md @@ -69,11 +69,11 @@ The `clip-path` property is specified as one or a combination of the values list - : Defines an ellipse using two radii and a position. - {{cssxref("basic-shape/polygon","polygon()")}} - : Defines a polygon using an SVG filling rule and a set of vertices. - - {{cssxref("path","path()")}} + - {{cssxref("basic-shape/path","path()")}} - : Defines a shape using an optional SVG filling rule and an SVG path definition. - {{cssxref("basic-shape/rect","rect()")}} - : Defines a rectangle using the specified distances from the edges of the reference box. - - {{cssxref("basic-shape","shape()")}} {{Experimental_Inline}} + - {{cssxref("basic-shape/shape","shape()")}} {{Experimental_Inline}} - : Defines a shape using an optional SVG filling rule and shape commands for lines, curves, and arcs. - {{cssxref("basic-shape/xywh","xywh()")}} - : Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. From 0e6e95c8be21c44cbe1c8c544c874ded3fa67ff4 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Sun, 12 May 2024 21:06:54 -0400 Subject: [PATCH 21/32] fixes review feedback --- files/en-us/web/css/basic-shape/index.md | 38 +++++++++---------- files/en-us/web/css/basic-shape/path/index.md | 2 +- files/en-us/web/css/basic-shape/rect/index.md | 4 +- files/en-us/web/css/basic-shape/xywh/index.md | 4 +- 4 files changed, 24 insertions(+), 24 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 30d92cfe286dfc2..6a839da235994cf 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -13,35 +13,35 @@ The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/C ## Syntax -The `` data type is defined using one of the basic shape functions described in the sections below. All `` values use functional notation and are defined using the [value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax). +The `` data type is used to create basic shapes including [rectangles by container insets](#syntax_for_rectangles_by_container_insets), [rectangles by distance](#syntax_for_rectangles_by_distance), [rectangles with dimensions](#syntax_for_rectangles_with_dimensions), [circles](#syntax_for_circles), [ellipses](#syntax_for_ellipses), [polygons](#syntax_for_polygons), [paths](#syntax_for_paths), and [shapes](#syntax_for_shapes_experimental). These basic shapes are defined using one of the basic shape functions. All `` values are CSS functions, with each value requiring a parameter that follows the shape's function-specific syntax. -Parameters common across some basic shape functions include: +### Common parameters + +The parameters common across the syntax of some basic shape functions include: - `round <'border-radius'>` - - : Defines rounded corners for the inset rectangle using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. This parameter is specified in the `inset()`, `rect()`, and `xywh()` functions. + - : Defines rounded corners for [rectangles by container insets](#syntax_for_rectangles_by_container_insets), [rectangles by distance](#syntax_for_rectangles_by_distance), and [rectangles with dimensions](#syntax_for_rectangles_with_dimensions) using the same syntax as the CSS [`border-radius`](/en-US/docs/Web/CSS/border-radius) shorthand property. - `` - - : Defines the radius for a circle or an ellipse. The valid values include ``, ``, `closest-side` and `farthest-side`. Negative values are invalid. It defaults to `closest-side` if omitted. - - `closest-side` uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension. + - : Defines the radius for a [circle](#syntax_for_circles) or an [ellipse](#syntax_for_ellipses). Valid values include {{cssxref("length")}}, {{cssxref("percentage")}}, `closest-side` (the default), and `farthest-side`. Negative values are invalid. - `farthest-side` uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension. + The `closest-side` keyword value uses the length from the center of the shape to the closest side of the reference box to create the radius length. The `farthest-side` keyword value uses the length from the center of the shape to the farthest side of the reference box. - `` - - : Defines the center of the shape. It defaults to center of the shape if omitted. This parameter is specified in the `circle()` and `ellipse()` functions. + - : Defines the center [``](/en-US/docs/Web/CSS/position_value) of a [circle](#syntax_for_circles) or an [ellipse](#syntax_for_ellipses). It defaults to `center` if omitted. - `` - - : Represents the {{SVGAttr("fill-rule")}} used to determine the interior of the shape. Possible values are `nonzero` and `evenodd`. Default value when omitted is `nonzero`. This parameter is specified in the `polygon()`, `path()`, and `shape()` functions. + - : Sets the {{SVGAttr("fill-rule")}} that is used to determine how the interior of the shape defined by the basic shapes [polygon](#syntax_for_polygons), [path](#syntax_for_paths), and [shape](#syntax_for_shapes_experimental) is to be filled. Possible values are `nonzero` (the default) and `evenodd`. > **Note:** `` is not supported in the {{cssxref("offset-path")}} property. -### Inset +### Syntax for rectangles by container insets -The {{cssxref("basic-shape/inset","inset()")}} function defines an inset rectangle. +The {{cssxref("basic-shape/inset","inset()")}} function defines an inset rectangle with its size defined by the offset distance of each side from its container and, optionally, rounded corners. ```plain inset( {1,4} [ round <`border-radius`> ]? ) @@ -51,7 +51,7 @@ When all of the first four arguments are supplied, they represent the top, right A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. -### Rectangle by distance +### Syntax for rectangles by distance The {{cssxref("basic-shape/rect","rect()")}} function defines a rectangle using the specified distances from the top and left edges of the reference box. @@ -59,9 +59,9 @@ The {{cssxref("basic-shape/rect","rect()")}} function defines a rectangle using rect( [ | auto ]{4} [ round <`border-radius`> ]? ) ``` -You specify four values to create the rectangle. Each of the four values is either a ``, a ``, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. +You specify four values to create the rectangle. Each of the four values is either a {{cssxref("length")}}, a {{cssxref("percentage")}}, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. -### Rectangle with dimensions +### Syntax for rectangles with dimensions The {{cssxref("basic-shape/xywh","xywh()")}} function defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. @@ -69,7 +69,7 @@ The {{cssxref("basic-shape/xywh","xywh()")}} function defines a rectangle using xywh( {2} {2} [ round <`border-radius`> ]? ) ``` -### Circle +### Syntax for circles The {{cssxref("basic-shape/circle","circle()")}} function defines a circle using a radius and a position. @@ -79,7 +79,7 @@ circle( ? [ at ]? ) The `` argument represents _r_, the radius of the circle. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. -### Ellipse +### Syntax for ellipses The {{cssxref("basic-shape/ellipse","ellipse()")}} function defines an ellipse using two radii and a position. @@ -89,7 +89,7 @@ ellipse( [ {2} ]? [ at ]? ) The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. -### Polygon +### Syntax for polygons The {{cssxref("basic-shape/polygon","polygon()")}} function defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of vertices. @@ -99,7 +99,7 @@ polygon( ? [ ]# ) Each `` pair in the list represents _xi_ and _yi_ - the x and y axis coordinates of the vertex of the polygon at position i. -### Path +### Syntax for paths The {{cssxref("basic-shape/path","path()")}} function defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). @@ -109,7 +109,7 @@ path( [ , ]? ) The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes. -### Shape {{Experimental_Inline}} +### Syntax for shapes {{Experimental_Inline}} The {{cssxref("basic-shape/shape","shape()")}} function defines a shape using an initial starting point and a series of shape commands. diff --git a/files/en-us/web/css/basic-shape/path/index.md b/files/en-us/web/css/basic-shape/path/index.md index e6a49e926dfb77b..9bfddafafda9a85 100644 --- a/files/en-us/web/css/basic-shape/path/index.md +++ b/files/en-us/web/css/basic-shape/path/index.md @@ -29,7 +29,7 @@ path( [,]? ) - [``](/en-US/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}} - - : An optional value of [`nonzero`](/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero) (the default when omitted) or [`evenodd`](/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd), which specifies the filling rule. + - : An optional value of [`nonzero`](/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero) (the default when omitted) or [`evenodd`](/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd), which defines how the inside of the shape to be filled is determined. > **Note:** `` is not supported in the {{cssxref("offset-path")}} property. - {{cssxref("string")}} diff --git a/files/en-us/web/css/basic-shape/rect/index.md b/files/en-us/web/css/basic-shape/rect/index.md index e6475e32e51d4d6..be5c80d177cb892 100644 --- a/files/en-us/web/css/basic-shape/rect/index.md +++ b/files/en-us/web/css/basic-shape/rect/index.md @@ -111,8 +111,8 @@ In this example, the {{cssxref("offset-path")}} property uses the `rect()` funct ## See also -- [`inset()`](/en-US/docs/Web/CSS/basic-shape#inset) function -- [`xywh()`](/en-US/docs/Web/CSS/basic-shape#xywh) function +- {{cssxref("basic-shape/inset","inset()")}} function +- {{cssxref("basic-shape/xywh","xywh()")}} function - {{cssxref("clip-path")}} property - {{cssxref("offset-path")}} property - {{cssxref("<basic-shape>")}} data type diff --git a/files/en-us/web/css/basic-shape/xywh/index.md b/files/en-us/web/css/basic-shape/xywh/index.md index bf565774e0c44d0..c380a4e21e278a5 100644 --- a/files/en-us/web/css/basic-shape/xywh/index.md +++ b/files/en-us/web/css/basic-shape/xywh/index.md @@ -96,8 +96,8 @@ In the example below, the {{cssxref("offset-path")}} property uses the `xywh()` ## See also -- [`inset()`](/en-US/docs/Web/CSS/basic-shape#inset) function -- [`rect()`](/en-US/docs/Web/CSS/basic-shape#rect) function +- {{cssxref("basic-shape/inset","inset()")}} function +- {{cssxref("basic-shape/rect","rect()")}} function - {{cssxref("clip-path")}} property - {{cssxref("offset-path")}} property - {{cssxref("<basic-shape>")}} data type From 31ea65ff882632d8f058f5db64916b9775d3a8ca Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Sun, 12 May 2024 21:29:46 -0400 Subject: [PATCH 22/32] fixes review feedback in basic-shape/path --- files/en-us/web/css/basic-shape/path/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/basic-shape/path/index.md b/files/en-us/web/css/basic-shape/path/index.md index 9bfddafafda9a85..3e99d5aac6517f8 100644 --- a/files/en-us/web/css/basic-shape/path/index.md +++ b/files/en-us/web/css/basic-shape/path/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.path {{CSSRef}} -The **`path()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) accepts an SVG path string, and is used in [CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes) and CSS Motion Path to enable a shape to be drawn. The `path()` function is one of the {{cssxref("<basic-shape>")}} data types. +The **`path()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) accepts an [SVG path](/en-US/docs/Web/SVG/Element/path) string, and is used in the [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) and [CSS motion path](/en-US/docs/Web/CSS/CSS_motion_path) modules to enable a shape to be drawn. The `path()` function is a {{cssxref("<basic-shape>")}} data type value. It can be used in the CSS [`offset-path`](/en-US/docs/Web/CSS/offset-path) and [`clip-path`](/en-US/docs/Web/CSS/clip-path) properties and in the SVG [`d`](/en-US/docs/Web/SVG/Attribute/d) attribute. {{EmbedInteractiveExample("pages/css/function-path.html")}} From 9b20662ccb32688d949e884e79b36ec1dc11c43b Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 13 May 2024 11:41:04 -0400 Subject: [PATCH 23/32] updates the note text for --- files/en-us/web/css/basic-shape/index.md | 2 +- files/en-us/web/css/basic-shape/path/index.md | 2 +- files/en-us/web/css/basic-shape/shape/index.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 6a839da235994cf..65de9376e3c7480 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -37,7 +37,7 @@ The parameters common across the syntax of some basic shape functions include: - : Sets the {{SVGAttr("fill-rule")}} that is used to determine how the interior of the shape defined by the basic shapes [polygon](#syntax_for_polygons), [path](#syntax_for_paths), and [shape](#syntax_for_shapes_experimental) is to be filled. Possible values are `nonzero` (the default) and `evenodd`. - > **Note:** `` is not supported in the {{cssxref("offset-path")}} property. + > **Note:** `` is not supported in {{cssxref("offset-path")}} and using it invalidates the property. ### Syntax for rectangles by container insets diff --git a/files/en-us/web/css/basic-shape/path/index.md b/files/en-us/web/css/basic-shape/path/index.md index 3e99d5aac6517f8..a29364e7387a198 100644 --- a/files/en-us/web/css/basic-shape/path/index.md +++ b/files/en-us/web/css/basic-shape/path/index.md @@ -30,7 +30,7 @@ path( [,]? ) - [``](/en-US/docs/Web/SVG/Attribute/fill-rule) {{optional_inline}} - : An optional value of [`nonzero`](/en-US/docs/Web/SVG/Attribute/fill-rule#nonzero) (the default when omitted) or [`evenodd`](/en-US/docs/Web/SVG/Attribute/fill-rule#evenodd), which defines how the inside of the shape to be filled is determined. - > **Note:** `` is not supported in the {{cssxref("offset-path")}} property. + > **Note:** `` is not supported in {{cssxref("offset-path")}} and using it invalidates the property. - {{cssxref("string")}} - : A [data string](/en-US/docs/Web/SVG/Attribute/d) for defining an [SVG path](/en-US/docs/Web/SVG/Element/path). The syntax for the contents of this `` is identical to SVG. diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 2c54138d39c1e19..04fe7587780deda 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -62,7 +62,7 @@ clip-path: shape( - `evenodd`: A point is considered inside the shape if a ray drawn from the point crosses an odd number of path segments. - > **Note:** `` is not supported in the {{cssxref("offset-path")}} property. + > **Note:** `` is not supported in {{cssxref("offset-path")}} and using it invalidates the property. - `from ` From ab861b5b93403ea736c44032d6e89a391ea1e212 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 13 May 2024 20:45:50 -0400 Subject: [PATCH 24/32] Apply suggestions from code review Co-authored-by: Estelle Weyl --- files/en-us/web/css/basic-shape/index.md | 20 +++++++++---------- .../en-us/web/css/basic-shape/shape/index.md | 12 +++++------ 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 65de9376e3c7480..0c38467dd60e30c 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -13,7 +13,7 @@ The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/C ## Syntax -The `` data type is used to create basic shapes including [rectangles by container insets](#syntax_for_rectangles_by_container_insets), [rectangles by distance](#syntax_for_rectangles_by_distance), [rectangles with dimensions](#syntax_for_rectangles_with_dimensions), [circles](#syntax_for_circles), [ellipses](#syntax_for_ellipses), [polygons](#syntax_for_polygons), [paths](#syntax_for_paths), and [shapes](#syntax_for_shapes_experimental). These basic shapes are defined using one of the basic shape functions. All `` values are CSS functions, with each value requiring a parameter that follows the shape's function-specific syntax. +The `` data type is used to create basic shapes including rectangles by [container inset](#syntax_for_rectangles_by_container_insets), by [coordinate distance](#syntax_for_rectangles_by_distance), or by [set dimensions](#syntax_for_rectangles_with_dimensions), [circles](#syntax_for_circles), [ellipses](#syntax_for_ellipses), [polygons](#syntax_for_polygons), [paths](#syntax_for_paths), and [author created shapes](#syntax_for_shapes_experimental). These basic shapes are defined using one `` CSS functions, with each value requiring a parameter that follows the shape's function-specific syntax. ### Common parameters @@ -41,7 +41,7 @@ The parameters common across the syntax of some basic shape functions include: ### Syntax for rectangles by container insets -The {{cssxref("basic-shape/inset","inset()")}} function defines an inset rectangle with its size defined by the offset distance of each side from its container and, optionally, rounded corners. +The {{cssxref("basic-shape/inset","inset()")}} function creates an inset rectangle, with its size defined by the offset distance of each of the four sides of its container and, optionally, rounded corners. ```plain inset( {1,4} [ round <`border-radius`> ]? ) @@ -49,21 +49,21 @@ inset( {1,4} [ round <`border-radius`> ]? ) When all of the first four arguments are supplied, they represent the top, right, bottom and left offsets from the reference box inward that define the position of the edges of the inset rectangle. These arguments follow the syntax of the {{cssxref("margin")}} shorthand, which lets you set all four insets with one, two, three, or four values. -A pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. For this specification, this results in an empty float area. +If a pair of insets for a dimension adds up to more than 100% of that dimension, both values are proportionally reduced so their sum equals 100%. For example, the value `inset(90% 10% 60% 10%)` has a top inset of `90%` and a bottom inset of `60%`. These values are reduced proportionally to `inset(60% 10% 40% 10%)`. Shapes such as this, that enclose no area and have no {{cssxref("shape-margin")}}, have no effect on wrapping ### Syntax for rectangles by distance -The {{cssxref("basic-shape/rect","rect()")}} function defines a rectangle using the specified distances from the top and left edges of the reference box. +The {{cssxref("basic-shape/rect","rect()")}} function defines a rectangle using the specified distances from the top and left edges of the reference box, with optional rounded corners. ```plain rect( [ | auto ]{4} [ round <`border-radius`> ]? ) ``` -You specify four values to create the rectangle. Each of the four values is either a {{cssxref("length")}}, a {{cssxref("percentage")}}, or the keyword `auto`. When using the `rect()` function, you do not define the width and height of the rectangle. The rectangle's dimensions depend on the size of the reference box and the offset values. +When using the `rect()` function, you do not define the width and height of the rectangle. Instead, you specify four values to create the rectangle, with its dimensions determined by the size of the reference box and the four offset values. Each value can be either a {{cssxref("length")}}, a {{cssxref("percentage")}}, or the keyword `auto`. The `auto` keyword is interpreted as `0%` for the top and left values and as `100%` for the bottom and right values. ### Syntax for rectangles with dimensions -The {{cssxref("basic-shape/xywh","xywh()")}} function defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle. +The {{cssxref("basic-shape/xywh","xywh()")}} function defines a rectangle located at the specified distances from the left (`x`) and top (`y`) edges of the reference box and sized by the specified width (`w`) and height (`h`) of the rectangle, in that order, with optional rounded corners. ```plain xywh( {2} {2} [ round <`border-radius`> ]? ) @@ -87,11 +87,11 @@ The {{cssxref("basic-shape/ellipse","ellipse()")}} function defines an ellipse u ellipse( [ {2} ]? [ at ]? ) ``` -The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. +The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. If only one radius value is provided, the `ellipse()` shape function is invalid. If no value is provided, `50% 50%` is used. ### Syntax for polygons -The {{cssxref("basic-shape/polygon","polygon()")}} function defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of vertices. +The {{cssxref("basic-shape/polygon","polygon()")}} function defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of coordinates. ```plain polygon( ? [ ]# ) @@ -107,7 +107,7 @@ The {{cssxref("basic-shape/path","path()")}} function defines a shape using an S path( [ , ]? ) ``` -The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) string encompassed in quotes. +The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) as a quoted string. ### Syntax for shapes {{Experimental_Inline}} @@ -121,7 +121,7 @@ The `from ` parameter represents the starting point for the fir ## Description -When creating a shape, the reference box is defined by each property that uses `` values. The coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box. +When creating a shape, the reference box is defined by the element that uses `` values. The coordinate system for the shape has its origin at the top-left corner of the element's margin box by default, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the dimensions of the reference box. The default reference box is the `margin-box`, as demonstrated in the below image which shows a circle created using `shape-outside: circle(50%)`. The shape is being defined with reference to the margin box. diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 04fe7587780deda..a517e4ccad291fa 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -13,7 +13,7 @@ The **`shape()`** [CSS function](/en-US/docs/Web/CSS/CSS_Functions) is used to d ```css /* */ -clip-path: shape(nonzero from 0px 0px, line to 10px 10px); +clip-path: shape(nonzero from 0 0, line to 10px 10px); /* , , and close */ offset-path: shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close); @@ -82,15 +82,15 @@ clip-path: shape( The following ``s can be specified: - - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands) to the list of shape commands. It does not draw a shape; rather it specifies the position for the next command. The `by`or `to` keyword specify whether the `` point is "relative" or "absolute", respectively. + - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands) to the list of shape commands. It draws nothing. Rather, it specifies the starting position for the next command. The `by`or `to` keyword specify whether the `` point is "relative" or "absolute", respectively. If the `` follows the `close` command, it identifies the starting point of the next shape or subpath. - ``: Specified as `line [by | to] `. This command adds a [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The `by`or `to` keyword specify whether the ending point specified by `` is "relative" or "absolute", respectively. - - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a horizontal or vertical line from the command's starting point to its ending point. The `by`or `to` keyword determine the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with `` providing the horizontal or vertical component. + - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. With `hline`, a horizontal line is drawn from the command's starting point `to` or `by` the `x` position defined by ``. With `vline`, a vertical line is drawn from the command's starting point `to` or `by` the `y` position defined by ``. The `by` or `to` keyword determines the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with one coordinate value remaining unchanged from its starting command. - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword specifies the control points of the curve as one or two `` values. If a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_bézier_curve); if two ``s are provided, the command draws a cubic Bézier curve. + The `via` keyword specifies the control points of the cubic Bézier curve as one or two `` values. If only a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_bézier_curve). - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. @@ -98,7 +98,7 @@ clip-path: shape( - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs. The `of` keyword specifies the size of the ellipse fom which the arc is taken. The first `` provides the horizontal radius of the ellipse, and the second provides the vertical radius. If only one `` is provided, the same value is used for both the radii. The following parameters help to choose from a possibility of four arcs: + The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs depending on the arc size, direction, and angle. The `of` keyword specifies the size of the ellipse from which the arc is taken. The first `` provides the horizontal radius of the ellipse, and the second provides the vertical radius. If only one `` is provided, the same value is used for both radii. The following parameters help to determine which of the four arcs are used: - ``: Indicates whether the desired arc is the one traced around the ellipse clockwise (`cw`) or counter-clockwise (`ccw`). If omitted, this defaults to `ccw`. - ``: Indicates whether the desired arc is the larger (`large`) or smaller (`small`) of the two arcs. If omitted, this defaults to `small`. @@ -106,7 +106,7 @@ clip-path: shape( > **Note:** If the starting and ending points of the arc lie on exactly opposite sides of the ellipse, there is only one possible ellipse and two possible arcs. In this case, `` specifies the arc to choose, and `` has no effect. - - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath) to the list of shape commands. + - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath) to the list of shape commands, drawing a straight line from the current position (end of the last command) to the first point in the path defined in the `from ` parameter. To close the shape without drawing a line, use `` with the originating coordinates. If the `close` command is immediately followed by a ``, it defines the starting point of the next shape or subpath. ## Description From 5bd9feff5b0d3021108c38fe3ac99721b991c86b Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 13 May 2024 20:47:55 -0400 Subject: [PATCH 25/32] Apply suggestions from linter Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/basic-shape/shape/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index a517e4ccad291fa..ba4beba004326ec 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -82,11 +82,11 @@ clip-path: shape( The following ``s can be specified: - - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands) to the list of shape commands. It draws nothing. Rather, it specifies the starting position for the next command. The `by`or `to` keyword specify whether the `` point is "relative" or "absolute", respectively. If the `` follows the `close` command, it identifies the starting point of the next shape or subpath. + - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands) to the list of shape commands. It draws nothing. Rather, it specifies the starting position for the next command. The `by`or `to` keyword specify whether the `` point is "relative" or "absolute", respectively. If the `` follows the `close` command, it identifies the starting point of the next shape or subpath. - ``: Specified as `line [by | to] `. This command adds a [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The `by`or `to` keyword specify whether the ending point specified by `` is "relative" or "absolute", respectively. - - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. With `hline`, a horizontal line is drawn from the command's starting point `to` or `by` the `x` position defined by ``. With `vline`, a vertical line is drawn from the command's starting point `to` or `by` the `y` position defined by ``. The `by` or `to` keyword determines the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with one coordinate value remaining unchanged from its starting command. + - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. With `hline`, a horizontal line is drawn from the command's starting point `to` or `by` the `x` position defined by ``. With `vline`, a vertical line is drawn from the command's starting point `to` or `by` the `y` position defined by ``. The `by` or `to` keyword determines the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with one coordinate value remaining unchanged from its starting command. - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. From bd9dfdc26b3178272996bcf78e14d4d5832c0b1b Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 13 May 2024 20:49:39 -0400 Subject: [PATCH 26/32] Apply suggestions from linter Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/basic-shape/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 0c38467dd60e30c..66ac52d632d3419 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -59,7 +59,7 @@ The {{cssxref("basic-shape/rect","rect()")}} function defines a rectangle using rect( [ | auto ]{4} [ round <`border-radius`> ]? ) ``` -When using the `rect()` function, you do not define the width and height of the rectangle. Instead, you specify four values to create the rectangle, with its dimensions determined by the size of the reference box and the four offset values. Each value can be either a {{cssxref("length")}}, a {{cssxref("percentage")}}, or the keyword `auto`. The `auto` keyword is interpreted as `0%` for the top and left values and as `100%` for the bottom and right values. +When using the `rect()` function, you do not define the width and height of the rectangle. Instead, you specify four values to create the rectangle, with its dimensions determined by the size of the reference box and the four offset values. Each value can be either a {{cssxref("length")}}, a {{cssxref("percentage")}}, or the keyword `auto`. The `auto` keyword is interpreted as `0%` for the top and left values and as `100%` for the bottom and right values. ### Syntax for rectangles with dimensions From 97dec8de655e256709b332c7840abc6ab36e3a8a Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 14 May 2024 13:28:49 -0400 Subject: [PATCH 27/32] fixes shape and basic-shape feedback --- files/en-us/web/css/basic-shape/index.md | 18 +++++++++--------- files/en-us/web/css/basic-shape/shape/index.md | 8 ++++---- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 66ac52d632d3419..22e2a949b169c15 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -77,7 +77,7 @@ The {{cssxref("basic-shape/circle","circle()")}} function defines a circle using circle( ? [ at ]? ) ``` -The `` argument represents _r_, the radius of the circle. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. +The `` argument represents the radius of the circle defined as either a {{cssxref("length")}} or a {{cssxref("percentage")}}. A percentage value here is resolved from the used width and height of the reference box as `sqrt(width^2+height^2)/sqrt(2)`. If omitted, the radius is defined by `closest-side`. ### Syntax for ellipses @@ -87,24 +87,24 @@ The {{cssxref("basic-shape/ellipse","ellipse()")}} function defines an ellipse u ellipse( [ {2} ]? [ at ]? ) ``` -The `` arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. If only one radius value is provided, the `ellipse()` shape function is invalid. If no value is provided, `50% 50%` is used. +The `` arguments represent _rx_ and _ry_, the x-axis and y-axis radii of the ellipse, in that order. These values are specified as either a {{cssxref("length")}} or a {{cssxref("percentage")}}. Percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box. If only one radius value is provided, the `ellipse()` shape function is invalid. If no value is provided, `50% 50%` is used. ### Syntax for polygons The {{cssxref("basic-shape/polygon","polygon()")}} function defines a polygon using an SVG {{SVGAttr("fill-rule")}} and a set of coordinates. ```plain -polygon( ? [ ]# ) +polygon( <`fill-rule`>?, [ ]# ) ``` -Each `` pair in the list represents _xi_ and _yi_ - the x and y axis coordinates of the vertex of the polygon at position i. +The function takes a list of comma-separated coordinate pairs, each consisting of two space-separated `` values as the _xi_ and _yi_ pair. These values represents the x and y axis coordinates of the vertex of the polygon at position _i_. ### Syntax for paths The {{cssxref("basic-shape/path","path()")}} function defines a shape using an SVG {{SVGAttr("fill-rule")}} and an SVG [path definition](/en-US/docs/Web/SVG/Attribute/d). ```plain -path( [ , ]? ) +path( <`fill-rule`>?, ]? ) ``` The required `` is an [SVG Path](/en-US/docs/Web/SVG/Attribute/d) as a quoted string. @@ -123,7 +123,7 @@ The `from ` parameter represents the starting point for the fir When creating a shape, the reference box is defined by the element that uses `` values. The coordinate system for the shape has its origin at the top-left corner of the element's margin box by default, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the dimensions of the reference box. -The default reference box is the `margin-box`, as demonstrated in the below image which shows a circle created using `shape-outside: circle(50%)`. The shape is being defined with reference to the margin box. +The default reference box is the [`margin-box`](/en-US/docs/Web/CSS/box-edge#margin-box), as demonstrated in the image below. The image shows a circle created using `shape-outside: circle(50%)` and inspected using a browser's Developer Tools, highlighting the different parts of the box model. The shape here is defined with reference to the margin-box. ![An image showing a circle inspected with the Firefox DevTools Shape Inspector. The different parts of the box model are highlighted.](shapes-reference-box.png) @@ -137,13 +137,13 @@ The values in a `` function are computed as specified, with these e ### Interpolation of basic shapes -When animating from one `` to another, the {{Glossary("interpolation")}} rules listed below are followed. For any interpolation to happen between two shapes, both must use the same reference box. The values between two `` functions interpolate based on their computed values, forming a simple list. The list values are interpolated as {{cssxref("<number>")}}, {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, {{cssxref("<angle>")}}, or {{cssxref("calc", "calc()")}} where possible. If the list values are not one of those types but are identical (such as `nonzero` in the same position in both `basic-shape` functions), those values also interpolate. +When animating from one `` to another, the {{Glossary("interpolation")}} rules listed below are followed. For any interpolation to happen between two shapes, both must use the same reference box. The values between two `` functions interpolate based on their computed values, forming a list. The values in the list are interpolated as {{cssxref("<number>")}}, {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, {{cssxref("<angle>")}}, or {{cssxref("calc", "calc()")}} where possible. If the values are not one of those data types but are identical between the two interpolating basic shape functions, such as `nonzero`, those values also interpolate. -- **Both shapes are of type `ellipse()` or type `circle()`**: Interpolation is applied between each corresponding value if their radii are specified as {{cssxref("<length-percentage>")}} (rather than keywords such as `closest-side` or `farthest-side`). +- **Both shapes are of type `ellipse()` or type `circle()`**: Interpolation is applied between each corresponding value if their radii are specified as either a {{cssxref("length")}} or a {{cssxref("percentage")}} (rather than keywords such as `closest-side` or `farthest-side`). - **Both shapes are of type `inset()`**: Interpolation is applied between each corresponding value. -- **Both shapes are of type `polygon()`**: Interpolation is applied between each corresponding value, including the vertices (specified as x/y coordinate pairs), if they have the same number of vertices and use the same ``. +- **Both shapes are of type `polygon()`**: Interpolation is applied between each corresponding value if they use the same `` and have the same number of comma-separated coordinate pairs. - **Both shapes are of type `path()`**: Interpolation is applied to each parameter as a {{cssxref("<number>")}} if the path strings in both the shapes match the number, type, and sequence of [path data commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index ba4beba004326ec..14fe81cc0a89727 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -60,13 +60,13 @@ clip-path: shape( - `nonzero`: A point is considered inside the shape if a ray drawn from the point crosses more left-to-right than right-to-left path segments, resulting in a non-zero count. This is the default value when `` is omitted. - - `evenodd`: A point is considered inside the shape if a ray drawn from the point crosses an odd number of path segments. + - `evenodd`: A point is considered inside the shape if a ray drawn from the point crosses an odd number of path segments. This means that for each time the ray enters the shape, it has not exited an equal number of times, indicating an odd count of entries without corresponding exits. > **Note:** `` is not supported in {{cssxref("offset-path")}} and using it invalidates the property. - `from ` - - : Defines the starting point for the first `` as a pair of coordinates that are measured from the top-left corner of the reference box. The coordinates are specified as a {{cssxref("<length-percentage>")}} value. Add a comma after this parameter. + - : Defines the starting point for the first `` as a pair of coordinates that are measured from the top-left corner of the [reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box). The coordinates are specified as space-separated ` ` {{cssxref("<length-percentage>")}} values representing the left offset and top offset, respectively. Percentage values are relative to the width and height of the element's reference box, respectively. Add a comma after this parameter. - `` @@ -117,8 +117,8 @@ The `shape()` function allows you to define complex shapes. It is similar to the However, `shape()` offers several advantages over using `path()`: -- Unlike `path()`, which uses the [SVG path](/en-US/docs/Web/SVG/Element/path) syntax, `shape()` uses standard CSS syntax, making it easier to create and modify shapes directly in your stylesheet. -- The `path()` function inherits some limitations from SVG, such as requiring shapes to be written as a single string and limiting units to `px`. The `shape()` function, on the other hand, supports a variety of CSS units, including percentages, `rem`, and `em`. +- `shape()` uses standard CSS syntax, making it easier to create and modify shapes directly in your stylesheet. In comparison, `path()` uses the [SVG path](/en-US/docs/Web/SVG/Element/path) syntax, which is less intuitive for those not familiar with SVG. +- `shape()` supports a variety of CSS units, including percentages, `rem`, and `em`. `path()`, on the other hand, defines shapes as a single string and limits units to `px`. - `shape()` also allows the use of CSS math functions, providing more versatility when defining shapes. ## Formal syntax From 12ce9229fe3d1002d231797843b1a3ece1981ab7 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 14 May 2024 13:30:00 -0400 Subject: [PATCH 28/32] element -> property --- files/en-us/web/css/basic-shape/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 22e2a949b169c15..ce6d383f4766a94 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -121,7 +121,7 @@ The `from ` parameter represents the starting point for the fir ## Description -When creating a shape, the reference box is defined by the element that uses `` values. The coordinate system for the shape has its origin at the top-left corner of the element's margin box by default, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the dimensions of the reference box. +When creating a shape, the reference box is defined by the property that uses `` values. The coordinate system for the shape has its origin at the top-left corner of the element's margin box by default, with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the dimensions of the reference box. The default reference box is the [`margin-box`](/en-US/docs/Web/CSS/box-edge#margin-box), as demonstrated in the image below. The image shows a circle created using `shape-outside: circle(50%)` and inspected using a browser's Developer Tools, highlighting the different parts of the box model. The shape here is defined with reference to the margin-box. From 120c7f6ffd3b1901a24e1ecb846910bd570fd525 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 17 May 2024 11:19:21 -0400 Subject: [PATCH 29/32] Apply suggestions from code review Co-authored-by: Estelle Weyl --- .../en-us/web/css/basic-shape/shape/index.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 14fe81cc0a89727..3797dda0d0ac67f 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -60,45 +60,45 @@ clip-path: shape( - `nonzero`: A point is considered inside the shape if a ray drawn from the point crosses more left-to-right than right-to-left path segments, resulting in a non-zero count. This is the default value when `` is omitted. - - `evenodd`: A point is considered inside the shape if a ray drawn from the point crosses an odd number of path segments. This means that for each time the ray enters the shape, it has not exited an equal number of times, indicating an odd count of entries without corresponding exits. + - `evenodd`: A point is considered to be inside the shape if a ray drawn from the point crosses an odd number of path segments. This means that for each time the ray enters the shape, it has not exited an equal number of times, indicating an odd count of entries without corresponding exits. > **Note:** `` is not supported in {{cssxref("offset-path")}} and using it invalidates the property. - `from ` - - : Defines the starting point for the first `` as a pair of coordinates that are measured from the top-left corner of the [reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box). The coordinates are specified as space-separated ` ` {{cssxref("<length-percentage>")}} values representing the left offset and top offset, respectively. Percentage values are relative to the width and height of the element's reference box, respectively. Add a comma after this parameter. + - : Defines the starting point of the first `` as a pair of coordinates that are measured from the top-left corner of the [reference box](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes#the_reference_box). The coordinates are specified as space-separated ` ` {{cssxref("<length-percentage>")}} values representing the left offset and top offset, respectively. Percentage values are relative to the width and height of the element's reference box, respectively. Add a comma after this parameter. - `` - - : Specifies one or a list of comma-seperated commands that define the shape, using syntax similar to [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). The commands to define a shape include ``, ``, ``, ``, ``, ``, and `close`. Each command's starting point is the previous command's ending point; the starting point of the shape is defined by the [`from `](#from_coordinate-pair) parameter. + - : Specifies a list of one or more comma-separated commands that define the shape, using syntax similar to [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). Commands include ``, ``, ``, ``, ``, ``, and `close`. Each command's starting point is the previous command's ending point; the starting point of the shape defined by the [`from `](#from_coordinate-pair) parameter. - The syntax of most shape commands is the operation keyword such as `move` or `line`, followed by the `by` or `to` keyword, and then a set of coordinates. + The syntax of most shape commands is an operation keyword, such as `move` or `line`, followed by the `by` or `to` keyword, and a set of coordinates. `by`: Indicates that the `` is relative to the command's starting point ("relative" value). `to`: Indicates that the `` is relative to the top-left corner of the reference box ("absolute" value). - > **Note:** If a coordinate in `` is specified as a percentage, the value is calculated relative to the respective width or height of the reference box. + > **Note:** If a coordinate in a `` is specified as a percentage, the value is calculated relative to the respective width or height of the reference box. The following ``s can be specified: - - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands) to the list of shape commands. It draws nothing. Rather, it specifies the starting position for the next command. The `by`or `to` keyword specify whether the `` point is "relative" or "absolute", respectively. If the `` follows the `close` command, it identifies the starting point of the next shape or subpath. + - ``: Specified as `move [by | to] `. This command adds a [MoveTo command](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands) to the list of shape commands. It draws nothing. Rather, it specifies the starting position for the next command. The `by` or `to` keyword specifies whether the `` point is "relative" or "absolute", respectively. If the `` follows the `close` command, it identifies the starting point of the next shape or subpath. - - ``: Specified as `line [by | to] `. This command adds a [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The `by`or `to` keyword specify whether the ending point specified by `` is "relative" or "absolute", respectively. + - ``: Specified as `line [by | to] `. This command adds a [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The `by` or `to` keyword specifies whether the ending point specified by `` is "relative" or "absolute", respectively. - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. With `hline`, a horizontal line is drawn from the command's starting point `to` or `by` the `x` position defined by ``. With `vline`, a vertical line is drawn from the command's starting point `to` or `by` the `y` position defined by ``. The `by` or `to` keyword determines the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with one coordinate value remaining unchanged from its starting command. - - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword specifies the control points of the cubic Bézier curve as one or two `` values. If only a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_bézier_curve). - - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by`or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. - - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by`or `to` keyword determine whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. + - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs depending on the arc size, direction, and angle. The `of` keyword specifies the size of the ellipse from which the arc is taken. The first `` provides the horizontal radius of the ellipse, and the second provides the vertical radius. If only one `` is provided, the same value is used for both radii. The following parameters help to determine which of the four arcs are used: + The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs depending on the arc size, direction, and angle. The `of` keyword specifies the size of the ellipse from which the arc is taken. The first `` provides the horizontal radius of the ellipse and the second provides the vertical radius. If only one `` is provided, the same value is used for both radii. The following parameters help to determine which of the four arcs are used: - ``: Indicates whether the desired arc is the one traced around the ellipse clockwise (`cw`) or counter-clockwise (`ccw`). If omitted, this defaults to `ccw`. - ``: Indicates whether the desired arc is the larger (`large`) or smaller (`small`) of the two arcs. If omitted, this defaults to `small`. @@ -106,11 +106,11 @@ clip-path: shape( > **Note:** If the starting and ending points of the arc lie on exactly opposite sides of the ellipse, there is only one possible ellipse and two possible arcs. In this case, `` specifies the arc to choose, and `` has no effect. - - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath) to the list of shape commands, drawing a straight line from the current position (end of the last command) to the first point in the path defined in the `from ` parameter. To close the shape without drawing a line, use `` with the originating coordinates. If the `close` command is immediately followed by a ``, it defines the starting point of the next shape or subpath. + - `close`: Adds a [ClosePath command](/en-US/docs/Web/SVG/Attribute/d#closepath) to the list of shape commands, drawing a straight line from the current position (end of the last command) to the first point in the path defined in the `from ` parameter. To close the shape without drawing a line, include a `` with the originating coordinates before the close command. If the `close` command is immediately followed by a ``, it defines the starting point of the next shape or subpath. ## Description -The `shape()` function allows you to define complex shapes. It is similar to the {{cssxref("basic-shape/path","path()")}} function in several ways: +The `shape()` function allows you to define complex shapes. It is similar to the {{cssxref("basic-shape/path","path()")}} shape function in several ways: - The `` parameter in the `shape()` function works exactly like the same parameter in the `path()` function. - The `shape()` function requires specifying one or more ``s, where each command uses an underlying [path command](/en-US/docs/Web/SVG/Attribute/d#path_commands), such as [MoveTo](/en-US/docs/Web/SVG/Attribute/d#moveto_path_commands), [LineTo](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands), and [ClosePath](/en-US/docs/Web/SVG/Attribute/d#closepath). @@ -129,7 +129,7 @@ However, `shape()` offers several advantages over using `path()`: ### Using `shape()` to define a path -This example demonstrates how the `shape()` function can be used in the {{cssxref("offset-path")}} property to define the shape of the path that an element can follow. We're creating a curved path in this example. +This example demonstrates how the `shape()` function can be used in the {{cssxref("offset-path")}} property to define the shape of the path an element can follow. We're creating a curved path in this example. ```html hidden
From 5a05e1e932c353fdd584ae59f70a222870f1a6cf Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 17 May 2024 11:46:42 -0400 Subject: [PATCH 30/32] Apply suggestions from code review --- files/en-us/web/css/basic-shape/shape/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 3797dda0d0ac67f..93cb41cc62e38d6 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -90,11 +90,11 @@ clip-path: shape( - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword specifies the control points of the cubic Bézier curve as one or two `` values. If only a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_bézier_curve). + The `via` keyword specifies the control points of the Bézier curve. If only a single `` is provided, the command draws a [quadratic Bézier curve](/en-US/docs/Web/SVG/Attribute/d#quadratic_bézier_curve), which is defined by three points (the start point, control point, and end point). If two `` values are provided, the command draws a cubic Bézier curve, which is defined by four points (the start point, two control points, and the end point). - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic curve; if it is provided, the command draws a smooth cubic curve. + The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic Bézier curve, which uses the previous control point and the current end point to define the curve. If it is provided, the command draws a smooth cubic Bézier curve, which is defined by the previous control point, the current control point, and the current end point. Smooth curves ensure a continuous transition from the shape, while quadratic curves do not. Smooth quadratic curves maintain a seamless transition using a single control point, whereas smooth cubic curves provide a more refined transition using two control points. - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. From f5806c62f31eee30961f5f02b851dde741ff1b2b Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 24 May 2024 00:08:13 -0400 Subject: [PATCH 31/32] Apply suggestions from code review Co-authored-by: Estelle Weyl --- files/en-us/web/css/basic-shape/shape/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 93cb41cc62e38d6..4774f9be93f7fa1 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.shape {{CSSRef}} -The **`shape()`** [CSS function](/en-US/docs/Web/CSS/CSS_Functions) is used to define a shape for the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The `shape()` function is one of the {{cssxref("<basic-shape>")}} data types. +The **`shape()`** [CSS function](/en-US/docs/Web/CSS/CSS_Functions) is used to define a shape for the {{cssxref("clip-path")}} and {{cssxref("offset-path")}} properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The `shape()` function is a member of the {{cssxref("<basic-shape>")}} data type. ## Syntax From 676fe2b1e7d28fbf725d0b1bb14d8c8f0bc56579 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Mon, 27 May 2024 10:09:17 -0400 Subject: [PATCH 32/32] Apply suggestions from code review Co-authored-by: Estelle Weyl --- files/en-us/web/css/basic-shape/shape/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/basic-shape/shape/index.md b/files/en-us/web/css/basic-shape/shape/index.md index 4774f9be93f7fa1..364dde4aa523cd0 100644 --- a/files/en-us/web/css/basic-shape/shape/index.md +++ b/files/en-us/web/css/basic-shape/shape/index.md @@ -70,9 +70,9 @@ clip-path: shape( - `` - - : Specifies a list of one or more comma-separated commands that define the shape, using syntax similar to [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). Commands include ``, ``, ``, ``, ``, ``, and `close`. Each command's starting point is the previous command's ending point; the starting point of the shape defined by the [`from `](#from_coordinate-pair) parameter. + - : Specifies a list of one or more comma-separated commands that define the shape, using syntax similar to [SVG path commands](/en-US/docs/Web/SVG/Attribute/d#path_commands). Commands include ``, ``, ``, ``, ``, ``, and `close`. Each command's starting point is the previous command's ending point, with the first point of the shape defined by the [`from `](#from_coordinate-pair) parameter. - The syntax of most shape commands is an operation keyword, such as `move` or `line`, followed by the `by` or `to` keyword, and a set of coordinates. + The syntax of most shape commands is a keyword providing a directive, such as `move` or `line`, followed by the `by` or `to` keyword, and a set of coordinates. `by`: Indicates that the `` is relative to the command's starting point ("relative" value). @@ -86,7 +86,7 @@ clip-path: shape( - ``: Specified as `line [by | to] `. This command adds a [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. It draws a straight line from the command's starting point to its ending point. The `by` or `to` keyword specifies whether the ending point specified by `` is "relative" or "absolute", respectively. - - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. With `hline`, a horizontal line is drawn from the command's starting point `to` or `by` the `x` position defined by ``. With `vline`, a vertical line is drawn from the command's starting point `to` or `by` the `y` position defined by ``. The `by` or `to` keyword determines the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with one coordinate value remaining unchanged from its starting command. + - ``: Specified as `[hline | vline] [by | to] `. This command adds a horizontal (`hline`) or vertical (`vline`) [LineTo command](/en-US/docs/Web/SVG/Attribute/d#lineto_path_commands) to the list of shape commands. With `hline`, a horizontal line is drawn from the command's starting point `to` or `by` the `x` position defined by ``. With `vline`, a vertical line is drawn from the command's starting point `to` or `by` the `y` position defined by ``. The `by` or `to` keyword determines the "relative" or "absolute" ending point, respectively. This command is equivalent to `` with one coordinate value set by the single `` and the other coordinate value remaining unchanged from its starting command. - ``: Specified as `curve [by | to] via []`. This command adds a [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. @@ -94,11 +94,11 @@ clip-path: shape( - ``: Specified as `smooth [by | to] [via ]`. This command adds a smooth [Bézier curve command](/en-US/docs/Web/SVG/Attribute/d#cubic_bézier_curve) to the list of shape commands. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The `via` keyword can be optionally included to specify the control points of the curve through ``. If `via ` is omitted, the command draws a smooth quadratic Bézier curve, which uses the previous control point and the current end point to define the curve. If it is provided, the command draws a smooth cubic Bézier curve, which is defined by the previous control point, the current control point, and the current end point. Smooth curves ensure a continuous transition from the shape, while quadratic curves do not. Smooth quadratic curves maintain a seamless transition using a single control point, whereas smooth cubic curves provide a more refined transition using two control points. + If `via ` is omitted, the command draws a smooth quadratic Bézier curve, which uses the previous control point and the current endpoint to define the curve. If the optional `via` keyword is included, it specifies the control points of the curve through ``, drawing a smooth cubic Bézier curve defined by the previous control point, the current control point, and the current endpoint. Smooth curves ensure a continuous transition from the shape, while quadratic curves do not. Smooth quadratic curves maintain a seamless transition using a single control point, whereas smooth cubic curves provide a more refined transition using two control points. - ``: Specified as `arc [by | to] of [] [ | | rotate ]`. This command adds an [elliptical arc curve command](/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve) to the list of shape commands. It draws an elliptical arc between a starting point and an ending point. The `by` or `to` keyword determines whether the ending point of the curve, specified by the first ``, is "relative" or "absolute", respectively. - The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced in either direction, resulting in four possible arcs depending on the arc size, direction, and angle. The `of` keyword specifies the size of the ellipse from which the arc is taken. The first `` provides the horizontal radius of the ellipse and the second provides the vertical radius. If only one `` is provided, the same value is used for both radii. The following parameters help to determine which of the four arcs are used: + The elliptical arc curve command defines two possible ellipses, which intersect both the starting and ending points, and each can be traced clockwise or counterclockwise, resulting in four possible arcs depending on the arc size, direction, and angle. The `of` keyword specifies the size of the ellipse from which the arc is taken. The first `` provides the horizontal radius of the ellipse and the second provides the vertical radius. If only one `` is provided, the value is used for both radii (the radius of a circle). The following parameters help to determine which of the four arcs are used: - ``: Indicates whether the desired arc is the one traced around the ellipse clockwise (`cw`) or counter-clockwise (`ccw`). If omitted, this defaults to `ccw`. - ``: Indicates whether the desired arc is the larger (`large`) or smaller (`small`) of the two arcs. If omitted, this defaults to `small`. @@ -119,7 +119,7 @@ However, `shape()` offers several advantages over using `path()`: - `shape()` uses standard CSS syntax, making it easier to create and modify shapes directly in your stylesheet. In comparison, `path()` uses the [SVG path](/en-US/docs/Web/SVG/Element/path) syntax, which is less intuitive for those not familiar with SVG. - `shape()` supports a variety of CSS units, including percentages, `rem`, and `em`. `path()`, on the other hand, defines shapes as a single string and limits units to `px`. -- `shape()` also allows the use of CSS math functions, providing more versatility when defining shapes. +- `shape()` also allows the use of CSS math functions, like {{cssxref("calc")}}, {{cssxref("max")}}, and {{cssxref("abs")}}, providing more versatility when defining shapes. ## Formal syntax