Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-08-29 12:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(docs): change layout, some stylistic change, et cetera

Browse Source
This commit is contained in:
Karsa
2026-08-25 10:18:41 +02:00
parent 156c1aea3d
commit 3c91e8871e
22 changed files with 533 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
docs/contribute/icons/design-principles.md
View File

@@ -8,230 +8,190 @@ Lucide is designed as a consistent icon set, not just a collection of individual
This guide explains the visual principles behind Lucide icons and how to apply them when designing new icons. This guide explains the visual principles behind Lucide icons and how to apply them when designing new icons.
For concrete requirements such as canvas size, stroke width, spacing, and corner radii, see the [Icon Design Specification](./specification). For concrete requirements, see the [Icon Design Specification](./specification).
## 1. Use a 24 × 24 pixel canvas ## 1. Use a 24 × 24 pixel canvas
:::: example
Icons **must** be designed on a 24 × 24 pixel canvas. Icons **must** be designed on a 24 × 24 pixel canvas.
:::: example
::: do ../../images/24px-24px.svg?raw=true ::: do ../../images/24px-24px.svg?raw=true
Use a **24 × 24 pixel** canvas. Use a **24 × 24 pixel** canvas.
::: :::
::: dont ../../images/24px-24px-violation.svg?raw=true ::: dont ../../images/24px-24px-violation.svg?raw=true
Use a larger or smaller canvas, or one that's not square. Use a larger or smaller canvas, or one that's not square.
::: :::
:::: ::::
## 2. Keep 1 pixel of safe zone ## 2. Keep 1 pixel of safe zone
:::: example
Icons **must** have at least 1 pixel of padding between their strokes and the edge of the canvas. Icons **must** have at least 1 pixel of padding between their strokes and the edge of the canvas.
:::: example
::: do ../../images/1px-padding.svg?raw=true ::: do ../../images/1px-padding.svg?raw=true
Keep at least **1 pixel of padding** around the icon. Keep at least **1 pixel of padding** around the icon.
::: :::
::: dont ../../images/1px-padding-violation.svg?raw=true
::: dont ../../images/0px-padding.svg?raw=true You must leave this safe zone, otherwise it might result in trimmed visuals.
Failing to keep this safe zone will result in trimmed visuals.
::: :::
:::: ::::
## 3. Use 2 pixel strokes ## 3. Use 2 pixel strokes
:::: example
Strokes **must** be 2 pixels wide. Strokes **must** be 2 pixels wide.
:::: example
::: do ../../images/2px-stroke.svg?raw=true ::: do ../../images/2px-stroke.svg?raw=true
Use a **2 pixel stroke width**. Use a **2 pixel stroke width**.
::: :::
::: dont ../../images/2px-stroke-violation.svg?raw=true ::: dont ../../images/2px-stroke-violation.svg?raw=true
Avoid thicker or thinner strokes. Avoid **thicker or thinner** strokes, or **mixing stroke widths**.
::: :::
:::: ::::
## 4. Use round line joins ## 4. Use round line joins
:::: example
Strokes **must** use round line joins. Strokes **must** use round line joins.
:::: example
::: do ../../images/round-joints.svg?raw=true ::: do ../../images/round-joints.svg?raw=true
Use **round line joins**. Use **round line joins**.
::: :::
::: dont ../../images/round-joints-violation.svg?raw=true ::: dont ../../images/round-joints-violation.svg?raw=true
You **must not** use **miter or bevel** line joins. You **must not** use **miter or bevel** line joins.
::: :::
:::: ::::
::: tip
Even though round line joins are used, you should still add corner rounding to most sharp corners.
:::
## 5. Use round line caps ## 5. Use round line caps
:::: example
Open paths **must** use round line caps. Open paths **must** use round line caps.
:::: example
::: do ../../images/round-caps.svg?raw=true ::: do ../../images/round-caps.svg?raw=true
Use **round line caps** on open paths. Use **round line caps** on open paths.
::: :::
::: dont ../../images/round-caps-violation.svg?raw=true ::: dont ../../images/round-caps-violation.svg?raw=true
You **must not** use **butt or square** line caps. You **must not** use **butt or square** line caps.
::: :::
:::: ::::
## 6. Use centered strokes ## 6. Use centered strokes
:::: example
Strokes **must** be centered on their paths. Strokes **must** be centered on their paths.
:::: example
::: do ../../images/centered-strokes.svg?raw=true ::: do ../../images/centered-strokes.svg?raw=true
Keep strokes **centered** on their paths. Keep strokes **centered** on their paths.
::: :::
::: dont ../../images/centered-strokes-violation.svg?raw=true ::: dont ../../images/centered-strokes-violation.svg?raw=true
You **must not** use **inside or outside** strokes. You **must not** use **inside or outside** strokes, as they alter the intended appearance of line joins.
::: :::
:::: ::::
## 7. Use consistent corner radii ## 7. Use consistent corner radii
Almost every sharp corner **should** be rounded.
:::: example :::: example
Almost all sharp corners **should** be rounded:
::: do ../../images/border-radius-correct.svg?raw=true ::: do ../../images/border-radius-correct.svg?raw=true
Use rounded corners. Use **rounded corners**.
::: :::
::: dont ../../images/border-radius-violation.svg?raw=true ::: dont ../../images/border-radius-violation.svg?raw=true
Avoid sharp corners. Avoid **sharp corners**.
::: :::
:::: ::::
:::: example
The corner radius depends on the size of the element and the angle. For 90° angles you should: The corner radius depends on the size of the element and the angle. For 90° angles you should:
:::: example
::: do ../../images/2px-border-radius.svg?raw=true ::: do ../../images/2px-border-radius.svg?raw=true
Use a **2 pixel corner radius** for shapes that are at least 8 pixels wide or tall. Use a **2 pixel corner radius** for shapes that are at least 8 pixels wide or tall.
::: :::
::: do ../../images/1px-border-radius.svg?raw=true ::: do ../../images/1px-border-radius.svg?raw=true
Use a **1 pixel corner radius** for shapes smaller than 8 pixels. Use a **1 pixel corner radius** for shapes smaller than 8 pixels.
::: :::
:::: ::::
But there are always exceptions to the rule:
:::: example :::: example
But there are always exceptions to the rule.
::: do ../../images/border-radius-90deg.svg?raw=true ::: do ../../images/border-radius-90deg.svg?raw=true
Diagonal lines meeting at a right angle are usually rounded to 2.41 pixels in order to be perfectly grid aligned. Diagonal lines meeting at a right angle are usually rounded to **2.41 pixels** (1+√2) in order for the lines to be **perfectly grid aligned**.
::: :::
::: do ../../images/border-radius-arbitrary.svg?raw=true ::: do ../../images/border-radius-arbitrary.svg?raw=true
Even very sharp corners should have a minor amount of rounding applied, but how much exactly will vary on the geometry of the icon. Even **very sharp corners** should have a _minor_ amount of rounding applied, but how much exactly will vary on the geometry of the icon.
::: :::
:::: ::::
Avoid rounding corners **where multiple lines meet**.
:::: example :::: example
Again, _almost_ every sharp corner should be rounded, but there are exceptions to the rule.
::: do ../../images/border-radius-line-join.svg?raw=true ::: do ../../images/border-radius-line-join.svg?raw=true
Keep corners sharp if multiple lines meet. Keep corners sharp if multiple lines meet, this will ensure the icon scales in a consistent way.
::: :::
::: dont ../../images/border-radius-line-join-violation.svg?raw=true ::: dont ../../images/border-radius-line-join-violation.svg?raw=true
Make icons consistent at different scales by not rounding these corners. Make icons consistent at different scales by **not rounding** corners where more than two lines meet.
::: :::
:::: ::::
## 8. Keep 2 pixels of gap ## 8. Keep 2 pixels of gap
:::: example
Distinct elements **must** have at least 2 pixels of visual spacing between them. Distinct elements **must** have at least 2 pixels of visual spacing between them.
:::: example
::: do ../../images/2px-element-spacing.svg?raw=true ::: do ../../images/2px-element-spacing.svg?raw=true
Keep **2 pixels of spacing** between distinct elements. Keep **2 pixels of spacing** between distinct elements.
::: :::
::: dont ../../images/1px-element-spacing.svg?raw=true ::: dont ../../images/1px-element-spacing.svg?raw=true
Never use gaps smaller than **2 pixels** between distinct elements. Never use gaps smaller than **2 pixels** between distinct elements.
::: :::
:::: ::::
:::: example
This includes the inside of shapes, so most inner gaps **should** be at least 2 pixels wide. This includes the inside of shapes, so most inner gaps **should** be at least 2 pixels wide.
:::: example
::: do ../../images/2px-inner-spacing.svg?raw=true ::: do ../../images/2px-inner-spacing.svg?raw=true
Keep at least **2 pixels of spacing** inside shapes. Keep at least **2 pixels of spacing** inside shapes.
::: :::
::: dont ../../images/1px-inner-spacing.svg?raw=true ::: dont ../../images/1px-inner-spacing.svg?raw=true
Avoid inner gaps smaller than **2 pixels**. Avoid inner gaps smaller than **2 pixels**.
::: :::
:::: ::::
You can also visualize this rule by trying to place a **2 pixel wide circle** within your shape.
:::: example :::: example
You can visualize this by trying to place a 2 pixel wide circle within your shape.
::: do ../../images/2px-inner-gap.svg?raw=true ::: do ../../images/2px-inner-gap.svg?raw=true
If a **2 pixel wide circle** fits inside the shape without overlapping, the gap is wide enough. If a **2 pixel wide circle** fits inside the shape without overlapping, the gap is **wide enough**.
::: :::
::: dont ../../images/1px-inner-gap.svg?raw=true ::: dont ../../images/1px-inner-gap.svg?raw=true
If a **2 pixel wide circle** overlaps the shape, the inner gap should be wider. If a **2 pixel wide circle** overlaps the shape, the inner gap should be **wider**.
::: :::
:::: ::::
:::: example
The 2 pixel spacing also applies when elements visually connect or intersect. The 2 pixel spacing also applies when elements visually connect or intersect.
:::: example
::: dont ../../images/2px-element-spacing-connected.svg?raw=true ::: dont ../../images/2px-element-spacing-connected.svg?raw=true
Maintain 2 pixels of spacing where elements visually connect. Maintain 2 pixels of spacing where elements **visually connect**.
::: :::
::: dont ../../images/2px-element-spacing-abrupt-cut.svg?raw=true ::: dont ../../images/2px-element-spacing-abrupt-cut.svg?raw=true
Avoid abrupt cuts where one element meets another. Avoid **abrupt cuts** where one element meets another.
::: :::
:::: ::::
## 9. Aim for uniform volume ## 9. Aim for uniform volume
:::: example
Icons should have a similar visual weight when viewed alongside each other. Icons should have a similar visual weight when viewed alongside each other.
:::: example
::: do ../../images/visual-weight-consistent.svg?raw=true ::: do ../../images/visual-weight-consistent.svg?raw=true
Match the visual weight of `circle` and `square`. Match the visual weight of `circle` and `square`.
::: :::
@@ -243,41 +203,33 @@ The second icon is **too large**, the fourth is **too small**.
:::: ::::
::: tip ::: tip
The amount and distribution of strokes affect how heavy an icon appears. An icon with many closely spaced elements can appear much heavier than a simpler icon, even when both use the same stroke width. The amount and distribution of strokes affect how heavy an icon appears. An icon with many closely spaced elements can appear much heavier than a simpler icon, even when both use the same stroke width.
Place your icon next to `circle` or `square` and blur them. Your icon should not appear significantly lighter or darker than the reference icon. Place your icon next to `circle` or `square` and blur them. Your icon should not appear significantly lighter or darker than the reference icon.
::: :::
## 10. Balance icons visually ## 10. Balance icons visually
:::: example
Icons should appear centered and balanced within the canvas. Icons should appear centered and balanced within the canvas.
:::: example
::: do ../../images/visually-centered-do.svg?raw=true ::: do ../../images/visually-centered-do.svg?raw=true
Keep your icons visually centered. Keep your icons visually centered.
::: :::
::: dont ../../images/visually-centered-dont.svg?raw=true ::: dont ../../images/visually-centered-dont.svg?raw=true
The optical volume of this icon is offset to the top left. The optical volume of this icon is offset to the top left.
::: :::
:::: ::::
:::: example
Symmetrical icons should remain geometrically centered. Symmetrical icons should remain geometrically centered.
:::: example
::: do ../../images/visually-centered-symmetrical-do.svg?raw=true ::: do ../../images/visually-centered-symmetrical-do.svg?raw=true
::: :::
::: dont ../../images/visually-centered-symmetrical-dont.svg?raw=true ::: dont ../../images/visually-centered-symmetrical-dont.svg?raw=true
::: :::
:::: ::::
::: tip ::: tip
Geometric centering does not always produce a visually centered icon. Asymmetrical shapes may need to be moved slightly to compensate for their visual center of gravity. Geometric centering does not always produce a visually centered icon. Asymmetrical shapes may need to be moved slightly to compensate for their visual center of gravity.
@@ -286,18 +238,15 @@ Compare your icon with `circle` or `square` both side by side and vertically. If
## 11. Keep density low ## 11. Keep density low
:::: example
Lucide icons should have a similar visual density and level of detail. Lucide icons should have a similar visual density and level of detail.
:::: example
::: do ../../images/density-optimal.svg?raw=true ::: do ../../images/density-optimal.svg?raw=true
Simplify complex subjects, preserving the features that make them identifiable. Simplify complex subjects, preserving the features that make them identifiable.
::: :::
::: dont ../../images/density-too-dense.svg?raw=true ::: dont ../../images/density-too-dense.svg?raw=true
Avoid adding unnecessary details that make the design dense. Avoid adding unnecessary details that make the design dense.
::: :::
:::: ::::
::: tip ::: tip
@@ -310,17 +259,14 @@ View the icon at its intended size and try blurring it. Areas that become notice
## 12. Use smooth, simple curves ## 12. Use smooth, simple curves
:::: example
Curves should be smooth and use the simplest geometry that accurately describes the shape. Curves should be smooth and use the simplest geometry that accurately describes the shape.
:::: example
::: do ../../images/curvature-smooth.svg?raw=true ::: do ../../images/curvature-smooth.svg?raw=true
Prefer simple arcs and quadratic curves where possible. Prefer **simple arcs** and **quadratic curves** where possible.
::: :::
::: dont ../../images/curvature-uneven.svg?raw=true ::: dont ../../images/curvature-uneven.svg?raw=true
Avoid uneven or unnecessarily complex curves. Avoid **uneven or unnecessarily complex** curves.
::: :::
:::: ::::
@@ -332,8 +278,9 @@ Avoid unnecessary control points. They make shapes harder to maintain and can in
## 13. Design for the pixel grid ## 13. Design for the pixel grid
:::: example
Lucide icons should appear sharp and intentional at small sizes, including on low-density displays. Lucide icons should appear sharp and intentional at small sizes, including on low-density displays.
:::: example
::: do ../../images/pixel-perfection-ideal.svg?raw=true ::: do ../../images/pixel-perfection-ideal.svg?raw=true
Align coordinates and the centers of arcs and other geometric elements to the pixel grid where possible. Align coordinates and the centers of arcs and other geometric elements to the pixel grid where possible.
::: :::
@@ -342,39 +289,51 @@ Avoid placing geometry off the pixel grid without a visual reason.
::: :::
:::: ::::
:::: example
::: do ../../images/pixel-perfection-subelement-do.svg?raw=true
Also **align subelements** to the pixel grid.
:::
::: dont ../../images/pixel-perfection-subelement-dont.svg?raw=true
You **must not** place subelements off-grid, as they'll become blurry on low density displays.
:::
::::
::: tip ::: tip
Pixel alignment should support the overall appearance of the icon rather than come at the expense of recognizable shapes, smooth curves, or visual balance. Pixel alignment should support the overall appearance of the icon rather than come at the expense of recognizable shapes, smooth curves, or visual balance.
::: :::
## 14. Reuse established shapes ## 14. Reuse established shapes
:::: example
When creating variant icons, preserve the geometry of the base icon unless the new concept requires a change. When creating variant icons, preserve the geometry of the base icon unless the new concept requires a change.
:::: example
::: do ../../images/established-shapes-base-do.svg?raw=true ::: do ../../images/established-shapes-base-do.svg?raw=true
Reuse existing base icons exactly as they appear. Reuse existing base icons **exactly as they appear**.
::: :::
::: dont ../../images/established-shapes-base-dont.svg?raw=true ::: dont ../../images/established-shapes-base-dont.svg?raw=true
Avoid altering the **geometry, placement and orientation** of base shapes. Avoid altering the **geometry, placement and orientation** of base shapes.
::: :::
:::: ::::
:::: example
Related icons should share the same shapes and visual patterns wherever possible. Related icons should share the same shapes and visual patterns wherever possible.
:::: example
::: do ../../images/established-shapes-sub-do.svg?raw=true ::: do ../../images/established-shapes-sub-do.svg?raw=true
Reuse elements from existing icons without change. Reuse elements from existing icons **without change**.
::: :::
::: dont ../../images/established-shapes-sub-dont.svg?raw=true ::: dont ../../images/established-shapes-sub-dont.svg?raw=true
Avoid creating new designs for existing elements. Avoid creating **new designs for existing elements**.
::: :::
:::: ::::
Common modifiers and elements should behave and appear consistently across both icon sets and the library.
:::: example :::: example
Common modifiers and elements should behave consistently across both icon sets and the library.
::: do ../../images/established-shapes-consistency-do.svg?raw=true ::: do ../../images/established-shapes-consistency-do.svg?raw=true
Maintain consistency between the placement and size of addons. Maintain consistency between the **placement and size** of addons.
::: :::
::: dont ../../images/established-shapes-consistency-dont.svg?raw=true ::: dont ../../images/established-shapes-consistency-dont.svg?raw=true
Avoid using irregular placements and sizes compared to existing icons. Avoid using **irregular placements and sizes** compared to existing icons.
::: :::
:::: ::::
@@ -399,4 +358,4 @@ When designing a Lucide icon:
9. **Align geometry to the pixel grid** where possible. 9. **Align geometry to the pixel grid** where possible.
10. **Reuse established shapes and geometry** from existing Lucide icons. 10. **Reuse established shapes and geometry** from existing Lucide icons.
When these guidelines conflict, prioritize **clarity, visual balance, and consistency with the rest of Lucide**. When these guidelines conflict, you should prioritize **clarity, visual balance, and consistency** with the rest of the Lucide set.

63
docs/images/0px-padding.svg
View File

@@ -1,63 +0,0 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1940_22099)">
<g clip-path="url(#clip1_1940_22099)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g>
<path d="M10.0499 155.017C18.91 155.039 26.4087 160.819 29.0157 168.807L119.152 209.824C119.408 209.94 119.685 210 119.964 210C120.242 210 120.516 209.94 120.771 209.825L210.779 168.876C213.353 160.892 220.813 155.088 229.66 155.018C240.706 154.93 249.73 163.814 249.817 174.859C249.865 180.871 248.163 186.768 244.919 191.832C241.69 196.872 237.069 200.869 231.615 203.341L231.616 203.342L137.314 246.245C137.305 246.249 137.297 246.253 137.288 246.257C131.846 248.723 125.939 250 119.964 250C113.989 250 108.083 248.723 102.641 246.257C102.631 246.253 102.622 246.249 102.612 246.245L8.09092 203.231C8.05009 203.213 8.00954 203.194 7.96885 203.175C2.5877 200.682 -1.96366 196.699 -5.14737 191.699C-8.33092 186.7 -10.0145 180.893 -9.99991 174.968L-9.99209 174.451C-9.69157 163.645 -0.823169 154.99 10.0499 155.017ZM229.66 100.013C240.706 99.9255 249.73 108.809 249.817 119.854C249.865 125.867 248.163 131.764 244.919 136.828C241.69 141.868 237.069 145.866 231.615 148.337L137.314 191.241C137.305 191.245 137.297 191.249 137.288 191.253C131.846 193.719 125.939 194.996 119.964 194.996C113.989 194.996 108.083 193.719 102.641 191.253C102.631 191.249 102.622 191.244 102.612 191.24L8.09092 148.228C8.05012 148.209 8.00952 148.19 7.96885 148.171C2.58785 145.678 -1.96362 141.695 -5.14737 136.695C-8.33101 131.696 -10.0146 125.888 -9.99991 119.963L-9.99209 119.447C-9.69176 108.641 -0.823289 99.9858 10.0499 100.013C18.9096 100.035 26.4075 105.815 29.0147 113.802L119.152 154.82C119.408 154.936 119.685 154.996 119.964 154.996C120.242 154.996 120.516 154.936 120.771 154.821L210.779 113.872C213.353 105.888 220.813 100.083 229.66 100.013ZM119.909 30C119.628 30 119.35 30.0604 119.093 30.1777C119.088 30.1801 119.082 30.1822 119.077 30.1846L42.7315 64.958L119.196 99.8359L119.203 99.8389C119.46 99.956 119.738 100.017 120.019 100.017C120.299 100.017 120.578 99.9561 120.835 99.8389L120.859 99.8281L197.284 65.0576L120.739 30.1846C120.735 30.1825 120.73 30.1798 120.726 30.1777C120.469 30.0605 120.19 30 119.909 30ZM250 65.0635C250 71.0715 248.255 76.9515 244.975 81.9873C241.736 86.96 237.137 90.8974 231.726 93.333L137.424 136.236L137.423 136.235C131.959 138.726 126.024 140.017 120.019 140.017C114.004 140.017 108.06 138.723 102.59 136.226V136.225L8.29502 93.2158L8.29599 93.2148C2.89195 90.7786 -1.70076 86.8444 -4.93643 81.877C-8.21653 76.8412 -9.96182 70.9613 -9.96182 64.9531C-9.96181 58.9449 -8.21656 53.065 -4.93643 48.0293L-4.62491 47.5605C-1.407 42.8111 3.06851 39.0454 8.30576 36.6865H8.30478L102.481 -6.20898V-6.20996C107.951 -8.70752 113.895 -10 119.909 -10C125.924 -9.99998 131.867 -8.70757 137.338 -6.20996L137.337 -6.20898L231.735 36.7969L231.734 36.7979C236.97 39.1566 241.446 42.9212 244.663 47.6699L244.975 48.1396L245.277 48.6133C248.362 53.5423 250 59.2429 250 65.0635Z" fill="#DD0031" fill-opacity="0.2" stroke="#DD0031" stroke-dasharray="1 1"/>
<path d="M10 120.013C9.99483 122.117 10.5926 124.178 11.7225 125.952C12.8524 127.727 14.467 129.14 16.3748 130.023L110.897 173.037C113.745 174.328 116.837 174.996 119.964 174.996C123.091 174.996 126.183 174.328 129.032 173.037L223.334 130.133C225.279 129.258 226.928 127.835 228.08 126.038C229.231 124.241 229.835 122.147 229.818 120.013M10 175.017C9.99483 177.121 10.5926 179.182 11.7225 180.957C12.8524 182.731 14.467 184.144 16.3748 185.028L110.897 228.041C113.745 229.332 116.837 230 119.964 230C123.091 230 126.183 229.332 129.032 228.041L223.334 185.138C225.279 184.262 226.928 182.839 228.08 181.042C229.231 179.245 229.835 177.152 229.818 175.017M129.031 11.9841C126.168 10.6766 123.057 10 119.909 10C116.761 10 113.65 10.6766 110.787 11.9841L16.5945 54.8874C14.6441 55.7482 12.9859 57.158 11.8218 58.9451C10.6577 60.7323 10.0379 62.8197 10.0379 64.9532C10.0379 67.0866 10.6577 69.1741 11.8218 70.9612C12.9859 72.7484 14.6441 74.1582 16.5945 75.019L110.896 118.032C113.76 119.34 116.871 120.016 120.019 120.016C123.167 120.016 126.278 119.34 129.141 118.032L223.443 75.129C225.394 74.2682 227.052 72.8584 228.216 71.0712C229.38 69.2841 230 67.1967 230 65.0632C230 62.9297 229.38 60.8423 228.216 59.0551C227.052 57.268 225.394 55.8582 223.443 54.9974L129.031 11.9841Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M240 0V240H0V0H240ZM10 230H230V10H10V230Z" fill="#DD0031" fill-opacity="0.5"/>
</g>
<defs>
<clipPath id="clip0_1940_22099">
<rect width="240" height="240" fill="white"/>
</clipPath>
<clipPath id="clip1_1940_22099">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

12
docs/images/1px-element-spacing.svg
View File

@@ -53,14 +53,14 @@
<rect x="123" y="60" width="74" height="10" fill="url(#paint1_linear_1939_21540)"/> <rect x="123" y="60" width="74" height="10" fill="url(#paint1_linear_1939_21540)"/>
<defs> <defs>
<linearGradient id="paint0_linear_1939_21540" x1="70" y1="127.25" x2="144" y2="127.25" gradientUnits="userSpaceOnUse"> <linearGradient id="paint0_linear_1939_21540" x1="70" y1="127.25" x2="144" y2="127.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#F56565" stop-opacity="0"/> <stop stop-color="#DD0031" stop-opacity="0"/>
<stop offset="0.499255" stop-color="#F56565"/> <stop offset="0.499255" stop-color="#DD0031"/>
<stop offset="1" stop-color="#F56565" stop-opacity="0"/> <stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
</linearGradient> </linearGradient>
<linearGradient id="paint1_linear_1939_21540" x1="123" y1="64.25" x2="197" y2="64.25" gradientUnits="userSpaceOnUse"> <linearGradient id="paint1_linear_1939_21540" x1="123" y1="64.25" x2="197" y2="64.25" gradientUnits="userSpaceOnUse">
<stop stop-color="#F56565" stop-opacity="0"/> <stop stop-color="#DD0031" stop-opacity="0"/>
<stop offset="0.499255" stop-color="#F56565"/> <stop offset="0.499255" stop-color="#DD0031"/>
<stop offset="1" stop-color="#F56565" stop-opacity="0"/> <stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
</linearGradient> </linearGradient>
<clipPath id="clip0_1939_21540"> <clipPath id="clip0_1939_21540">
<rect width="240" height="240" fill="white"/> <rect width="240" height="240" fill="white"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

67
docs/images/1px-padding-violation.svg Normal file
View File

@@ -0,0 +1,67 @@
<svg width="244" height="184" viewBox="0 0 244 184" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1946_25554)">
<path d="M62 37H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M67 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 42H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M72 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 47H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M77 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 52H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M82 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 57H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M87 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 62H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M92 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 67H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M97 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 72H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M102 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 77H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M107 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 82H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M112 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 87H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M117 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 92H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M122 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 97H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M127 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 102H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M132 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 107H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M137 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 112H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M142 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 117H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M147 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 122H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M152 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 127H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M157 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 132H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M162 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 137H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M167 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 142H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M172 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M62 147H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M177 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
</g>
<mask id="mask0_1946_25554" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="42" y="12" width="160" height="160">
<path d="M202 172H42V12H202V172ZM62 32V152H182V32H62Z" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_1946_25554)">
<path d="M67.025 109.508C71.455 109.519 75.2044 112.41 76.5079 116.403L121.576 136.912C121.704 136.97 121.842 137 121.982 137C122.121 137 122.258 136.97 122.385 136.913L167.39 116.438C168.677 112.446 172.406 109.544 176.83 109.509C182.353 109.465 186.865 113.907 186.909 119.43C186.932 122.436 186.082 125.384 184.46 127.916C182.845 130.436 180.535 132.435 177.808 133.67L177.808 133.671L130.657 155.123C130.653 155.124 130.648 155.126 130.644 155.128C127.923 156.362 124.97 157 121.982 157C118.994 157 116.041 156.362 113.32 155.128C113.316 155.126 113.311 155.125 113.306 155.123L66.0455 133.616C66.025 133.606 66.0048 133.597 65.9844 133.587C63.2939 132.341 61.0182 130.349 59.4263 127.85C57.8345 125.35 56.9928 122.447 57 119.484L57.004 119.226C57.1542 113.822 61.5884 109.495 67.025 109.508ZM176.83 82.0063C182.353 81.9627 186.865 86.4046 186.909 91.9272C186.932 94.9333 186.082 97.8822 184.46 100.414C182.845 102.934 180.535 104.933 177.808 106.168L130.657 127.621C130.653 127.623 130.648 127.625 130.644 127.626C127.923 128.86 124.97 129.498 121.982 129.498C118.994 129.498 116.041 128.86 113.32 127.626C113.316 127.624 113.311 127.622 113.306 127.62L66.0455 106.114C66.0251 106.104 66.0048 106.095 65.9844 106.085C63.2939 104.839 61.0182 102.847 59.4263 100.348C57.8345 97.8479 56.9927 94.9442 57 91.9814L57.004 91.7236C57.1541 86.3203 61.5884 81.9929 67.025 82.0063C71.4548 82.0174 75.2038 84.9075 76.5074 88.9009L121.576 109.41C121.704 109.468 121.842 109.498 121.982 109.498C122.121 109.498 122.258 109.468 122.385 109.411L167.39 88.936C168.677 84.944 172.406 82.0413 176.83 82.0063ZM121.955 47C121.814 47 121.675 47.0302 121.546 47.0889C121.544 47.09 121.541 47.0911 121.539 47.0923L83.3658 64.479L121.598 81.918L121.602 81.9194C121.73 81.978 121.869 82.0083 122.009 82.0083C122.15 82.0083 122.289 81.9781 122.418 81.9194L122.43 81.9141L160.642 64.5288L122.37 47.0923C122.367 47.0912 122.365 47.0899 122.363 47.0889C122.234 47.0302 122.095 47 121.955 47ZM187 64.5317C187 67.5358 186.127 70.4758 184.487 72.9937C182.868 75.48 180.568 77.4487 177.863 78.6665L130.712 100.118L130.711 100.118C127.979 101.363 125.012 102.008 122.009 102.008C119.002 102.008 116.03 101.362 113.295 100.113V100.112L66.1475 78.6079L66.148 78.6074C63.446 77.3893 61.1496 75.4222 59.5318 72.9385C57.8917 70.4206 57.0191 67.4806 57.0191 64.4766C57.0191 61.4725 57.8917 58.5325 59.5318 56.0146L59.6875 55.7803C61.2965 53.4056 63.5343 51.5227 66.1529 50.3433H66.1524L113.24 28.8955V28.895C115.976 27.6462 118.948 27 121.955 27C124.962 27 127.934 27.6462 130.669 28.895L130.669 28.8955L177.868 50.3984L177.867 50.3989C180.485 51.5783 182.723 53.4606 184.332 55.835L184.487 56.0698L184.639 56.3066C186.181 58.7712 187 61.6215 187 64.5317Z" fill="#DD0031" fill-opacity="0.2" stroke="#DD0031" stroke-width="0.5" stroke-dasharray="0.5 0.5"/>
</g>
<path d="M67 92.0063C66.9974 93.0583 67.2963 94.0891 67.8612 94.9762C68.4262 95.8634 69.2335 96.5698 70.1874 97.0117L117.448 118.518C118.873 119.164 120.418 119.498 121.982 119.498C123.546 119.498 125.091 119.164 126.516 118.518L173.667 97.0667C174.64 96.629 175.464 95.9176 176.04 95.019C176.615 94.1205 176.918 93.0737 176.909 92.0063M67 119.508C66.9974 120.56 67.2963 121.591 67.8612 122.478C68.4262 123.366 69.2335 124.072 70.1874 124.514L117.448 146.02C118.873 146.666 120.418 147 121.982 147C123.546 147 125.091 146.666 126.516 146.02L173.667 124.569C174.64 124.131 175.464 123.42 176.04 122.521C176.615 121.623 176.918 120.576 176.909 119.508M126.516 37.992C125.084 37.3383 123.528 37 121.955 37C120.381 37 118.825 37.3383 117.393 37.992L70.2972 59.4437C69.3221 59.8741 68.493 60.579 67.9109 61.4726C67.3289 62.3662 67.019 63.4099 67.019 64.4766C67.019 65.5433 67.3289 66.587 67.9109 67.4806C68.493 68.3742 69.3221 69.0791 70.2972 69.5095L117.448 91.0162C118.88 91.6699 120.436 92.0082 122.009 92.0082C123.583 92.0082 125.139 91.6699 126.571 91.0162L173.722 69.5645C174.697 69.1341 175.526 68.4292 176.108 67.5356C176.69 66.642 177 65.5983 177 64.5316C177 63.4649 176.69 62.4212 176.108 61.5276C175.526 60.634 174.697 59.9291 173.722 59.4987L126.516 37.992Z" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
<mask id="path-50-inside-1_1946_25554" fill="white">
<path d="M182 32V152H62V32H182ZM67 147H177V37H67V147Z"/>
</mask>
<path d="M182 32V152H62V32H182ZM67 147H177V37H67V147Z" fill="#DD0031" fill-opacity="0.5"/>
<path d="M182 32H183V31H182V32ZM182 152V153H183V152H182ZM62 152H61V153H62V152ZM62 32V31H61V32H62ZM67 147H66V148H67V147ZM177 147V148H178V147H177ZM177 37H178V36H177V37ZM67 37V36H66V37H67ZM182 32H181V152H182H183V32H182ZM182 152V151H62V152V153H182V152ZM62 152H63V32H62H61V152H62ZM62 32V33H182V32V31H62V32ZM67 147V148H177V147V146H67V147ZM177 147H178V37H177H176V147H177ZM177 37V36H67V37V38H177V37ZM67 37H66V147H67H68V37H67Z" fill="#DD0031" fill-opacity="0.25" mask="url(#path-50-inside-1_1946_25554)"/>
<defs>
<clipPath id="clip0_1946_25554">
<rect width="120" height="120" fill="white" transform="translate(62 32)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

108
docs/images/1px-padding.svg
View File

@@ -1,57 +1,61 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="244" height="184" viewBox="0 0 244 184" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1940_21994)"> <g clip-path="url(#clip0_1946_25482)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 37H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M67 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 42H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M72 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 47H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M77 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 52H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M82 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 57H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M87 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 62H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M92 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 67H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M97 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 72H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M102 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 77H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M107 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 82H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M112 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 87H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M117 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 92H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M122 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 97H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M127 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 102H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M132 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 107H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M137 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 112H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M142 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 117H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M147 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 122H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M152 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 127H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M157 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 132H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M162 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 137H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M167 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 142H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M172 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M62 147H182" stroke="#D8D8D9" stroke-width="0.25"/>
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M177 32V152" stroke="#D8D8D9" stroke-width="0.25"/>
</g> </g>
<path d="M20 120C19.9953 121.913 20.5392 123.787 21.5672 125.399C22.5952 127.012 24.0642 128.297 25.8 129.1L111.8 168.2C114.392 169.374 117.205 169.981 120.05 169.981C122.895 169.981 125.708 169.374 128.3 168.2L214.1 129.2C215.87 128.404 217.37 127.111 218.418 125.477C219.466 123.844 220.015 121.941 220 120M20 170C19.9953 171.913 20.5392 173.787 21.5672 175.399C22.5952 177.012 24.0642 178.297 25.8 179.1L111.8 218.2C114.392 219.374 117.205 219.981 120.05 219.981C122.895 219.981 125.708 219.374 128.3 218.2L214.1 179.2C215.87 178.404 217.37 177.111 218.418 175.477C219.466 173.844 220.015 171.941 220 170M128.3 21.7999C125.694 20.6114 122.864 19.9963 120 19.9963C117.136 19.9963 114.306 20.6114 111.7 21.7999L25.9999 60.7999C24.2254 61.5823 22.7167 62.8639 21.6576 64.4885C20.5984 66.1131 20.0345 68.0106 20.0345 69.9499C20.0345 71.8893 20.5984 73.7868 21.6576 75.4113C22.7167 77.0359 24.2254 78.3175 25.9999 79.0999L111.8 118.2C114.406 119.388 117.236 120.003 120.1 120.003C122.964 120.003 125.794 119.388 128.4 118.2L214.2 79.1999C215.974 78.4175 217.483 77.1359 218.542 75.5113C219.601 73.8868 220.165 71.9893 220.165 70.0499C220.165 68.1106 219.601 66.213 218.542 64.5885C217.483 62.9639 215.974 61.6823 214.2 60.8999L128.3 21.7999Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M72 92C71.9976 92.9563 72.2696 93.8933 72.7836 94.6997C73.2976 95.5062 74.0321 96.1483 74.9 96.55L117.9 116.1C119.196 116.687 120.602 116.99 122.025 116.99C123.448 116.99 124.854 116.687 126.15 116.1L169.05 96.6C169.935 96.2022 170.685 95.5555 171.209 94.7387C171.733 93.9219 172.008 92.9703 172 92M72 117C71.9976 117.956 72.2696 118.893 72.7836 119.7C73.2976 120.506 74.0321 121.148 74.9 121.55L117.9 141.1C119.196 141.687 120.602 141.99 122.025 141.99C123.448 141.99 124.854 141.687 126.15 141.1L169.05 121.6C169.935 121.202 170.685 120.555 171.209 119.739C171.733 118.922 172.008 117.97 172 117M126.15 42.9C124.847 42.3057 123.432 41.9982 122 41.9982C120.568 41.9982 119.153 42.3057 117.85 42.9L75 62.4C74.1127 62.7912 73.3584 63.4319 72.8288 64.2442C72.2992 65.0565 72.0172 66.0053 72.0172 66.975C72.0172 67.9446 72.2992 68.8934 72.8288 69.7057C73.3584 70.518 74.1127 71.1587 75 71.55L117.9 91.1C119.203 91.6942 120.618 92.0017 122.05 92.0017C123.482 92.0017 124.897 91.6942 126.2 91.1L169.1 71.6C169.987 71.2087 170.742 70.568 171.271 69.7557C171.801 68.9434 172.083 67.9946 172.083 67.025C172.083 66.0553 171.801 65.1065 171.271 64.2942C170.742 63.4819 169.987 62.8412 169.1 62.45L126.15 42.9Z" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M240 0V240H0V0H240ZM10 230H230V10H10V230Z" fill="#41B883" fill-opacity="0.5"/> <mask id="path-48-inside-1_1946_25482" fill="white">
<path d="M182 32V152H62V32H182ZM67 147H177V37H67V147Z"/>
</mask>
<path d="M182 32V152H62V32H182ZM67 147H177V37H67V147Z" fill="#41B883" fill-opacity="0.25"/>
<path d="M182 32H183V31H182V32ZM182 152V153H183V152H182ZM62 152H61V153H62V152ZM62 32V31H61V32H62ZM67 147H66V148H67V147ZM177 147V148H178V147H177ZM177 37H178V36H177V37ZM67 37V36H66V37H67ZM182 32H181V152H182H183V32H182ZM182 152V151H62V152V153H182V152ZM62 152H63V32H62H61V152H62ZM62 32V33H182V32V31H62V32ZM67 147V148H177V147V146H67V147ZM177 147H178V37H177H176V147H177ZM177 37V36H67V37V38H177V37ZM67 37H66V147H67H68V37H67Z" fill="#41B883" fill-opacity="0.5" mask="url(#path-48-inside-1_1946_25482)"/>
<defs> <defs>
<clipPath id="clip0_1940_21994"> <clipPath id="clip0_1946_25482">
<rect width="240" height="240" fill="white"/> <rect width="120" height="120" fill="white" transform="translate(62 32)"/>
</clipPath> </clipPath>
</defs> </defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

24
docs/images/2px-element-spacing-abrupt-cut.svg
View File

@@ -49,24 +49,24 @@
</g> </g>
<path d="M190 70H90C78.9543 70 70 78.9543 70 90V190C70 201.046 78.9543 210 90 210H190C201.046 210 210 201.046 210 190V90C210 78.9543 201.046 70 190 70Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M190 70H90C78.9543 70 70 78.9543 70 90V190C70 201.046 78.9543 210 90 210H190C201.046 210 210 201.046 210 190V90C210 78.9543 201.046 70 190 70Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30 170V50C30 39 39 30 50 30H170" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M30 170V50C30 39 39 30 50 30H170" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.5" d="M30 180C35.5228 180 40 175.523 40 170L20 170C20 175.523 24.4772 180 30 180Z" fill="#F56565"/> <path opacity="0.5" d="M30 180C35.5228 180 40 175.523 40 170L20 170C20 175.523 24.4772 180 30 180Z" fill="#DD0031"/>
<circle cx="30" cy="170" r="2" fill="#F56565"/> <circle cx="30" cy="170" r="2" fill="#DD0031"/>
<path d="M30 130L30 170" stroke="url(#paint0_linear_1939_21909)" stroke-linecap="round" stroke-linejoin="round"/> <path d="M30 130L30 170" stroke="url(#paint0_linear_1939_21909)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M170 30H130" stroke="url(#paint1_linear_1939_21909)" stroke-linecap="round" stroke-linejoin="round"/> <path d="M170 30H130" stroke="url(#paint1_linear_1939_21909)" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.5" d="M170 40C175.523 40 180 35.5228 180 30C180 24.4772 175.523 20 170 20V40Z" fill="#F56565"/> <path opacity="0.5" d="M170 40C175.523 40 180 35.5228 180 30C180 24.4772 175.523 20 170 20V40Z" fill="#DD0031"/>
<circle cx="170" cy="30" r="2" fill="#F56565"/> <circle cx="170" cy="30" r="2" fill="#DD0031"/>
<defs> <defs>
<linearGradient id="paint0_linear_1939_21909" x1="9.50077" y1="170" x2="9.50094" y2="-30" gradientUnits="userSpaceOnUse"> <linearGradient id="paint0_linear_1939_21909" x1="9.50077" y1="170" x2="9.50094" y2="-30" gradientUnits="userSpaceOnUse">
<stop stop-color="#F56565"/> <stop stop-color="#DD0031"/>
<stop offset="0.20238" stop-color="#F56565" stop-opacity="0"/> <stop offset="0.20238" stop-color="#DD0031" stop-opacity="0"/>
<stop offset="0.801339" stop-color="#F56565" stop-opacity="0"/> <stop offset="0.801339" stop-color="#DD0031" stop-opacity="0"/>
<stop offset="1" stop-color="#F56565"/> <stop offset="1" stop-color="#DD0031"/>
</linearGradient> </linearGradient>
<linearGradient id="paint1_linear_1939_21909" x1="-30" y1="9.50063" x2="170" y2="9.50081" gradientUnits="userSpaceOnUse"> <linearGradient id="paint1_linear_1939_21909" x1="-30" y1="9.50063" x2="170" y2="9.50081" gradientUnits="userSpaceOnUse">
<stop stop-color="#F56565"/> <stop stop-color="#DD0031"/>
<stop offset="0.20238" stop-color="#F56565" stop-opacity="0"/> <stop offset="0.20238" stop-color="#DD0031" stop-opacity="0"/>
<stop offset="0.801339" stop-color="#F56565" stop-opacity="0"/> <stop offset="0.801339" stop-color="#DD0031" stop-opacity="0"/>
<stop offset="1" stop-color="#F56565"/> <stop offset="1" stop-color="#DD0031"/>
</linearGradient> </linearGradient>
<clipPath id="clip0_1939_21909"> <clipPath id="clip0_1939_21909">
<rect width="240" height="240" fill="white"/> <rect width="240" height="240" fill="white"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

8
docs/images/2px-element-spacing-connected.svg
View File

@@ -53,12 +53,12 @@
<rect x="90" y="170" width="40" height="20" transform="rotate(-180 90 170)" fill="url(#paint1_linear_1939_21531)"/> <rect x="90" y="170" width="40" height="20" transform="rotate(-180 90 170)" fill="url(#paint1_linear_1939_21531)"/>
<defs> <defs>
<linearGradient id="paint0_linear_1939_21531" x1="170" y1="58.5" x2="210" y2="58.5" gradientUnits="userSpaceOnUse"> <linearGradient id="paint0_linear_1939_21531" x1="170" y1="58.5" x2="210" y2="58.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#F56565" stop-opacity="0"/> <stop stop-color="#DD0031" stop-opacity="0"/>
<stop offset="1" stop-color="#F56565" stop-opacity="0.5"/> <stop offset="1" stop-color="#DD0031" stop-opacity="0.5"/>
</linearGradient> </linearGradient>
<linearGradient id="paint1_linear_1939_21531" x1="90" y1="178.5" x2="130" y2="178.5" gradientUnits="userSpaceOnUse"> <linearGradient id="paint1_linear_1939_21531" x1="90" y1="178.5" x2="130" y2="178.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#F56565" stop-opacity="0.5"/> <stop stop-color="#DD0031" stop-opacity="0.5"/>
<stop offset="1" stop-color="#F56565" stop-opacity="0"/> <stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
</linearGradient> </linearGradient>
<clipPath id="clip0_1939_21531"> <clipPath id="clip0_1939_21531">
<rect width="240" height="240" fill="white"/> <rect width="240" height="240" fill="white"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

8
docs/images/2px-stroke-violation.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 56 KiB

12
docs/images/2px-stroke.svg
View File

@@ -1,5 +1,5 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1940_22208)"> <g clip-path="url(#clip0_1946_25847)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
@@ -48,18 +48,18 @@
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g> </g>
<path d="M220 120H195.2C190.83 119.991 186.577 121.413 183.091 124.05C179.606 126.686 177.08 130.392 175.9 134.6L152.4 218.2C152.249 218.719 151.933 219.175 151.5 219.5C151.067 219.825 150.541 220 150 220C149.459 220 148.933 219.825 148.5 219.5C148.067 219.175 147.751 218.719 147.6 218.2L92.4 21.8C92.2485 21.2807 91.9327 20.8246 91.5 20.5C91.0673 20.1754 90.5409 20 90 20C89.4591 20 88.9327 20.1754 88.5 20.5C88.0673 20.8246 87.7515 21.2807 87.6 21.8L64.1 105.4C62.9246 109.592 60.4138 113.285 56.9486 115.92C53.4835 118.555 49.2532 119.988 44.9 120H20" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M220 120H195.2C190.83 119.991 186.577 121.413 183.091 124.05C179.606 126.686 177.08 130.392 175.9 134.6L152.4 218.2C152.249 218.719 151.933 219.175 151.5 219.5C151.067 219.825 150.541 220 150 220C149.459 220 148.933 219.825 148.5 219.5C148.067 219.175 147.751 218.719 147.6 218.2L92.4 21.8C92.2485 21.2807 91.9327 20.8246 91.5 20.5C91.0673 20.1754 90.5409 20 90 20C89.4591 20 88.9327 20.1754 88.5 20.5C88.0673 20.8246 87.7515 21.2807 87.6 21.8L64.1 105.4C62.9246 109.592 60.4138 113.285 56.9486 115.92C53.4835 118.555 49.2532 119.988 44.9 120H20" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M190 110H240V130H190V110Z" fill="url(#paint0_linear_1940_22208)"/> <path d="M200 110H240V130H200V110Z" fill="url(#paint0_linear_1946_25847)"/>
<path d="M0 110H50V130H0V110Z" fill="url(#paint1_linear_1940_22208)"/> <path d="M0 110H40V130H0V110Z" fill="url(#paint1_linear_1946_25847)"/>
<defs> <defs>
<linearGradient id="paint0_linear_1940_22208" x1="264" y1="117" x2="190" y2="117" gradientUnits="userSpaceOnUse"> <linearGradient id="paint0_linear_1946_25847" x1="259.2" y1="117" x2="200" y2="117" gradientUnits="userSpaceOnUse">
<stop stop-color="#41B883"/> <stop stop-color="#41B883"/>
<stop offset="1" stop-color="#41B883" stop-opacity="0"/> <stop offset="1" stop-color="#41B883" stop-opacity="0"/>
</linearGradient> </linearGradient>
<linearGradient id="paint1_linear_1940_22208" x1="-24" y1="118.5" x2="50" y2="118.5" gradientUnits="userSpaceOnUse"> <linearGradient id="paint1_linear_1946_25847" x1="-19.2" y1="118.5" x2="40" y2="118.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#41B883"/> <stop stop-color="#41B883"/>
<stop offset="1" stop-color="#41B883" stop-opacity="0"/> <stop offset="1" stop-color="#41B883" stop-opacity="0"/>
</linearGradient> </linearGradient>
<clipPath id="clip0_1940_22208"> <clipPath id="clip0_1946_25847">
<rect width="240" height="240" fill="white"/> <rect width="240" height="240" fill="white"/>
</clipPath> </clipPath>
</defs> </defs>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

23
docs/images/centered-strokes-violation.svg
View File

@@ -52,17 +52,36 @@
<path d="M80 210H160" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M80 210H160" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M120 170V210" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M120 170V210" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="120" cy="100" r="30" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="120" cy="100" r="30" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.5" d="M240 210L0 210" stroke="#DD0031" stroke-dasharray="1 1"/>
<path d="M80 210H160" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/> <path d="M80 210H160" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.5" d="M120 240V180" stroke="#DD0031" stroke-dasharray="1 1"/>
<path d="M120 180V210" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/> <path d="M120 180V210" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
<path opacity="0.5" d="M240 20H0" stroke="#DD0031" stroke-dasharray="1 1"/> <path opacity="0.5" d="M240 20H0" stroke="#DD0031" stroke-dasharray="1 1"/>
<path opacity="0.5" d="M240 180H0" stroke="#DD0031" stroke-dasharray="1 1"/> <path opacity="0.5" d="M240 180H0" stroke="#DD0031" stroke-dasharray="1 1"/>
<path opacity="0.5" d="M9.99998 240L10 0" stroke="#DD0031" stroke-dasharray="1 1"/> <path opacity="0.5" d="M9.99998 240L10 0" stroke="#DD0031" stroke-dasharray="1 1"/>
<path opacity="0.5" d="M230 240L230 0" stroke="#DD0031" stroke-dasharray="1 1"/> <path opacity="0.5" d="M230 240L230 0" stroke="#DD0031" stroke-dasharray="1 1"/>
<path opacity="0.5" d="M120 240V180" stroke="#DD0031" stroke-dasharray="1 1"/>
<path opacity="0.5" d="M240 210L0 210" stroke="#DD0031" stroke-dasharray="1 1"/>
<path d="M210 20H30C18.9543 20 10 28.9543 10 40V160C10 171.046 18.9543 180 30 180H210C221.046 180 230 171.046 230 160V40C230 28.9543 221.046 20 210 20Z" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/> <path d="M210 20H30C18.9543 20 10 28.9543 10 40V160C10 171.046 18.9543 180 30 180H210C221.046 180 230 171.046 230 160V40C230 28.9543 221.046 20 210 20Z" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
<g filter="url(#filter0_i_1940_23370)">
<path d="M210 20H30C18.9543 20 10 28.9543 10 40V160C10 171.046 18.9543 180 30 180H210C221.046 180 230 171.046 230 160V40C230 28.9543 221.046 20 210 20Z" fill="black" fill-opacity="0.01"/>
</g>
<path d="M140 100C140 111.046 131.046 120 120 120C108.954 120 100 111.046 100 100C100 88.9543 108.954 80 120 80C131.046 80 140 88.9543 140 100Z" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/> <path d="M140 100C140 111.046 131.046 120 120 120C108.954 120 100 111.046 100 100C100 88.9543 108.954 80 120 80C131.046 80 140 88.9543 140 100Z" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M160 100C160 122.091 142.091 140 120 140C97.9086 140 80 122.091 80 100C80 77.9086 97.9086 60 120 60C142.091 60 160 77.9086 160 100Z" fill="url(#paint0_radial_1940_23370)"/>
<defs> <defs>
<filter id="filter0_i_1940_23370" x="10" y="20" width="220" height="160" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.866667 0 0 0 0 0 0 0 0 0 0.192157 0 0 0 1 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1940_23370"/>
</filter>
<radialGradient id="paint0_radial_1940_23370" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(120 100) rotate(90) scale(40)">
<stop offset="0.5" stop-color="#DD0031" stop-opacity="0"/>
<stop offset="0.5001" stop-color="#DD0031" stop-opacity="0.5"/>
<stop offset="1" stop-color="#DD0031" stop-opacity="0"/>
</radialGradient>
<clipPath id="clip0_1940_23370"> <clipPath id="clip0_1940_23370">
<rect width="240" height="240" fill="white"/> <rect width="240" height="240" fill="white"/>
</clipPath> </clipPath>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

11
docs/images/curvature-smooth.svg
View File

@@ -48,15 +48,14 @@
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g> </g>
<path d="M20 95.0004C20.0002 83.8724 23.3759 73.0062 29.6813 63.837C35.9867 54.6678 44.9252 47.627 55.3161 43.6444C65.707 39.6618 77.0616 38.9248 87.8801 41.5308C98.6987 44.1368 108.472 49.9632 115.91 58.2404C116.434 58.8005 117.067 59.2471 117.771 59.5524C118.474 59.8577 119.233 60.0152 120 60.0152C120.767 60.0152 121.526 59.8577 122.229 59.5524C122.933 59.2471 123.566 58.8005 124.09 58.2404C131.504 49.9094 141.28 44.0341 152.116 41.3964C162.952 38.7588 174.335 39.4839 184.749 43.4752C195.163 47.4666 204.114 54.5349 210.411 63.7394C216.708 72.9439 220.053 83.848 220 95.0004C220 117.9 205 135 190 150L135.08 203.13C133.217 205.27 130.919 206.99 128.34 208.173C125.762 209.357 122.96 209.979 120.123 209.997C117.285 210.015 114.476 209.429 111.883 208.278C109.289 207.127 106.97 205.437 105.08 203.32L50 150C35 135 20 118 20 95.0004Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20 95.0004C20.0002 83.8724 23.3759 73.0062 29.6813 63.837C35.9867 54.6678 44.9252 47.627 55.3161 43.6444C65.707 39.6618 77.0616 38.9248 87.8801 41.5308C98.6987 44.1368 108.472 49.9632 115.91 58.2404C116.434 58.8005 117.067 59.2471 117.771 59.5524C118.474 59.8577 119.233 60.0152 120 60.0152C120.767 60.0152 121.526 59.8577 122.229 59.5524C122.933 59.2471 123.566 58.8005 124.09 58.2404C131.504 49.9094 141.28 44.0341 152.116 41.3964C162.952 38.7588 174.335 39.4839 184.749 43.4752C195.163 47.4666 204.114 54.5349 210.411 63.7394C216.708 72.9439 220.053 83.848 220 95.0004C220 117.9 205 135 190 150L135.08 203.13C133.217 205.27 130.919 206.99 128.34 208.173C125.762 209.357 122.96 209.979 120.123 209.997C117.285 210.015 114.476 209.429 111.883 208.278C109.289 207.127 106.97 205.437 105.08 203.32L50 150C35 135 20 118 20 95.0004Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<g clip-path="url(#clip1_1936_20114)"> <path opacity="0.5" d="M20 95.0004C20.0002 83.8724 23.3759 73.0062 29.6813 63.837C35.9867 54.6678 44.9252 47.627 55.3161 43.6444C65.707 39.6618 77.0616 38.9248 87.8801 41.5308C98.6987 44.1368 108.472 49.9632 115.91 58.2404C116.434 58.8005 117.067 59.2471 117.771 59.5524C118.474 59.8577 119.233 60.0152 120 60.0152C120.767 60.0152 121.526 59.8577 122.229 59.5524C122.933 59.2471 123.566 58.8005 124.09 58.2404C131.504 49.9094 141.28 44.0341 152.116 41.3964C162.952 38.7588 174.335 39.4839 184.749 43.4752C195.163 47.4666 204.114 54.5349 210.411 63.7394C216.708 72.9439 220.053 83.848 220 95.0004C220 117.9 205 135 190 150L135.08 203.13C133.217 205.27 130.919 206.99 128.34 208.173C125.762 209.357 122.96 209.979 120.123 209.997C117.285 210.015 114.476 209.429 111.883 208.278C109.289 207.127 106.97 205.437 105.08 203.32L50 150C35 135 20 118 20 95.0004Z" stroke="#41B883" stroke-width="35" stroke-linejoin="round" stroke-dasharray="0.5 1"/>
<path opacity="0.5" d="M20 95.0004C20.0002 83.8724 23.3759 73.0062 29.6813 63.837C35.9867 54.6678 44.9252 47.627 55.3161 43.6444C65.707 39.6618 77.0616 38.9248 87.8801 41.5308C98.6987 44.1368 108.472 49.9632 115.91 58.2404C116.434 58.8005 117.067 59.2471 117.771 59.5524C118.474 59.8577 119.233 60.0152 120 60.0152C120.767 60.0152 121.526 59.8577 122.229 59.5524C122.933 59.2471 123.566 58.8005 124.09 58.2404C131.504 49.9094 141.28 44.0341 152.116 41.3964C162.952 38.7588 174.335 39.4839 184.749 43.4752C195.163 47.4666 204.114 54.5349 210.411 63.7394C216.708 72.9439 220.053 83.848 220 95.0004C220 117.9 205 135 190 150L135.08 203.13C133.217 205.27 130.919 206.99 128.34 208.173C125.762 209.357 122.96 209.979 120.123 209.997C117.285 210.015 114.476 209.429 111.883 208.278C109.289 207.127 106.97 205.437 105.08 203.32L50 150C35 135 20 118 20 95.0004Z" stroke="#F56565" stroke-width="50" stroke-linejoin="round" stroke-dasharray="1 2"/> <path d="M20 95.0004C20.0002 83.8724 23.3759 73.0062 29.6813 63.837C35.9867 54.6678 44.9252 47.627 55.3161 43.6444C65.707 39.6618 77.0616 38.9248 87.8801 41.5308C98.6987 44.1368 108.472 49.9632 115.91 58.2404C116.434 58.8005 117.067 59.2471 117.771 59.5524C118.474 59.8577 119.233 60.0152 120 60.0152C120.767 60.0152 121.526 59.8577 122.229 59.5524C122.933 59.2471 123.566 58.8005 124.09 58.2404C131.504 49.9094 141.28 44.0341 152.116 41.3964C162.952 38.7588 174.335 39.4839 184.749 43.4752C195.163 47.4666 204.114 54.5349 210.411 63.7394C216.708 72.9439 220.053 83.848 220 95.0004C220 117.9 205 135 190 150L135.08 203.13C133.217 205.27 130.919 206.99 128.34 208.173C125.762 209.357 122.96 209.979 120.123 209.997C117.285 210.015 114.476 209.429 111.883 208.278C109.289 207.127 106.97 205.437 105.08 203.32L50 150C35 135 20 118 20 95.0004Z" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
</g> <circle cx="75" cy="95" r="55" stroke="#00AAFF" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="165" cy="95" r="55" stroke="#00AAFF" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="120" cy="190" r="20" stroke="#00AAFF" stroke-linecap="round" stroke-linejoin="round"/>
<defs> <defs>
<clipPath id="clip0_1936_20114"> <clipPath id="clip0_1936_20114">
<rect width="240" height="240" fill="white"/> <rect width="240" height="240" fill="white"/>
</clipPath> </clipPath>
<clipPath id="clip1_1936_20114">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs> </defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

42
docs/images/curvature-uneven.svg
View File

@@ -47,16 +47,44 @@
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g> </g>
<path d="M190 140C204.9 125.4 215 110 220 85C220 75 214.205 56.4236 203.891 46.1091C193.576 35.7946 179.587 30 165 30C147.4 30 135 45 120 60C105 45 92.6 30 75 30C60.4131 30 46.4236 35.7946 36.1091 46.1091C25.7946 56.4236 20 75 20 85C25 110 35 125.5 50 140L104.844 194.141L105.729 195.64C105.815 195.785 105.918 195.919 106.039 196.037C113.8 203.606 126.19 203.609 133.954 196.044C134.079 195.922 134.186 195.781 134.274 195.629L134.984 194.399L190 140Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M190 150C204.9 135.4 215 120 220 95C220 85 214.205 66.4236 203.891 56.1091C193.576 45.7946 179.587 40 165 40C147.4 40 135 55 120 70C105 55 92.6 40 75 40C60.4131 40 46.4236 45.7946 36.1091 56.1091C25.7946 66.4236 20 85 20 95C25 120 35 135.5 50 150L104.844 204.141L105.729 205.64C105.815 205.785 105.918 205.919 106.039 206.037C113.8 213.606 126.19 213.609 133.954 206.044C134.079 205.922 134.186 205.781 134.274 205.629L134.984 204.399L190 150Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<g clip-path="url(#clip1_1936_20164)"> <path opacity="0.5" d="M190 150C204.9 135.4 215 120 220 95C220 85 214.205 66.4236 203.891 56.1091C193.576 45.7946 179.587 40 165 40C147.4 40 135 55 120 70C105 55 92.6 40 75 40C60.4131 40 46.4236 45.7946 36.1091 56.1091C25.7946 66.4236 20 85 20 95C25 120 35 135.5 50 150L104.844 204.141L105.729 205.64C105.815 205.785 105.918 205.919 106.039 206.037C113.8 213.606 126.19 213.609 133.954 206.044C134.079 205.922 134.186 205.781 134.274 205.629L134.984 204.399L190 150Z" stroke="#DD0031" stroke-width="35" stroke-linejoin="round" stroke-dasharray="0.5 1"/>
<path opacity="0.5" d="M190 140C204.9 125.4 215 110 220 85C220 75 214.205 56.4236 203.891 46.1091C193.576 35.7946 179.587 30 165 30C147.4 30 135 45 120 60C105 45 92.6 30 75 30C60.4131 30 46.4236 35.7946 36.1091 46.1091C25.7946 56.4236 20 75 20 85C25 110 35 125.5 50 140L104.844 194.141L105.729 195.64C105.815 195.785 105.918 195.919 106.039 196.037C113.8 203.606 126.19 203.609 133.954 196.044C134.079 195.922 134.186 195.781 134.274 195.629L134.984 194.399L190 140Z" stroke="#F56565" stroke-width="50" stroke-linejoin="round" stroke-dasharray="1 2"/> <path d="M190 150C204.9 135.4 215 120 220 95C220 85 214.205 66.4236 203.891 56.1091C193.576 45.7946 179.587 40 165 40C147.4 40 135 55 120 70C105 55 92.6 40 75 40C60.4131 40 46.4236 45.7946 36.1091 56.1091C25.7946 66.4236 20 85 20 95C25 120 35 135.5 50 150L104.844 204.141L105.729 205.64C105.815 205.785 105.918 205.919 106.039 206.037C113.8 213.606 126.19 213.609 133.954 206.044C134.079 205.922 134.186 205.781 134.274 205.629L134.984 204.399L190 150Z" stroke="#DD0031" stroke-linecap="round" stroke-linejoin="round"/>
</g> <path d="M93 40H75H60M46 46L36 56L26 66M20 85V95L25 120M35 136L50 150M106 206L114 214M126 214L134 206M190 150L205 135M215 120L220 95V85M214 66L204 56L193 46M180 40H165H147M135 55L120 70L105 55" stroke="#00AAFF" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="75" cy="40" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="36" cy="56" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="120" cy="70" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="165" cy="40" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="204" cy="56" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="220" cy="95" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="190" cy="150" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="135" cy="204" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="134" cy="206" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="105" cy="204" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="106" cy="206" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="50" cy="150" r="1.5" fill="white" stroke="#00AAFF"/>
<circle cx="20" cy="95" r="1.5" fill="white" stroke="#00AAFF"/>
<path d="M47.293 46L46 47.293L44.707 46L46 44.707L47.293 46Z" fill="white" stroke="#00AAFF"/>
<path d="M61.293 40L60 41.293L58.707 40L60 38.707L61.293 40Z" fill="white" stroke="#00AAFF"/>
<path d="M94.293 40L93 41.293L91.707 40L93 38.707L94.293 40Z" fill="white" stroke="#00AAFF"/>
<path d="M106.293 55L105 56.293L103.707 55L105 53.707L106.293 55Z" fill="white" stroke="#00AAFF"/>
<path d="M136.293 55L135 56.293L133.707 55L135 53.707L136.293 55Z" fill="white" stroke="#00AAFF"/>
<path d="M148.293 40L147 41.293L145.707 40L147 38.707L148.293 40Z" fill="white" stroke="#00AAFF"/>
<path d="M181.293 40L180 41.293L178.707 40L180 38.707L181.293 40Z" fill="white" stroke="#00AAFF"/>
<path d="M194.293 46L193 47.293L191.707 46L193 44.707L194.293 46Z" fill="white" stroke="#00AAFF"/>
<path d="M215.293 66L214 67.293L212.707 66L214 64.707L215.293 66Z" fill="white" stroke="#00AAFF"/>
<path d="M221.293 85L220 86.293L218.707 85L220 83.707L221.293 85Z" fill="white" stroke="#00AAFF"/>
<path d="M216.293 120L215 121.293L213.707 120L215 118.707L216.293 120Z" fill="white" stroke="#00AAFF"/>
<path d="M206.293 135L205 136.293L203.707 135L205 133.707L206.293 135Z" fill="white" stroke="#00AAFF"/>
<path d="M127.293 214L126 215.293L124.707 214L126 212.707L127.293 214Z" fill="white" stroke="#00AAFF"/>
<path d="M115.293 214L114 215.293L112.707 214L114 212.707L115.293 214Z" fill="white" stroke="#00AAFF"/>
<path d="M36.293 136L35 137.293L33.707 136L35 134.707L36.293 136Z" fill="white" stroke="#00AAFF"/>
<path d="M26.293 120L25 121.293L23.707 120L25 118.707L26.293 120Z" fill="white" stroke="#00AAFF"/>
<path d="M21.293 85L20 86.293L18.707 85L20 83.707L21.293 85Z" fill="white" stroke="#00AAFF"/>
<path d="M27.293 66L26 67.293L24.707 66L26 64.707L27.293 66Z" fill="white" stroke="#00AAFF"/>
<defs> <defs>
<clipPath id="clip0_1936_20164"> <clipPath id="clip0_1936_20164">
<rect width="240" height="240" fill="white"/> <rect width="240" height="240" fill="white"/>
</clipPath> </clipPath>
<clipPath id="clip1_1936_20164">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs> </defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

26
docs/images/established-shapes-base-do.svg
View File

@@ -1,14 +1,18 @@
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/> </g>
<path d="M94.5234 48V46C94.5234 45.4696 94.3127 44.9609 93.9377 44.5858C93.5626 44.2107 93.0539 44 92.5234 44C91.993 44 91.4843 44.2107 91.1092 44.5858C90.7342 44.9609 90.5234 45.4696 90.5234 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<path d="M85.0234 47H82.5234C81.4626 47 80.4452 47.4214 79.695 48.1716C78.9449 48.9217 78.5234 49.9391 78.5234 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.5">
<path d="M85.5234 43C87.7326 43 89.5234 41.2091 89.5234 39C89.5234 36.7909 87.7326 35 85.5234 35C83.3143 35 81.5234 36.7909 81.5234 39C81.5234 41.2091 83.3143 43 85.5234 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M95.6244 48H89.4224C88.9259 48 88.5234 48.4025 88.5234 48.899V52.101C88.5234 52.5975 88.9259 53 89.4224 53H95.6244C96.1209 53 96.5234 52.5975 96.5234 52.101V48.899C96.5234 48.4025 96.1209 48 95.6244 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M103.523 42.4957V40.2543H114.441V42.4957H103.523ZM103.523 47.7458V45.5043H114.441V47.7458H103.523Z" fill="#F56565"/> <path d="M92.7969 43C95.006 43 96.7969 41.2091 96.7969 39C96.7969 36.7909 95.006 35 92.7969 35C90.5877 35 88.7969 36.7909 88.7969 39C88.7969 41.2091 90.5877 43 92.7969 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122.439 41.8V36C122.439 35.4696 122.65 34.9609 123.025 34.5858C123.4 34.2107 123.909 34 124.439 34H132.439C132.756 33.9992 133.07 34.0612 133.363 34.1824C133.656 34.3036 133.922 34.4815 134.145 34.706L137.733 38.294C137.958 38.5177 138.136 38.7836 138.257 39.0764C138.378 39.3692 138.44 39.6831 138.439 40V52C138.439 52.5304 138.229 53.0391 137.854 53.4142C137.479 53.7893 136.97 54 136.439 54H133.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M102.898 48H96.6959C96.1994 48 95.7969 48.4025 95.7969 48.899V52.101C95.7969 52.5975 96.1994 53 96.6959 53H102.898C103.394 53 103.797 52.5975 103.797 52.101V48.899C103.797 48.4025 103.394 48 102.898 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M132.439 34V39C132.439 39.2652 132.545 39.5196 132.732 39.7071C132.92 39.8946 133.174 40 133.439 40H138.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
<path d="M127.439 49V47C127.439 46.4696 127.229 45.9609 126.854 45.5858C126.479 45.2107 125.97 45 125.439 45C124.909 45 124.4 45.2107 124.025 45.5858C123.65 45.9609 123.439 46.4696 123.439 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<path d="M128.439 49H122.439C121.887 49 121.439 49.4477 121.439 50V53C121.439 53.5523 121.887 54 122.439 54H128.439C128.992 54 129.439 53.5523 129.439 53V50C129.439 49.4477 128.992 49 128.439 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M136.504 41.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M141.504 49V47C141.504 46.4696 141.293 45.9609 140.918 45.5858C140.543 45.2107 140.034 45 139.504 45C138.973 45 138.465 45.2107 138.09 45.5858C137.715 45.9609 137.504 46.4696 137.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M142.504 49H136.504C135.952 49 135.504 49.4477 135.504 50V53C135.504 53.5523 135.952 54 136.504 54H142.504C143.056 54 143.504 53.5523 143.504 53V50C143.504 49.4477 143.056 49 142.504 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

26
docs/images/established-shapes-base-dont.svg
View File

@@ -1,14 +1,18 @@
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/> </g>
<path d="M94.5234 48V46C94.5234 45.4696 94.3127 44.9609 93.9377 44.5858C93.5626 44.2107 93.0539 44 92.5234 44C91.993 44 91.4843 44.2107 91.1092 44.5858C90.7342 44.9609 90.5234 45.4696 90.5234 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<path d="M85.0234 47H82.5234C81.4626 47 80.4452 47.4214 79.695 48.1716C78.9449 48.9217 78.5234 49.9391 78.5234 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.5">
<path d="M85.5234 43C87.7326 43 89.5234 41.2091 89.5234 39C89.5234 36.7909 87.7326 35 85.5234 35C83.3143 35 81.5234 36.7909 81.5234 39C81.5234 41.2091 83.3143 43 85.5234 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M95.6244 48H89.4224C88.9259 48 88.5234 48.4025 88.5234 48.899V52.101C88.5234 52.5975 88.9259 53 89.4224 53H95.6244C96.1209 53 96.5234 52.5975 96.5234 52.101V48.899C96.5234 48.4025 96.1209 48 95.6244 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M111.64 40.2539H114.441V42.4951H110.754L109.564 45.5039H114.441V47.7451H108.679L107.657 50.3281H105.33L106.352 47.7451H103.523V45.5039H107.237L108.427 42.4951H103.523V40.2539H109.312L110.333 37.6719H112.66L111.64 40.2539Z" fill="#F56565"/> <path d="M92.7969 43C95.006 43 96.7969 41.2091 96.7969 39C96.7969 36.7909 95.006 35 92.7969 35C90.5877 35 88.7969 36.7909 88.7969 39C88.7969 41.2091 90.5877 43 92.7969 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M136.441 41V36C136.441 35.4696 136.231 34.9609 135.856 34.5858C135.481 34.2107 134.972 34 134.441 34H126.441L120.441 40V52C120.441 52.5304 120.652 53.0391 121.027 53.4142C121.402 53.7893 121.911 54 122.441 54H128.441" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M102.898 48H96.6959C96.1994 48 95.7969 48.4025 95.7969 48.899V52.101C95.7969 52.5975 96.1994 53 96.6959 53H102.898C103.394 53 103.797 52.5975 103.797 52.101V48.899C103.797 48.4025 103.394 48 102.898 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M127.441 34V39C127.441 40.1046 126.546 41 125.441 41H120.441" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
<path d="M134.441 49V47C134.441 46.4696 134.652 45.9609 135.027 45.5858C135.402 45.2107 135.911 45 136.441 45C136.972 45 137.481 45.2107 137.856 45.5858C138.231 45.9609 138.441 46.4696 138.441 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<path d="M133.441 49H139.441C139.994 49 140.441 49.4477 140.441 50V53C140.441 53.5523 139.994 54 139.441 54H133.441C132.889 54 132.441 53.5523 132.441 53V50C132.441 49.4477 132.889 49 133.441 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M150.504 41V36C150.504 35.4696 150.293 34.9609 149.918 34.5858C149.543 34.2107 149.034 34 148.504 34H140.504L134.504 40V52C134.504 52.5304 134.715 53.0391 135.09 53.4142C135.465 53.7893 135.973 54 136.504 54H142.504" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M141.504 34V39C141.504 40.1046 140.608 41 139.504 41H134.504" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M148.504 49V47C148.504 46.4696 148.715 45.9609 149.09 45.5858C149.465 45.2107 149.973 45 150.504 45C151.034 45 151.543 45.2107 151.918 45.5858C152.293 45.9609 152.504 46.4696 152.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M147.504 49H153.504C154.056 49 154.504 49.4477 154.504 50V53C154.504 53.5523 154.056 54 153.504 54H147.504C146.952 54 146.504 53.5523 146.504 53V50C146.504 49.4477 146.952 49 147.504 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

28
docs/images/established-shapes-consistency-do.svg
View File

@@ -1,14 +1,18 @@
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40V45" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.5">
<path d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M47 49L52 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M46 51H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M52 49L47 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M49 48V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/> </g>
<path d="M80.5234 44H94.5234" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<path d="M87.5234 37V51" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.5">
<path d="M103.523 42.4957V40.2543H114.441V42.4957H103.523ZM103.523 47.7458V45.5043H114.441V47.7458H103.523Z" fill="#F56565"/> <path d="M100.797 38L88.7969 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M129.789 54H124.439C123.909 54 123.4 53.7893 123.025 53.4142C122.65 53.0391 122.439 52.5304 122.439 52V36C122.439 35.4696 122.65 34.9609 123.025 34.5858C123.4 34.2107 123.909 34 124.439 34H132.439C132.756 33.9992 133.07 34.0612 133.363 34.1824C133.656 34.3036 133.922 34.4815 134.145 34.706L137.733 38.294C137.958 38.5177 138.136 38.7836 138.257 39.0764C138.378 39.3692 138.44 39.6831 138.439 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M88.7969 38L100.797 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M132.439 34V39C132.439 39.2652 132.545 39.5196 132.732 39.7071C132.92 39.8946 133.174 40 133.439 40H138.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
<path d="M132.439 51H138.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<path d="M135.439 48V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M143.504 54H138.504C137.973 54 137.465 53.7893 137.09 53.4142C136.715 53.0391 136.504 52.5304 136.504 52V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V45" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M147.504 49L152.504 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M152.504 49L147.504 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

25
docs/images/established-shapes-consistency-dont.svg
View File

@@ -1,12 +1,17 @@
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40V45" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.5">
<path d="M43.35 54H38C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3169 33.9992 46.6308 34.0612 46.9236 34.1824C47.2164 34.3036 47.4823 34.4815 47.706 34.706L51.294 38.294C51.5185 38.5177 51.6964 38.7836 51.8176 39.0764C51.9388 39.3692 52.0008 39.6831 52 40V45.35" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M47 49L52 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M46 51H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M52 49L47 54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M49 48V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/> </g>
<path d="M80.5234 44H94.5234" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<path d="M87.5234 37V51" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.5">
<path d="M111.64 40.2539H114.441V42.4951H110.754L109.564 45.5039H114.441V47.7451H108.679L107.657 50.3281H105.33L106.352 47.7451H103.523V45.5039H107.237L108.427 42.4951H103.523V40.2539H109.312L110.333 37.6719H112.66L111.64 40.2539Z" fill="#F56565"/> <path d="M100.797 38L88.7969 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M130.441 54H136.441C136.972 54 137.481 53.7893 137.856 53.4142C138.231 53.0391 138.441 52.5304 138.441 52V45.35V40C138.442 39.6831 138.38 39.3692 138.259 39.0764C138.138 38.7836 137.96 38.5177 137.735 38.294L134.147 34.706C133.924 34.4815 133.658 34.3036 133.365 34.1824C133.072 34.0612 132.758 33.9992 132.441 34H124.441C123.911 34 123.402 34.2107 123.027 34.5858C122.652 34.9609 122.441 35.4696 122.441 36V46M122.441 50H126.441M126.441 50H130.441M126.441 50V46M126.441 50V54" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M88.7969 38L100.797 50" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M132.441 34V39C132.441 39.2652 132.547 39.5196 132.734 39.7071C132.922 39.8946 133.176 40 133.441 40H138.441" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
<path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<path d="M148.504 54H150.504C151.034 54 151.543 53.7893 151.918 53.4142C152.293 53.0391 152.504 52.5304 152.504 52V45.35V40C152.505 39.6831 152.443 39.3692 152.322 39.0764C152.2 38.7836 152.022 38.5177 151.798 38.294L148.21 34.706C147.986 34.4815 147.72 34.3036 147.428 34.1824C147.135 34.0612 146.821 33.9992 146.504 34H138.504C137.973 34 137.465 34.2107 137.09 34.5858C136.715 34.9609 136.504 35.4696 136.504 36V42" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M136.504 46.0016L140.502 50M140.502 50L144.501 53.9983M140.502 50L144.501 46.0016M140.502 50L136.504 53.9983" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

26
docs/images/established-shapes-sub-do.svg
View File

@@ -1,14 +1,18 @@
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/> </g>
<path d="M94.5234 48V46C94.5234 45.4696 94.3127 44.9609 93.9377 44.5858C93.5626 44.2107 93.0539 44 92.5234 44C91.993 44 91.4843 44.2107 91.1092 44.5858C90.7342 44.9609 90.5234 45.4696 90.5234 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<path d="M85.0234 47H82.5234C81.4626 47 80.4452 47.4214 79.695 48.1716C78.9449 48.9217 78.5234 49.9391 78.5234 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.5">
<path d="M85.5234 43C87.7326 43 89.5234 41.2091 89.5234 39C89.5234 36.7909 87.7326 35 85.5234 35C83.3143 35 81.5234 36.7909 81.5234 39C81.5234 41.2091 83.3143 43 85.5234 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M95.6244 48H89.4224C88.9259 48 88.5234 48.4025 88.5234 48.899V52.101C88.5234 52.5975 88.9259 53 89.4224 53H95.6244C96.1209 53 96.5234 52.5975 96.5234 52.101V48.899C96.5234 48.4025 96.1209 48 95.6244 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M103.523 42.4957V40.2543H114.441V42.4957H103.523ZM103.523 47.7458V45.5043H114.441V47.7458H103.523Z" fill="#F56565"/> <path d="M92.7969 43C95.006 43 96.7969 41.2091 96.7969 39C96.7969 36.7909 95.006 35 92.7969 35C90.5877 35 88.7969 36.7909 88.7969 39C88.7969 41.2091 90.5877 43 92.7969 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122.439 41.8V36C122.439 35.4696 122.65 34.9609 123.025 34.5858C123.4 34.2107 123.909 34 124.439 34H132.439C132.756 33.9992 133.07 34.0612 133.363 34.1824C133.656 34.3036 133.922 34.4815 134.145 34.706L137.733 38.294C137.958 38.5177 138.136 38.7836 138.257 39.0764C138.378 39.3692 138.44 39.6831 138.439 40V52C138.439 52.5304 138.229 53.0391 137.854 53.4142C137.479 53.7893 136.97 54 136.439 54H133.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M102.898 48H96.6959C96.1994 48 95.7969 48.4025 95.7969 48.899V52.101C95.7969 52.5975 96.1994 53 96.6959 53H102.898C103.394 53 103.797 52.5975 103.797 52.101V48.899C103.797 48.4025 103.394 48 102.898 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M132.439 34V39C132.439 39.2652 132.545 39.5196 132.732 39.7071C132.92 39.8946 133.174 40 133.439 40H138.439" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
<path d="M127.439 49V47C127.439 46.4696 127.229 45.9609 126.854 45.5858C126.479 45.2107 125.97 45 125.439 45C124.909 45 124.4 45.2107 124.025 45.5858C123.65 45.9609 123.439 46.4696 123.439 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M124.504 47.145H114.797V45.7388H124.504V47.145ZM124.504 42.2612H114.797V40.855H124.504V42.2612Z" fill="black"/>
<path d="M128.439 49H122.439C121.887 49 121.439 49.4477 121.439 50V53C121.439 53.5523 121.887 54 122.439 54H128.439C128.992 54 129.439 53.5523 129.439 53V50C129.439 49.4477 128.992 49 128.439 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M136.504 41.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M141.504 49V47C141.504 46.4696 141.293 45.9609 140.918 45.5858C140.543 45.2107 140.034 45 139.504 45C138.973 45 138.465 45.2107 138.09 45.5858C137.715 45.9609 137.504 46.4696 137.504 47V49" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M142.504 49H136.504C135.952 49 135.504 49.4477 135.504 50V53C135.504 53.5523 135.952 54 136.504 54H142.504C143.056 54 143.504 53.5523 143.504 53V50C143.504 49.4477 143.056 49 142.504 49Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

21
docs/images/established-shapes-sub-dont.svg
View File

@@ -1,11 +1,16 @@
<svg width="175" height="88" viewBox="0 0 175 88" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="189" height="88" viewBox="0 0 189 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M38 54C37.4696 54 36.9609 53.7893 36.5858 53.4142C36.2107 53.0391 36 52.5304 36 52V36C36 35.4696 36.2107 34.9609 36.5858 34.5858C36.9609 34.2107 37.4696 34 38 34H46C46.3166 33.9995 46.6301 34.0616 46.9225 34.1828C47.215 34.3039 47.4806 34.4818 47.704 34.706L51.292 38.294C51.5168 38.5175 51.6952 38.7833 51.8167 39.0762C51.9382 39.369 52.0005 39.683 52 40V52C52 52.5304 51.7893 53.0391 51.4142 53.4142C51.0391 53.7893 50.5304 54 50 54H38Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M46 34V39C46 39.2652 46.1054 39.5196 46.2929 39.7071C46.4804 39.8946 46.7348 40 47 40H52" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M66.9033 42.8501H71.5225V45.1421H66.9033V49.7612H64.6104V45.1421H60V42.8501H64.6104V38.2388H66.9033V42.8501Z" fill="#F56565"/> </g>
<path d="M94.5234 48V46C94.5234 45.4696 94.3127 44.9609 93.9377 44.5858C93.5626 44.2107 93.0539 44 92.5234 44C91.993 44 91.4843 44.2107 91.1092 44.5858C90.7342 44.9609 90.5234 45.4696 90.5234 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.3" d="M70.127 43.2749H74.7979V44.7241H70.127V49.395H68.6699V44.7241H64V43.2749H68.6699V38.605H70.127V43.2749Z" fill="black"/>
<path d="M85.0234 47H82.5234C81.4626 47 80.4452 47.4214 79.695 48.1716C78.9449 48.9217 78.5234 49.9391 78.5234 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <g opacity="0.5">
<path d="M85.5234 43C87.7326 43 89.5234 41.2091 89.5234 39C89.5234 36.7909 87.7326 35 85.5234 35C83.3143 35 81.5234 36.7909 81.5234 39C81.5234 41.2091 83.3143 43 85.5234 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M101.797 48V46C101.797 45.4696 101.586 44.9609 101.211 44.5858C100.836 44.2107 100.327 44 99.7969 44C99.2664 44 98.7577 44.2107 98.3827 44.5858C98.0076 44.9609 97.7969 45.4696 97.7969 46V48" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M95.6244 48H89.4224C88.9259 48 88.5234 48.4025 88.5234 48.899V52.101C88.5234 52.5975 88.9259 53 89.4224 53H95.6244C96.1209 53 96.5234 52.5975 96.5234 52.101V48.899C96.5234 48.4025 96.1209 48 95.6244 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M92.2969 47H89.7969C88.736 47 87.7186 47.4214 86.9684 48.1716C86.2183 48.9217 85.7969 49.9391 85.7969 51V53" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M111.64 40.2539H114.441V42.4951H110.754L109.564 45.5039H114.441V47.7451H108.679L107.657 50.3281H105.33L106.352 47.7451H103.523V45.5039H107.237L108.427 42.4951H103.523V40.2539H109.312L110.333 37.6719H112.66L111.64 40.2539Z" fill="#F56565"/> <path d="M92.7969 43C95.006 43 96.7969 41.2091 96.7969 39C96.7969 36.7909 95.006 35 92.7969 35C90.5877 35 88.7969 36.7909 88.7969 39C88.7969 41.2091 90.5877 43 92.7969 43Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122.441 37.8V36C122.441 35.4696 122.652 34.9609 123.027 34.5858C123.402 34.2107 123.911 34 124.441 34H132.441M132.441 34C132.758 33.9992 133.072 34.0612 133.365 34.1824C133.658 34.3036 133.924 34.4815 134.147 34.706L137.735 38.294C137.96 38.5177 138.138 38.7836 138.259 39.0764C138.38 39.3692 138.442 39.6831 138.441 40M132.441 34V39C132.441 39.2652 132.547 39.5196 132.734 39.7071C132.922 39.8946 133.176 40 133.441 40H138.441M138.441 40V52C138.441 52.5304 138.231 53.0391 137.856 53.4142C137.481 53.7893 136.972 54 136.441 54H133.441M128.441 46V44C128.441 42.3432 127.098 41 125.441 41C123.785 41 122.441 42.3432 122.441 44V46M128.441 46H122.441M128.441 46C129.546 46 130.441 46.8954 130.441 48V52C130.441 53.1046 129.546 54 128.441 54H122.441C121.337 54 120.441 53.1046 120.441 52V48C120.441 46.8954 121.337 46 122.441 46M125.441 50V50.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M102.898 48H96.6959C96.1994 48 95.7969 48.4025 95.7969 48.899V52.101C95.7969 52.5975 96.1994 53 96.6959 53H102.898C103.394 53 103.797 52.5975 103.797 52.101V48.899C103.797 48.4025 103.394 48 102.898 48Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path opacity="0.3" d="M121.666 40.8555H124.504V42.2617H121.095L119.682 45.7393H124.504V47.1455H119.11L117.84 50.2725H116.374L117.645 47.1455H114.797V45.7393H118.216L119.629 42.2617H114.797V40.8555H120.2L121.471 37.7275H122.937L121.666 40.8555Z" fill="black"/>
<path d="M136.504 37.8V36C136.504 35.4696 136.715 34.9609 137.09 34.5858C137.465 34.2107 137.973 34 138.504 34H146.504M146.504 34C146.821 33.9992 147.135 34.0612 147.428 34.1824C147.72 34.3036 147.986 34.4815 148.21 34.706L151.798 38.294C152.022 38.5177 152.2 38.7836 152.322 39.0764C152.443 39.3692 152.505 39.6831 152.504 40M146.504 34V39C146.504 39.2652 146.609 39.5196 146.797 39.7071C146.984 39.8946 147.239 40 147.504 40H152.504M152.504 40V52C152.504 52.5304 152.293 53.0391 151.918 53.4142C151.543 53.7893 151.034 54 150.504 54H147.504" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M142.504 46V44C142.504 42.3431 141.161 41 139.504 41C137.847 41 136.504 42.3431 136.504 44V46M142.504 46H136.504M142.504 46C143.608 46 144.504 46.8954 144.504 48V52C144.504 53.1046 143.608 54 142.504 54H136.504C135.399 54 134.504 53.1046 134.504 52V48C134.504 46.8954 135.399 46 136.504 46M139.504 50V50.01" stroke="#DD0031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

48
docs/images/pixel-perfection-bad.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 98 KiB

39
docs/images/pixel-perfection-ideal.svg
View File

@@ -1,10 +1,10 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 40H240V60H0V40Z" fill="url(#paint0_linear_1936_20350)"/> <path d="M0 40H240V60H0V40Z" fill="#41B883" fill-opacity="0.2"/>
<path d="M230 0L230 240L210 240L210 -8.74228e-07L230 0Z" fill="url(#paint1_linear_1936_20350)"/> <path d="M230 0L230 240L210 240L210 -8.74228e-07L230 0Z" fill="#41B883" fill-opacity="0.2"/>
<path d="M30 0L30 240L9.99999 240L10 -8.74228e-07L30 0Z" fill="url(#paint2_linear_1936_20350)"/> <path d="M30 0L30 240L9.99999 240L10 -8.74228e-07L30 0Z" fill="#41B883" fill-opacity="0.2"/>
<path d="M240.009 110L0.00878906 110L0.00879081 90L240.009 90L240.009 110Z" fill="url(#paint3_linear_1936_20350)"/> <path d="M240.009 110L0.00878906 110L0.00879081 90L240.009 90L240.009 110Z" fill="#41B883" fill-opacity="0.2"/>
<path d="M240.009 200L0.00878906 200L0.00879081 180L240.009 180L240.009 200Z" fill="url(#paint4_linear_1936_20350)"/> <path d="M240.009 200L0.00878906 200L0.00879081 180L240.009 180L240.009 200Z" fill="#41B883" fill-opacity="0.2"/>
<g clip-path="url(#clip0_1936_20350)"> <g clip-path="url(#clip0_1948_26079)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/> <path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
@@ -54,32 +54,7 @@
</g> </g>
<path d="M175 190H89.9996C77.0183 189.997 64.2936 186.384 53.2474 179.565C42.2013 172.746 33.2689 162.989 27.4484 151.386C21.6279 139.783 19.1486 126.79 20.2876 113.858C21.4266 100.927 26.1389 88.5671 33.8981 78.1598C41.6573 67.7526 52.1576 59.7079 64.2257 54.9249C76.2937 50.1418 89.4541 48.8087 102.236 51.0747C115.018 53.3406 126.918 59.1162 136.607 67.7561C146.296 76.396 153.391 87.5598 157.1 100H175C186.934 100 198.38 104.741 206.819 113.18C215.259 121.619 220 133.065 220 145C220 156.935 215.259 168.381 206.819 176.82C198.38 185.259 186.934 190 175 190Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/> <path d="M175 190H89.9996C77.0183 189.997 64.2936 186.384 53.2474 179.565C42.2013 172.746 33.2689 162.989 27.4484 151.386C21.6279 139.783 19.1486 126.79 20.2876 113.858C21.4266 100.927 26.1389 88.5671 33.8981 78.1598C41.6573 67.7526 52.1576 59.7079 64.2257 54.9249C76.2937 50.1418 89.4541 48.8087 102.236 51.0747C115.018 53.3406 126.918 59.1162 136.607 67.7561C146.296 76.396 153.391 87.5598 157.1 100H175C186.934 100 198.38 104.741 206.819 113.18C215.259 121.619 220 133.065 220 145C220 156.935 215.259 168.381 206.819 176.82C198.38 185.259 186.934 190 175 190Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<defs> <defs>
<linearGradient id="paint0_linear_1936_20350" x1="120" y1="40" x2="120" y2="60" gradientUnits="userSpaceOnUse"> <clipPath id="clip0_1948_26079">
<stop stop-color="#41B883" stop-opacity="0.5"/>
<stop offset="0.499255" stop-color="#41B883" stop-opacity="0.33"/>
<stop offset="1" stop-color="#41B883" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="paint1_linear_1936_20350" x1="230" y1="120" x2="210" y2="120" gradientUnits="userSpaceOnUse">
<stop stop-color="#41B883" stop-opacity="0.5"/>
<stop offset="0.499255" stop-color="#41B883" stop-opacity="0.33"/>
<stop offset="1" stop-color="#41B883" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="paint2_linear_1936_20350" x1="30" y1="120" x2="9.99999" y2="120" gradientUnits="userSpaceOnUse">
<stop stop-color="#41B883" stop-opacity="0.5"/>
<stop offset="0.499255" stop-color="#41B883" stop-opacity="0.33"/>
<stop offset="1" stop-color="#41B883" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="paint3_linear_1936_20350" x1="120.009" y1="110" x2="120.009" y2="90" gradientUnits="userSpaceOnUse">
<stop stop-color="#41B883" stop-opacity="0.5"/>
<stop offset="0.499255" stop-color="#41B883" stop-opacity="0.33"/>
<stop offset="1" stop-color="#41B883" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="paint4_linear_1936_20350" x1="120.009" y1="200" x2="120.009" y2="180" gradientUnits="userSpaceOnUse">
<stop stop-color="#41B883" stop-opacity="0.5"/>
<stop offset="0.499255" stop-color="#41B883" stop-opacity="0.33"/>
<stop offset="1" stop-color="#41B883" stop-opacity="0.5"/>
</linearGradient>
<clipPath id="clip0_1936_20350">
<rect width="240" height="240" fill="white"/> <rect width="240" height="240" fill="white"/>
</clipPath> </clipPath>
</defs> </defs>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

65
docs/images/pixel-perfection-subelement-do.svg Normal file
View File

@@ -0,0 +1,65 @@
<svg width="240" height="240" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1936_20350)">
<path d="M0 10H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M10 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 20H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M20 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 30H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M30 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 40H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M40 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 50H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M50 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 60H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M60 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 70H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M70 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 80H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M80 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 90H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M90 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 100H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M100 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 110H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M110 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 120H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M120 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 130H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M130 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 140H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M140 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 150H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M150 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 160H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M160 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 170H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M170 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 180H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M180 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 190H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M190 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 200H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M200 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 210H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M210 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 220H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M220 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M0 230H240" stroke="#D8D8D9" stroke-width="0.5"/>
<path d="M230 0V240" stroke="#D8D8D9" stroke-width="0.5"/>
</g>
<g clip-path="url(#clip1_1936_20350)">
<path d="M20 210C19.9992 194.603 24.4413 179.533 32.7935 166.598C41.1456 153.664 53.0527 143.414 67.086 137.08C81.1193 130.745 96.6824 128.595 111.908 130.886C127.133 133.178 141.373 139.815 152.92 150" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M100 130C127.614 130 150 107.614 150 80C150 52.3858 127.614 30 100 30C72.3858 30 50 52.3858 50 80C50 107.614 72.3858 130 100 130Z" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M190 160V220M220 190H160" stroke="black" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M190 160V220M220 190H160" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
<rect opacity="0.5" x="140" y="140" width="100" height="100" rx="10" stroke="#41B883" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_1936_20350">
<rect width="240" height="240" fill="white"/>
</clipPath>
<clipPath id="clip1_1936_20350">
<rect width="240" height="240" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

64
docs/images/pixel-perfection-subelement-dont.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB