ilusha/imgui
1
0
Fork 0
mirror of https://github.com/ocornut/imgui.git synced 2026-09-26 16:05:45 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finished rest of the doc 

- finished the rest of the methods
- updated text in images to be text
- combined migration examples to be more vertical
Mikko Mononen 2026-05-28 21:18:21 +03:00 • committed by ocornut
parent 2593ee5c05
commit 19c528f3e8
33 changed files with 770 additions and 583 deletions
Download patch file Download diff file Expand all files Collapse all files

260
Draw-List.md

@ -111,36 +111,35 @@ When switching from legacy AddLine() values to `AddLineV()`/`AddLineH()` you can
If you have lines that form a continuous shape use the Path functions or `AddPolyline()` instead. They will handle the joins between the lines. They both support `ImDrawFlags_Closed` which will closes the shape by creating a segment automatically between first and last point.
![Line 0](drawlist/line_0.svg)
```
AddLine({ 1,2 }, { 5,2 })
A, B) AddLine({ 1,2 }, { 5,2 })
```
**Before**: 0.5px offset, no AA line ends. The start pixel is covered due to the rasterization filling rules, and the end pixel is not for same reason.
![Line 0](drawlist/line_0.svg)
**After**: Offset is removed so the line is centered around the input coordinates. Existing uses will appear blurred since the only half of the pixels are covered.
![Line 1](drawlist/line_1.svg)
**FIXME: Missing a "after" AddLine() example that looks correct, even if also suggesting to use AddLineH().**
```
AddLine({ 1.5,2.5 }, { 5.5,2.5 })
C) AddLine({ 1.5,2.5 }, { 5.5,2.5 })
```
**After**: If we were to add the 0.5px offset back, then then the line would look crisp as before, but the line ends were blurred, since the line covers only half a pixel on each end.
![Line 2](drawlist/line_2.svg)
```
AddLineH( {1,5}, 2)
D) AddLine({ 1,2.5 }, { 5,2.5 })
```
**Migration**: Horizontal and vertical lines are recommended to be replaced with `AddLineH()` and `AddLineV()`. Other use cases might require tweaking. Some use cases we've had to fix already compensated for the 0.5px offset, which can now be removed. Stroke position `ImDrawFlags_StrokeLegacy` can be used in cases which are deemed too tricky to fix, and old behavior should be used.
**Migration**: The line should cover the pixel we want to fill fully. One way to do that is to draw horizontal lines offset by half the thickness. In this case the thickness is 1, so we offset by 0.5px.
![Line 3](drawlist/line_3.svg)
```
E) AddLineH( {1,5}, 2)
```
**Migration**: Offsetting the lines can be tedious and a simpler way is to use the stroke offset. You can draw the line using “stroke position = inside”. Then the stroke is expanded to just one side of the line, which allows you to use nice round numbers for defining the geometry, and any integer thickness will look crisp.
</details>
@ -161,21 +160,18 @@ Optimized rendering is used, if the horizontal line is drawn on integer coordina
`AddLineH()` used to be implemented similarly as `AddLine()` and had the same 0.5px offset and missing anti-aliased end caps.
![LineH 0](drawlist/lineh_0.svg)
```
AddLineH( {1,5}, 2)
A, B) AddLineH( {1,5}, 2)
```
**Before**:
0.5px offset, no AA line ends. The start pixel is covered due to the rasterization filling rules, and the end pixel is not for same reason.
![LineH 0](drawlist/lineh_0.svg)
**After**:
The default stroke position for `AddLineH()` is **Inside**, which means that 1px lines will look the same as before, and thicker lines will grow below the specified line.
![LineH 1](drawlist/lineh_1.svg)
</details>
### `AddLineV(x, min_y, max_y, col, thickness, flags)`
@ -195,20 +191,18 @@ Optimized rendering is used, if the vertical line is drawn on integer coordinate
`AddLineV()` used to have the same 0.5px offset as AddLine(). The offset was removed,.
![LineV 0](drawlist/linev_0.svg)
```
AddLineV(2, {1,5})
A, B) AddLineV(2, {1,5})
```
**Before**:
0.5px offset, no AA line ends
The start pixel is covered due to the rasterization filling rules, and the end pixel is not for same reason.
![LineV 0](drawlist/linev_0.svg)
**After**:
The default stroke position for `AddLineV()` is "inside", which means that 1px lines will look the same as before, and thicker lines will grow below the specified line.
![LineV 1](drawlist/linev_1.svg)
The default stroke position for `AddLineV()` is **Inside**, which means that 1px lines will look the same as before, and thicker lines will grow below the specified line.
</details>
@ -253,18 +247,18 @@ As the offset was fixed, thicker lines would still render with that half pixel o
The 0.5px offset is now removed, and the user can use the stroke position to place the stroke inside, center, outside of the shape, inside being the default.
![Rect 0](drawlist/rect_0.svg)
```
AddRect({ 1,1 }, { 7,7 }, 1)
AddRect({ 2,2 }, { 6,6 }, 2)
A) AddRect({ 1,1 }, { 7,7 }, 1)
B) AddRect({ 2,2 }, { 6,6 }, 2)
```
**Before**:
Fixed 0.5px offset on all thickness. This resulted blurred lines on even thicknesses.
![Rect 0](drawlist/rect_0.svg) ![Rect 1](drawlist/rect_1.svg)
```
AddRect({ 2,2 }, { 6,6 }, 2)
C) AddRect({ 2,2 }, { 6,6 }, 2)
```
**Migration**:
@ -272,8 +266,6 @@ By default, the stroke is placed inside the shape.
The uses of `AddRect()` that use 1px thickness will work as before.
Other uses of `AddRect()` should be reviewed to see if the intended use was to draw the stroke at center or inside of the shape.
![Rect 2](drawlist/rect_2.svg)
</details>
### `AddRectFilled(p_min, p_max, col, rounding, flags)`
@ -289,20 +281,18 @@ Optimized rendering is used when the coordinates are integer, and rounding is sm
`AddRectFilled()` used to always draw non-rounded rectangle without anti-aliasing. Now it renders with anti-aliasing. The optimized rendering case for integer coords matches the previous non-AA rendering.
![Rect Filled 0](drawlist/rect_filled_0.svg)
```
AddRectFilled({ 1,1 }, {7,4.5} )
A,B) AddRectFilled({ 1,1 }, {7,4.5} )
```
**Before**:
Non-rounded rectangles did not have anti-aliasing.
![Rect Filled 0](drawlist/rect_filled_0.svg)
**After**:
Rectangles which are draw on non-integer coordinates are anti-aliased.
![Rect Filled 1](drawlist/rect_filled_1.svg)
</details>
@ -312,7 +302,9 @@ Rectangles which are draw on non-integer coordinates are anti-aliased.
![Circle](drawlist/circle_basics.svg)
Draws stroked circle at **center** using **radius**, with specified color and thickness. The default thickness is **1.0**, and default stroke position is **Inside**. Stroke Position flags can be used.
Draws stroked circle at **center** using **radius**, with specified color, segment count, and thickness.
The default segment count is **0** (calculate count automatically based on radius), thickness is **1.0**, and default stroke position is **Inside**. Stroke Position flags can be used.
The rendering code handles corners cases robustly, like stroke thickness that would completely cover the inside of the shape will fallback to rendering to filled circle instead.
@ -339,7 +331,7 @@ Draws filled circle at **center** using **radius**, with specified color.
Draws stroked ellipse at **center** using **radius** (separate for x, y), with specified rotation, color, segment count and thickness.
The default rotation is *0*, segment count is *0* (calculate count automatically based on radius), default thickness is **1.0**, and default stroke position is **Inside**. Stroke Position flags can be used.
The default rotation is **0**, segment count is *0* (calculate count automatically based on radius), default thickness is **1.0**, and default stroke position is **Inside**. Stroke Position flags can be used.
Stroked ellipse drawing is more complicated than other shapes and it does not handle all degenerate inputs, like thick thickness compared to ellipse size, as well as other shapes.
@ -362,7 +354,7 @@ Draws filled ellipse at **center** using **radius** (separate for x, y), with sp
The default rotation is *0*, segment count is *0* (calculate count automatically based on radius).
## N-Gons
## Polygons
### `AddNgon(center, radius, col, num_segments, thickness, flags)`
@ -392,13 +384,52 @@ The 0.5px offset is now removed, and the user can use the stroke position to pla
Draws filled regular polygon at **center** using circumcircle **radius**, with specified color, and segment count.
### `AddQuad(p1, p2, p3, p4, col, thickness, flags)`
![Quad polygon](drawlist/quad_basics.svg)
Draws arbitrary stroked quad (4 cornered closed polyline) described by **p1**, **p2**, **p3**, **p4**, with specified color, and thickness.
The default thickness is **1.0**, and default stroke position is **Inside**. Stroke Position flags can be used.
The points should be wound counter clockwise and should not self-intersect. Internally calls `AddPolyline()`, see the method for more information.
### `AddQuadFilled(p1, p2, p3, p4, col)`
Draws arbitrary filled quad (4 cornered polygon) described by **p1**, **p2**, **p3**, **p4**, with specified color.
The points should be wound counter clockwise and should not self-intersect. Internally calls `AddConvexPolyFilled()`, see the method for more information.
### `AddTriangle(p1, p2, p3, col, thickness, flags)`
![Triangle polygon](drawlist/triangle_basics.svg)
Draws arbitrary stroked triangle (3 cornered closed polyline) described by **p1**, **p2**, **p3**, with specified color, and thickness.
The default thickness is **1.0**, and default stroke position is **Inside**. Stroke Position flags can be used.
The points should be wound counter clockwise. Internally calls `AddPolyline()`, see the method for more information.
### `AddTriangleFilled(p1, p2, p3, col)`
Draws arbitrary filled triangle (3 cornered polygon) described by **p1**, **p2**, **p3**, with specified color.
The points should be wound counter clockwise. Internally calls `AddPolyline()`, see the method for more information.
## General Polygons
### `AddPolyline(points, num_points, col, thickness, flags)`
![Polyline](drawlist/polyline_basics.svg)
Draws stroked polyline described by **points** and **num_points**, with specified color, and thickness. Stroke Position and Stroke Options flags can be used.
Draws stroked polyline described by **points** and **num_points**, with specified color, and thickness.
The default thickness is **1.0**, and default stroke position is **Center**. Stroke Position and Stroke Options flags can be used.
![Polyline 0](drawlist/polyline_0.svg)
@ -442,7 +473,7 @@ Swapped the trailing parameters `flags` and `thickness`. See `AddRect()` section
The algorithm to render lines got overhauled.
![Polyline 0](drawlist/polyline_0.svg)
![Polyline 0](drawlist/polyline_1.svg)
Previous the polyline rendering would expand the stroke along the normal at each polyline vertex. This caused inconsistent line width, which very noticeable when the polyline has sharper corners.
@ -452,9 +483,11 @@ The line ends are now anti-aliased. This solves missing pixels at line ends and
### `AddConvexPolyFilled(points, num_points, col)`
Draws filled polygon described by **points** and **num_points**, with specified color. Stroke Options flags can be used.
![Convex poly](drawlist/convex_polygon_basics.svg)
The polygon must be wound in clock wise order.
Draws convex filled polygon described by **points** and **num_points**, with specified color.
The polygon must be wound in clock wise order, the shape must be convex and does not have self-intersections.
The rendering expands small faded fringe around the polygon for anti-aliasing. To keep the expansion robust, the polygon rendering bevels really sharp corners, and clamps long miters in inner corners. As the fringe is 1px wide, it can cause issues when trying to render long thin polygons whose smallest extent is less than 1px.
@ -471,77 +504,142 @@ The rendering of sharp corners was improved. Earlier there were issues with shar
</details>
---
---
---
### `AddConcavePolyFilled(points, num_points, col)`
![Concave poly](drawlist/concave_polygon_basics.svg)
### `AddQuad(p1, p2, p3, p4, col, thickness)`
Draws filled polygon described by **points** and **num_points**, with specified color. Stroke Options flags can be used.
![Quad polygon](drawlist/quad_basics.svg)
The polygon must be wound in clock wise order and does not have self-intersections.
Works as before. Support for stroke position was added. Fixes and improvements to `AddPolyline()` also apply.
### `AddQuadFilled(p1, p2, p3, p4, col)`<BR>`AddTriangleFilled(p1, p2, p3, col)`
Works as before. Fixes and improvements to `AddConvexPolyFilled()` for sharp corners also apply.
The concave polygon fill is more expensive than convex one: it has O(N^2) complexity. Provided as a convenience for the user but not used by the main library.
### `AddTriangle(p1, p2, p3, col, thickness)`
## Curves
![Triangle polygon](drawlist/triangle_basics.svg)
Works as before. Support for stroke position was added. Fixes and improvements to `AddPolyline()` also apply.
### `AddTriangleFilled(p1, p2, p3, col)`<BR>`AddTriangleFilled(p1, p2, p3, col)`
Works as before. Fixes and improvements to `AddConvexPolyFilled()` for sharp corners also apply.
### `AddBezierCubic(p1, p2, p3, p4, col, thickness, num_segments)`
### `AddBezierCubic(p1, p2, p3, p4, col, thickness, num_segments, flags)`
![Cubic Bezier](drawlist/bezier_cubic_basics.svg)
Works as before. Support for stroke position was added. Fixes and improvements to `AddPolyline()` also apply.
Draws stroked cubic bezier curve described by **p1**, **p2**, **p3**, and **p4**, with specified color, thickness, and segment count.
The default thickness is **1.0**, default segment count is **0** (automatic based on error tolerance), and default stroke position is **Center**. Stroke Position and Stroke Options flags can be used.
### `AddBezierQuadratic(p1, p2, p3, col, thickness, num_segments)`
### `AddBezierQuadratic(p1, p2, p3, col, thickness, num_segments, flags)`
![Quadratic Bezier](drawlist/bezier_quad_basics.svg)
Works as before. Support for stroke position was added. Fixes and improvements to `AddPolyline()` also apply.
Draws stroked quadratic bezier curve described by **p1**, **p2**, and **p3**, with specified color, thickness, and segment count.
The default thickness is **1.0**, default segment count is **0** (automatic based on error tolerance), and default stroke position is **Center**. Stroke Position and Stroke Options flags can be used.
## Images and Gradients
### `AddImageRounded(tex_ref, p_min, p_max, uv_min, uv_max, col, rounding, flags)`
Works as before.
Draws rectangle filled with image **ref_ref** from **p_min** (top-left) to **p_max** ( bottom-right), with specified input image UV-coordinates, color, and rounding.
### `AddImage(tex_ref, p_min, p_max, uv_min, uv_max, col)`
Draws rectangle filled with image **ref_ref** from **p_min** (top-left) to **p_max** ( bottom-right), with specified input image UV-coordinates, and color.
The default UV-coordinates are **(0,0) - (1,1)** (the whole input image).
Note: The method renders the image without anti-aliasing.
### `AddImageQuad(tex_ref, p1, p2, p3, p4, uv1, uv2, uv3, uv4, col)`
Draws quad (4 cornered polygon) filled with image **ref_ref** described by **p1**, **p2**, **p3**, **p4**, with specified input image UV-coordinates, and color.
The points should be wound counter clockwise and should not self-intersect.
Note: The method renders the image without anti-aliasing.
### `AddRectFilledMultiColor(p_min, p_max, col_upr_left, col_upr_right, col_bot_right, col_bot_left)`
Works as before. Note: does not support anti-aliasing when non-integer coordinates are passed.
Draws filled multi-colored rectangle **p_min** (top-left) to **p_max** ( bottom-right), with specified specified colors.
Note: The method renders the image without anti-aliasing.
## Paths
The path rendering has stateful API which allows to stage a path one part at a time, and methods that strokes or fills the currently staged path.
**Important**: filled shapes must always use clockwise winding order! The anti-aliasing depends on it. Counter-clockwise shapes will have "inward" anti-aliasing.
So e.g. `PathArcTo(center, radius, PI * -0.5f, PI)` is ok, whereas `PathArcTo(center, radius, PI, PI * -0.5f)` won't have correct anti-aliasing when followed by `PathFillConvex()`.
### `PathClear()`
Clears the currently staged path.
### `PathLineTo(pos)`
Adds point **pos** to the currently staged path. If called on empty path, defines the start of the path.
### `PathLineToMergeDuplicate(pos)`
Adds point **pos** to the currently staged path, if the point is different than the previous one or path is empty.
### `PathArcTo(center, radius, a_min, a_max, num_segments)`
Adds arc segment to the path, centered at **center**, using **radius**, sweeping from **a_min** to **a_max**, with specified number of segments.
The angle is clockwise, 0 degrees at 3 o'clock.
The default segment count is *0* (calculate count automatically based on radius).
### `PathArcToFast(center, radius, a_min_of_12, a_max_of_12)`
Adds arc segment to the path, centered at **center**, using **radius**, sweeping from **a_min_of_12** to **a_max_of_12**.
The angle is clockwise, one of the 12 angles (0-360), 0 degrees at 3 o'clock.
The function uses pre calculated angles, and does not call expensive sin/cos. The number of segments is calculated automatically based on radius.
### `PathEllipticalArcTo(center, radius, rot, a_min, a_max, num_segments)`
Adds elliptic arc segment at **center** using **radius** (separate for x, y), with rotation, sweeping from **a_min** to **a_max**, with specified number of segments..
The angle is clockwise, 0 degrees at 3 o'clock.
The default segment count is *0* (calculate count automatically based on radius).
### `PathBezierCubicCurveTo(p2, p3, p4, num_segments)`
Adds cubic bezier curve described by *last path point*, **p2**, **p3**, and **p4**, with specified number of segments..
The default segment count is *0* (calculate count automatically based on curvature).
### `PathBezierQuadraticCurveTo(p2, p3, num_segments)`
Adds quadratic bezier curve described by *last path point*, **p2**, and **p3**, with specified number of segments..
The default segment count is *0* (calculate count automatically based on curvature).
### `PathRect(rect_min, rect_max, rounding, flags)`
Adds rectangle from **p_min** (top-left) to **p_max** ( bottom-right), rounding.
The default rounding is **0.0**. Corner Rounding flags can be used.
Corner rounding is clamped to fit inside the rectangle bounds.
### `PathStroke(col, thickness, flags)`
Works as before. Support for stroke position was added. Fixes and improvements to `AddPolyline()` also apply.
### `PathFillConcave(col)`
Works as before.
Strokes the staged path using `AddPolyline()` and clears the path. See `AddPolyline()` for more information.
### `PathFillConvex(col)`
Works as before. The general improvements to `AddConvexPolyFilled()` apply to the convex filled path too.
Fills the staged path using `AddConvexPolyFilled()` and clears the path. See `AddConvexPolyFilled()` for more information.
### `PathFillConcave(col)`
Fills the staged path using `AddConcavePolyFilled()` and clears the path. See `AddConcavePolyFilled()` for more information.

12
drawlist/bezier_cubic_basics.svg

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

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Before After
Before After

10
drawlist/bezier_quad_basics.svg

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

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Before After
Before After

8
drawlist/circle_basics.svg

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

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

18
drawlist/comcave_polygon_basics.svg Normal file

@ -0,0 +1,18 @@
<svg width="400" height="300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="300" fill="white"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="75" y="284.547">points[3]</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="220" y="28.5469">points[1]</tspan></text>
<circle cx="249" cy="58.6367" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="12" y="81.5469">points[0]</tspan></text>
<circle cx="73" cy="106.637" r="8" fill="#B3B3B3" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M87.9098 100.498C86.8442 100.788 86.2159 101.888 86.5065 102.953C86.7971 104.019 87.8966 104.647 88.9623 104.357L88.436 102.427L87.9098 100.498ZM234.818 63.9708C235.366 63.0118 235.033 61.79 234.073 61.242L218.445 52.3115C217.486 51.7635 216.264 52.0967 215.716 53.0557C215.168 54.0148 215.502 55.2365 216.461 55.7845L230.352 63.7227L222.414 77.6146C221.866 78.5736 222.199 79.7954 223.158 80.3434C224.117 80.8914 225.339 80.5582 225.887 79.5992L234.818 63.9708ZM88.436 102.427L88.9623 104.357L233.607 64.908L233.081 62.9785L232.555 61.049L87.9098 100.498L88.436 102.427Z" fill="#757575"/>
<circle cx="233" cy="133" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M217.213 130.399L88.7871 109.238" stroke="#757575" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="129" y="164.729">points[4]</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="321" y="188.547">points[2]</tspan></text>
<circle cx="297" cy="186.637" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M254.618 73.6182L291.382 171.656" stroke="#757575" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<circle cx="164" cy="266" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M283.26 194.836L177.74 257.802" stroke="#757575" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M171.368 251.797L225.632 147.202" stroke="#757575" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

18
drawlist/concave_polygon_basics.svg Normal file

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

After

Width:  |  Height:  |  Size: 32 KiB

18
drawlist/convex_polygon_basics.svg Normal file

@ -0,0 +1,18 @@
<svg width="400" height="300" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="300" fill="white"/>
<circle cx="74" cy="100.637" r="8" fill="#B3B3B3" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="250" cy="52.6367" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="295" cy="161.455" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="217" cy="241.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="74" cy="196.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="13" y="75.5469">points[0]</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="221" y="22.5469">points[1]</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="319" y="163.365">points[2]</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="193" y="281.547">points[3]</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="13" y="244.547">points[4]</tspan></text>
<path d="M88.9098 94.4977C87.8442 94.7883 87.2159 95.8878 87.5065 96.9534C87.7971 98.0191 88.8966 98.6474 89.9623 98.3567L89.436 96.4272L88.9098 94.4977ZM235.818 57.9708C236.366 57.0118 236.033 55.79 235.073 55.242L219.445 46.3115C218.486 45.7635 217.264 46.0967 216.716 47.0557C216.168 48.0148 216.502 49.2365 217.461 49.7845L231.352 57.7227L223.414 71.6146C222.866 72.5736 223.199 73.7954 224.158 74.3434C225.117 74.8914 226.339 74.5582 226.887 73.5992L235.818 57.9708ZM89.436 96.4272L89.9623 98.3567L234.607 58.908L234.081 56.9785L233.555 55.049L88.9098 94.4977L89.436 96.4272Z" fill="#757575"/>
<path d="M256.114 67.4219L288.886 146.669" stroke="#757575" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M283.856 172.937L228.144 230.337" stroke="#757575" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M201.738 237.016L89.2622 201.621" stroke="#757575" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M74 180.818V116.637" stroke="#757575" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

10
drawlist/ellipse_basics.svg

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

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Before After
Before After

88
drawlist/line_0.svg

@ -1,29 +1,61 @@
<svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="200" fill="white"/>
<rect x="149" y="118.182" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="181" y="118.182" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="117" y="118.182" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="85" y="118.182" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M53 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M85 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M117 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M149 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M245 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M181 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M213 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M245 54.1816L53 54.1816" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M245 86.1816L53 86.1816" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M245 118.182L53 118.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M245 150.182L53 150.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M245 182.182L53 182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M37.1705 36.5565C36.2727 36.5527 35.5057 36.3159 34.8693 35.8462C34.233 35.3765 33.7462 34.6928 33.4091 33.7951C33.072 32.8974 32.9034 31.8159 32.9034 30.5508C32.9034 29.2894 33.072 28.2118 33.4091 27.3178C33.75 26.4239 34.2386 25.7421 34.875 25.2724C35.5152 24.8027 36.2803 24.5678 37.1705 24.5678C38.0606 24.5678 38.8239 24.8046 39.4602 25.2781C40.0966 25.7478 40.5833 26.4296 40.9205 27.3235C41.2614 28.2137 41.4318 29.2894 41.4318 30.5508C41.4318 31.8197 41.2633 32.9031 40.9261 33.8008C40.589 34.6947 40.1023 35.3784 39.4659 35.8519C38.8295 36.3216 38.0644 36.5565 37.1705 36.5565ZM37.1705 35.0394C37.9583 35.0394 38.5739 34.6549 39.017 33.886C39.464 33.1171 39.6875 32.0053 39.6875 30.5508C39.6875 29.5849 39.5852 28.7686 39.3807 28.1019C39.1799 27.4315 38.8902 26.9239 38.5114 26.5792C38.1364 26.2307 37.6894 26.0565 37.1705 26.0565C36.3864 26.0565 35.7708 26.4428 35.3239 27.2156C34.8769 27.9883 34.6515 29.1 34.6477 30.5508C34.6477 31.5205 34.7481 32.3406 34.9489 33.011C35.1534 33.6777 35.4432 34.1834 35.8182 34.5281C36.1932 34.869 36.6439 35.0394 37.1705 35.0394ZM45.0825 34.7724L44.9973 35.3917C44.9405 35.8462 44.8439 36.3197 44.7075 36.8121C44.5749 37.3084 44.4367 37.7686 44.2928 38.1928C44.1526 38.6171 44.0371 38.9542 43.9462 39.2042H42.7416C42.7909 38.9693 42.859 38.6512 42.9462 38.2496C43.0333 37.8519 43.1185 37.4068 43.2018 36.9144C43.2852 36.422 43.3477 35.9201 43.3893 35.4087L43.4462 34.7724H45.0825ZM50.9122 36.5565C50.0145 36.5527 49.2474 36.3159 48.6111 35.8462C47.9747 35.3765 47.488 34.6928 47.1508 33.7951C46.8137 32.8974 46.6452 31.8159 46.6452 30.5508C46.6452 29.2894 46.8137 28.2118 47.1508 27.3178C47.4917 26.4239 47.9804 25.7421 48.6167 25.2724C49.2569 24.8027 50.0221 24.5678 50.9122 24.5678C51.8024 24.5678 52.5656 24.8046 53.202 25.2781C53.8383 25.7478 54.3251 26.4296 54.6622 27.3235C55.0031 28.2137 55.1736 29.2894 55.1736 30.5508C55.1736 31.8197 55.005 32.9031 54.6679 33.8008C54.3308 34.6947 53.844 35.3784 53.2077 35.8519C52.5713 36.3216 51.8061 36.5565 50.9122 36.5565ZM50.9122 35.0394C51.7001 35.0394 52.3156 34.6549 52.7588 33.886C53.2058 33.1171 53.4292 32.0053 53.4292 30.5508C53.4292 29.5849 53.327 28.7686 53.1224 28.1019C52.9217 27.4315 52.6319 26.9239 52.2531 26.5792C51.8781 26.2307 51.4311 26.0565 50.9122 26.0565C50.1281 26.0565 49.5126 26.4428 49.0656 27.2156C48.6186 27.9883 48.3933 29.1 48.3895 30.5508C48.3895 31.5205 48.4899 32.3406 48.6906 33.011C48.8952 33.6777 49.1849 34.1834 49.5599 34.5281C49.9349 34.869 50.3857 35.0394 50.9122 35.0394Z" fill="#1E1E1E"/>
<path d="M76.5 24.7269L79.2841 29.2781H79.375L82.1591 24.7269H84.1932L80.5682 30.5451L84.2159 36.3633H82.1705L79.375 31.8746H79.2841L76.4886 36.3633H74.4432L78.1534 30.5451L74.4659 24.7269H76.5Z" fill="#F24822"/>
<path d="M21.3807 68.7269H23.375L26.4148 74.0167H26.5398L29.5795 68.7269H31.5739L27.3523 75.7951V80.3633H25.6023V75.7951L21.3807 68.7269Z" fill="#3DADFF"/>
<path d="M55 52.1816C55 51.0771 54.1046 50.1816 53 50.1816C51.8954 50.1816 51 51.0771 51 52.1816H53H55ZM51.5858 119.596C52.3668 120.377 53.6332 120.377 54.4142 119.596L67.1421 106.868C67.9232 106.087 67.9232 104.821 67.1421 104.04C66.3611 103.258 65.0948 103.258 64.3137 104.04L53 115.353L41.6863 104.04C40.9052 103.258 39.6389 103.258 38.8579 104.04C38.0768 104.821 38.0768 106.087 38.8579 106.868L51.5858 119.596ZM53 52.1816H51V118.182H53H55V52.1816H53Z" fill="#3DADFF"/>
<path d="M53 52.1816C51.8954 52.1816 51 53.0771 51 54.1816C51 55.2862 51.8954 56.1816 53 56.1816V54.1816V52.1816ZM118.414 55.5959C119.195 54.8148 119.195 53.5485 118.414 52.7674L105.686 40.0395C104.905 39.2585 103.639 39.2585 102.858 40.0395C102.077 40.8206 102.077 42.0869 102.858 42.8679L114.172 54.1816L102.858 65.4953C102.077 66.2764 102.077 67.5427 102.858 68.3238C103.639 69.1048 104.905 69.1048 105.686 68.3238L118.414 55.5959ZM53 54.1816V56.1816H117V54.1816V52.1816H53V54.1816Z" fill="#F24822"/>
<rect x="101" y="118.182" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="213" cy="118.182" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="85" cy="118.182" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M187.96 116.182C186.855 116.182 185.96 117.077 185.96 118.182C185.96 119.286 186.855 120.182 187.96 120.182V118.182V116.182ZM198.414 119.596C199.195 118.815 199.195 117.548 198.414 116.767L185.686 104.04C184.905 103.258 183.639 103.258 182.858 104.04C182.077 104.821 182.077 106.087 182.858 106.868L194.171 118.182L182.858 129.495C182.077 130.276 182.077 131.543 182.858 132.324C183.639 133.105 184.905 133.105 185.686 132.324L198.414 119.596ZM187.96 118.182V120.182H197V118.182V116.182H187.96V118.182Z" fill="black"/>
<path d="M101 118.182H197" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<svg width="563" height="250" viewBox="0 0 563 250" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="563" height="250" fill="white"/>
<rect x="355" y="96" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="387" y="96" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="419" y="96" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="451" y="96" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="147" y="128" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="179" y="128" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="115" y="128" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="83" y="128" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="355" y="128" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="387" y="128" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="419" y="128" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="451" y="128" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<path d="M51 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M323 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M83 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M355 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M115 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M387 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M147 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M419 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M243 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M515 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M179 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M451 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M211 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M483 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M243 64L51 64" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M515 64L323 64" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M243 96L51 96" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M515 96L323 96" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M243 128L51 128" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M515 128L323 128" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M243 160L51 160" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M515 160L323 160" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M243 192L51 192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M515 192L323 192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="30" y="45.7285">0,0</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="302" y="45.7285">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="72" y="45.7285">X</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="344" y="45.7285">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="19" y="89.7285">Y</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="291" y="89.7285">Y</tspan></text>
<path d="M53 62C53 60.8954 52.1046 60 51 60C49.8954 60 49 60.8954 49 62H51H53ZM49.5858 129.414C50.3668 130.195 51.6332 130.195 52.4142 129.414L65.1421 116.686C65.9232 115.905 65.9232 114.639 65.1421 113.858C64.3611 113.077 63.0948 113.077 62.3137 113.858L51 125.172L39.6863 113.858C38.9052 113.077 37.6389 113.077 36.8579 113.858C36.0768 114.639 36.0768 115.905 36.8579 116.686L49.5858 129.414ZM51 62H49V128H51H53V62H51Z" fill="#3DADFF"/>
<path d="M325 62C325 60.8954 324.105 60 323 60C321.895 60 321 60.8954 321 62H323H325ZM321.586 129.414C322.367 130.195 323.633 130.195 324.414 129.414L337.142 116.686C337.923 115.905 337.923 114.639 337.142 113.858C336.361 113.077 335.095 113.077 334.314 113.858L323 125.172L311.686 113.858C310.905 113.077 309.639 113.077 308.858 113.858C308.077 114.639 308.077 115.905 308.858 116.686L321.586 129.414ZM323 62H321V128H323H325V62H323Z" fill="#3DADFF"/>
<path d="M51 62C49.8954 62 49 62.8954 49 64C49 65.1046 49.8954 66 51 66V64V62ZM116.414 65.4142C117.195 64.6332 117.195 63.3668 116.414 62.5858L103.686 49.8579C102.905 49.0768 101.639 49.0768 100.858 49.8579C100.077 50.6389 100.077 51.9052 100.858 52.6863L112.172 64L100.858 75.3137C100.077 76.0948 100.077 77.3611 100.858 78.1421C101.639 78.9232 102.905 78.9232 103.686 78.1421L116.414 65.4142ZM51 64V66H115V64V62H51V64Z" fill="#F24822"/>
<path d="M323 62C321.895 62 321 62.8954 321 64C321 65.1046 321.895 66 323 66V64V62ZM388.414 65.4142C389.195 64.6332 389.195 63.3668 388.414 62.5858L375.686 49.8579C374.905 49.0768 373.639 49.0768 372.858 49.8579C372.077 50.6389 372.077 51.9052 372.858 52.6863L384.172 64L372.858 75.3137C372.077 76.0948 372.077 77.3611 372.858 78.1421C373.639 78.9232 374.905 78.9232 375.686 78.1421L388.414 65.4142ZM323 64V66H387V64V62H323V64Z" fill="#F24822"/>
<rect x="99" y="128" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="355" y="112" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<path d="M99 144H219" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<circle cx="211" cy="128" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="483" cy="128" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M363 128H483" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<circle cx="83" cy="128" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="355" cy="128" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M147 126C145.895 126 145 126.895 145 128C145 129.105 145.895 130 147 130V128V126ZM196.414 129.414C197.195 128.633 197.195 127.367 196.414 126.586L183.686 113.858C182.905 113.077 181.639 113.077 180.858 113.858C180.077 114.639 180.077 115.905 180.858 116.686L192.172 128L180.858 139.314C180.077 140.095 180.077 141.361 180.858 142.142C181.639 142.923 182.905 142.923 183.686 142.142L196.414 129.414ZM147 128V130H195V128V126H147V128Z" fill="#757575"/>
<path d="M449.629 126C448.525 126 447.629 126.895 447.629 128C447.629 129.105 448.525 130 449.629 130V128V126ZM460.414 129.414C461.195 128.633 461.195 127.367 460.414 126.586L447.686 113.858C446.905 113.077 445.639 113.077 444.858 113.858C444.077 114.639 444.077 115.905 444.858 116.686L456.172 128L444.858 139.314C444.077 140.095 444.077 141.361 444.858 142.142C445.639 142.923 446.905 142.923 447.686 142.142L460.414 129.414ZM449.629 128V130H459V128V126H449.629V128Z" fill="#757575"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="51" y="223.934">A</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="323" y="223.934">B</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before After
Before After

116
drawlist/line_1.svg

@ -1,33 +1,85 @@
<svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="200" fill="white"/>
<rect x="87" y="86.1816" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="119" y="86.1816" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="151" y="86.1816" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="183" y="86.1816" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="87" y="118.182" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="119" y="118.182" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="151" y="118.182" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="183" y="118.182" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<path d="M55 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M87 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M119 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M151 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M247 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M183 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M215 54.1816V182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M247 54.1816L55 54.1816" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M247 86.1816L55 86.1816" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M247 118.182L55 118.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M247 150.182L55 150.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M247 182.182L55 182.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M39.1705 36.5565C38.2727 36.5527 37.5057 36.3159 36.8693 35.8462C36.233 35.3765 35.7462 34.6928 35.4091 33.7951C35.072 32.8974 34.9034 31.8159 34.9034 30.5508C34.9034 29.2894 35.072 28.2118 35.4091 27.3178C35.75 26.4239 36.2386 25.7421 36.875 25.2724C37.5152 24.8027 38.2803 24.5678 39.1705 24.5678C40.0606 24.5678 40.8239 24.8046 41.4602 25.2781C42.0966 25.7478 42.5833 26.4296 42.9205 27.3235C43.2614 28.2137 43.4318 29.2894 43.4318 30.5508C43.4318 31.8197 43.2633 32.9031 42.9261 33.8008C42.589 34.6947 42.1023 35.3784 41.4659 35.8519C40.8295 36.3216 40.0644 36.5565 39.1705 36.5565ZM39.1705 35.0394C39.9583 35.0394 40.5739 34.6549 41.017 33.886C41.464 33.1171 41.6875 32.0053 41.6875 30.5508C41.6875 29.5849 41.5852 28.7686 41.3807 28.1019C41.1799 27.4315 40.8902 26.9239 40.5114 26.5792C40.1364 26.2307 39.6894 26.0565 39.1705 26.0565C38.3864 26.0565 37.7708 26.4428 37.3239 27.2156C36.8769 27.9883 36.6515 29.1 36.6477 30.5508C36.6477 31.5205 36.7481 32.3406 36.9489 33.011C37.1534 33.6777 37.4432 34.1834 37.8182 34.5281C38.1932 34.869 38.6439 35.0394 39.1705 35.0394ZM47.0825 34.7724L46.9973 35.3917C46.9405 35.8462 46.8439 36.3197 46.7075 36.8121C46.5749 37.3084 46.4367 37.7686 46.2928 38.1928C46.1526 38.6171 46.0371 38.9542 45.9462 39.2042H44.7416C44.7909 38.9693 44.859 38.6512 44.9462 38.2496C45.0333 37.8519 45.1185 37.4068 45.2018 36.9144C45.2852 36.422 45.3477 35.9201 45.3893 35.4087L45.4462 34.7724H47.0825ZM52.9122 36.5565C52.0145 36.5527 51.2474 36.3159 50.6111 35.8462C49.9747 35.3765 49.488 34.6928 49.1508 33.7951C48.8137 32.8974 48.6452 31.8159 48.6452 30.5508C48.6452 29.2894 48.8137 28.2118 49.1508 27.3178C49.4917 26.4239 49.9804 25.7421 50.6167 25.2724C51.2569 24.8027 52.0221 24.5678 52.9122 24.5678C53.8024 24.5678 54.5656 24.8046 55.202 25.2781C55.8383 25.7478 56.3251 26.4296 56.6622 27.3235C57.0031 28.2137 57.1736 29.2894 57.1736 30.5508C57.1736 31.8197 57.005 32.9031 56.6679 33.8008C56.3308 34.6947 55.844 35.3784 55.2077 35.8519C54.5713 36.3216 53.8061 36.5565 52.9122 36.5565ZM52.9122 35.0394C53.7001 35.0394 54.3156 34.6549 54.7588 33.886C55.2058 33.1171 55.4292 32.0053 55.4292 30.5508C55.4292 29.5849 55.327 28.7686 55.1224 28.1019C54.9217 27.4315 54.6319 26.9239 54.2531 26.5792C53.8781 26.2307 53.4311 26.0565 52.9122 26.0565C52.1281 26.0565 51.5126 26.4428 51.0656 27.2156C50.6186 27.9883 50.3933 29.1 50.3895 30.5508C50.3895 31.5205 50.4899 32.3406 50.6906 33.011C50.8952 33.6777 51.1849 34.1834 51.5599 34.5281C51.9349 34.869 52.3857 35.0394 52.9122 35.0394Z" fill="#1E1E1E"/>
<path d="M78.5 24.7269L81.2841 29.2781H81.375L84.1591 24.7269H86.1932L82.5682 30.5451L86.2159 36.3633H84.1705L81.375 31.8746H81.2841L78.4886 36.3633H76.4432L80.1534 30.5451L76.4659 24.7269H78.5Z" fill="#F24822"/>
<path d="M23.3807 68.7269H25.375L28.4148 74.0167H28.5398L31.5795 68.7269H33.5739L29.3523 75.7951V80.3633H27.6023V75.7951L23.3807 68.7269Z" fill="#3DADFF"/>
<path d="M57 52.1816C57 51.0771 56.1046 50.1816 55 50.1816C53.8954 50.1816 53 51.0771 53 52.1816H55H57ZM53.5858 119.596C54.3668 120.377 55.6332 120.377 56.4142 119.596L69.1421 106.868C69.9232 106.087 69.9232 104.821 69.1421 104.04C68.3611 103.258 67.0948 103.258 66.3137 104.04L55 115.353L43.6863 104.04C42.9052 103.258 41.6389 103.258 40.8579 104.04C40.0768 104.821 40.0768 106.087 40.8579 106.868L53.5858 119.596ZM55 52.1816H53V118.182H55H57V52.1816H55Z" fill="#3DADFF"/>
<path d="M55 52.1816C53.8954 52.1816 53 53.0771 53 54.1816C53 55.2862 53.8954 56.1816 55 56.1816V54.1816V52.1816ZM120.414 55.5959C121.195 54.8148 121.195 53.5485 120.414 52.7674L107.686 40.0395C106.905 39.2585 105.639 39.2585 104.858 40.0395C104.077 40.8206 104.077 42.0869 104.858 42.8679L116.172 54.1816L104.858 65.4953C104.077 66.2764 104.077 67.5427 104.858 68.3238C105.639 69.1048 106.905 69.1048 107.686 68.3238L120.414 55.5959ZM55 54.1816V56.1816H119V54.1816V52.1816H55V54.1816Z" fill="#F24822"/>
<rect x="87" y="102.182" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="215" cy="118.182" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M95 118.182H215" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<circle cx="87" cy="118.182" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M181.629 116.182C180.525 116.182 179.629 117.077 179.629 118.182C179.629 119.286 180.525 120.182 181.629 120.182V118.182V116.182ZM192.414 119.596C193.195 118.815 193.195 117.548 192.414 116.767L179.686 104.04C178.905 103.258 177.639 103.258 176.858 104.04C176.077 104.821 176.077 106.087 176.858 106.868L188.172 118.182L176.858 129.495C176.077 130.276 176.077 131.543 176.858 132.324C177.639 133.105 178.905 133.105 179.686 132.324L192.414 119.596ZM181.629 118.182V120.182H191V118.182V116.182H181.629V118.182Z" fill="black"/>
<svg width="863" height="250" viewBox="0 0 863 250" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="863" height="250" fill="white"/>
<rect x="704" y="128" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="736" y="128" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="672" y="128" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="640" y="128" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="81" y="127.636" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="359" y="127.636" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="208" y="127.636" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="113" y="127.636" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="391" y="127.636" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="145" y="127.636" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="423" y="127.636" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="177" y="127.636" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="455" y="127.636" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M608 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M49 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M327 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M640 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M81 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M359 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M672 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M113 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M391 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M704 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M145 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M423 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M800 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M241 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M736 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M177 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M455 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M768 64V192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M487 63.6362V191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M800 64L608 64" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M241 63.6362L49 63.6362" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 63.6362L327 63.6362" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M800 96L608 96" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M241 95.6362L49 95.6362" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 95.6362L327 95.6362" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M800 128L608 128" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M241 127.636L49 127.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 127.636L327 127.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M800 160L608 160" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M241 159.636L49 159.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 159.636L327 159.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M800 192L608 192" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M241 191.636L49 191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 191.636L327 191.636" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="587" y="45.7285">0,0</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="28" y="45.3652">0,0</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="306" y="45.3652">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="629" y="45.7285">X</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="70" y="45.3652">X</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="348" y="45.3652">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="576" y="89.7285">Y</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="17" y="89.3652">Y</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="295" y="89.3652">Y</tspan></text>
<path d="M610 62C610 60.8954 609.105 60 608 60C606.895 60 606 60.8954 606 62H608H610ZM606.586 129.414C607.367 130.195 608.633 130.195 609.414 129.414L622.142 116.686C622.923 115.905 622.923 114.639 622.142 113.858C621.361 113.077 620.095 113.077 619.314 113.858L608 125.172L596.686 113.858C595.905 113.077 594.639 113.077 593.858 113.858C593.077 114.639 593.077 115.905 593.858 116.686L606.586 129.414ZM608 62H606V128H608H610V62H608Z" fill="#3DADFF"/>
<path d="M51 61.6362C51 60.5317 50.1046 59.6362 49 59.6362C47.8954 59.6362 47 60.5317 47 61.6362H49H51ZM47.5858 129.05C48.3668 129.831 49.6332 129.831 50.4142 129.05L63.1421 116.323C63.9232 115.541 63.9232 114.275 63.1421 113.494C62.3611 112.713 61.0948 112.713 60.3137 113.494L49 124.808L37.6863 113.494C36.9052 112.713 35.6389 112.713 34.8579 113.494C34.0768 114.275 34.0768 115.541 34.8579 116.323L47.5858 129.05ZM49 61.6362H47V127.636H49H51V61.6362H49Z" fill="#3DADFF"/>
<path d="M329 61.6362C329 60.5317 328.105 59.6362 327 59.6362C325.895 59.6362 325 60.5317 325 61.6362H327H329ZM325.586 129.05C326.367 129.831 327.633 129.831 328.414 129.05L341.142 116.323C341.923 115.541 341.923 114.275 341.142 113.494C340.361 112.713 339.095 112.713 338.314 113.494L327 124.808L315.686 113.494C314.905 112.713 313.639 112.713 312.858 113.494C312.077 114.275 312.077 115.541 312.858 116.323L325.586 129.05ZM327 61.6362H325V127.636H327H329V61.6362H327Z" fill="#3DADFF"/>
<path d="M608 62C606.895 62 606 62.8954 606 64C606 65.1046 606.895 66 608 66V64V62ZM673.414 65.4142C674.195 64.6332 674.195 63.3668 673.414 62.5858L660.686 49.8579C659.905 49.0768 658.639 49.0768 657.858 49.8579C657.077 50.6389 657.077 51.9052 657.858 52.6863L669.172 64L657.858 75.3137C657.077 76.0948 657.077 77.3611 657.858 78.1421C658.639 78.9232 659.905 78.9232 660.686 78.1421L673.414 65.4142ZM608 64V66H672V64V62H608V64Z" fill="#F24822"/>
<path d="M49 61.6362C47.8954 61.6362 47 62.5317 47 63.6362C47 64.7408 47.8954 65.6362 49 65.6362V63.6362V61.6362ZM114.414 65.0504C115.195 64.2694 115.195 63.0031 114.414 62.222L101.686 49.4941C100.905 48.713 99.6389 48.713 98.8579 49.4941C98.0768 50.2751 98.0768 51.5415 98.8579 52.3225L110.172 63.6362L98.8579 74.9499C98.0768 75.731 98.0768 76.9973 98.8579 77.7784C99.6389 78.5594 100.905 78.5594 101.686 77.7784L114.414 65.0504ZM49 63.6362V65.6362H113V63.6362V61.6362H49V63.6362Z" fill="#F24822"/>
<path d="M327 61.6362C325.895 61.6362 325 62.5317 325 63.6362C325 64.7408 325.895 65.6362 327 65.6362V63.6362V61.6362ZM392.414 65.0504C393.195 64.2694 393.195 63.0031 392.414 62.222L379.686 49.4941C378.905 48.713 377.639 48.713 376.858 49.4941C376.077 50.2751 376.077 51.5415 376.858 52.3225L388.172 63.6362L376.858 74.9499C376.077 75.731 376.077 76.9973 376.858 77.7784C377.639 78.5594 378.905 78.5594 379.686 77.7784L392.414 65.0504ZM327 63.6362V65.6362H391V63.6362V61.6362H327V63.6362Z" fill="#F24822"/>
<rect x="640" y="128" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="96" y="127.818" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="359" y="128" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="768" cy="128" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="224" cy="143.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="486" cy="143.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M104 143.818H224" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<path d="M366 143.818H486" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<circle cx="640" cy="128" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M648 144H760" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<circle cx="96" cy="143.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="358" cy="143.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M743.5 126C742.395 126 741.5 126.895 741.5 128C741.5 129.105 742.395 130 743.5 130V128V126ZM752.914 129.414C753.695 128.633 753.695 127.367 752.914 126.586L740.186 113.858C739.405 113.077 738.139 113.077 737.358 113.858C736.577 114.639 736.577 115.905 737.358 116.686L748.672 128L737.358 139.314C736.577 140.095 736.577 141.361 737.358 142.142C738.139 142.923 739.405 142.923 740.186 142.142L752.914 129.414ZM743.5 128V130H751.5V128V126H743.5V128Z" fill="#757575"/>
<path d="M194.073 142C192.969 142 192.073 142.895 192.073 144C192.073 145.105 192.969 146 194.073 146V144V142ZM209.785 145.414C210.566 144.633 210.566 143.367 209.785 142.586L197.057 129.858C196.276 129.077 195.009 129.077 194.228 129.858C193.447 130.639 193.447 131.905 194.228 132.686L205.542 144L194.228 155.314C193.447 156.095 193.447 157.361 194.228 158.142C195.009 158.923 196.276 158.923 197.057 158.142L209.785 145.414ZM194.073 144V146H208.371V144V142H194.073V144Z" fill="#757575"/>
<path d="M464.073 142C462.969 142 462.073 142.895 462.073 144C462.073 145.105 462.969 146 464.073 146V144V142ZM471.785 145.414C472.566 144.633 472.566 143.367 471.785 142.586L459.057 129.858C458.276 129.077 457.009 129.077 456.228 129.858C455.447 130.639 455.447 131.905 456.228 132.686L467.542 144L456.228 155.314C455.447 156.095 455.447 157.361 456.228 158.142C457.009 158.923 458.276 158.923 459.057 158.142L471.785 145.414ZM464.073 144V146H470.371V144V142H464.073V144Z" fill="#757575"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="49" y="223.934">C</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="328" y="223.934">D</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="608" y="223.934">E</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

30
drawlist/line_2.svg

@ -1,30 +0,0 @@
<svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="200" fill="white"/>
<rect x="91" y="117.818" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="218" y="117.818" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="123" y="117.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="155" y="117.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="187" y="117.818" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M59 53.8179V181.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M91 53.8179V181.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M123 53.8179V181.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M155 53.8179V181.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M251 53.8179V181.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M187 53.8179V181.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M219 53.8179V181.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M251 53.8179L59 53.8179" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M251 85.8179L59 85.8179" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M251 117.818L59 117.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M251 149.818L59 149.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M251 181.818L59 181.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M43.1705 36.1932C42.2727 36.1894 41.5057 35.9527 40.8693 35.483C40.233 35.0133 39.7462 34.3295 39.4091 33.4318C39.072 32.5341 38.9034 31.4527 38.9034 30.1875C38.9034 28.9261 39.072 27.8485 39.4091 26.9545C39.75 26.0606 40.2386 25.3788 40.875 24.9091C41.5152 24.4394 42.2803 24.2045 43.1705 24.2045C44.0606 24.2045 44.8239 24.4413 45.4602 24.9148C46.0966 25.3845 46.5833 26.0663 46.9205 26.9602C47.2614 27.8504 47.4318 28.9261 47.4318 30.1875C47.4318 31.4564 47.2633 32.5398 46.9261 33.4375C46.589 34.3314 46.1023 35.0152 45.4659 35.4886C44.8295 35.9583 44.0644 36.1932 43.1705 36.1932ZM43.1705 34.6761C43.9583 34.6761 44.5739 34.2917 45.017 33.5227C45.464 32.7538 45.6875 31.642 45.6875 30.1875C45.6875 29.2216 45.5852 28.4053 45.3807 27.7386C45.1799 27.0682 44.8902 26.5606 44.5114 26.2159C44.1364 25.8674 43.6894 25.6932 43.1705 25.6932C42.3864 25.6932 41.7708 26.0795 41.3239 26.8523C40.8769 27.625 40.6515 28.7367 40.6477 30.1875C40.6477 31.1572 40.7481 31.9773 40.9489 32.6477C41.1534 33.3144 41.4432 33.8201 41.8182 34.1648C42.1932 34.5057 42.6439 34.6761 43.1705 34.6761ZM51.0825 34.4091L50.9973 35.0284C50.9405 35.483 50.8439 35.9564 50.7075 36.4489C50.5749 36.9451 50.4367 37.4053 50.2928 37.8295C50.1526 38.2538 50.0371 38.5909 49.9462 38.8409H48.7416C48.7909 38.6061 48.859 38.2879 48.9462 37.8864C49.0333 37.4886 49.1185 37.0436 49.2018 36.5511C49.2852 36.0587 49.3477 35.5568 49.3893 35.0455L49.4462 34.4091H51.0825ZM56.9122 36.1932C56.0145 36.1894 55.2474 35.9527 54.6111 35.483C53.9747 35.0133 53.488 34.3295 53.1508 33.4318C52.8137 32.5341 52.6452 31.4527 52.6452 30.1875C52.6452 28.9261 52.8137 27.8485 53.1508 26.9545C53.4917 26.0606 53.9804 25.3788 54.6167 24.9091C55.2569 24.4394 56.0221 24.2045 56.9122 24.2045C57.8024 24.2045 58.5656 24.4413 59.202 24.9148C59.8383 25.3845 60.3251 26.0663 60.6622 26.9602C61.0031 27.8504 61.1736 28.9261 61.1736 30.1875C61.1736 31.4564 61.005 32.5398 60.6679 33.4375C60.3308 34.3314 59.844 35.0152 59.2077 35.4886C58.5713 35.9583 57.8061 36.1932 56.9122 36.1932ZM56.9122 34.6761C57.7001 34.6761 58.3156 34.2917 58.7588 33.5227C59.2058 32.7538 59.4292 31.642 59.4292 30.1875C59.4292 29.2216 59.327 28.4053 59.1224 27.7386C58.9217 27.0682 58.6319 26.5606 58.2531 26.2159C57.8781 25.8674 57.4311 25.6932 56.9122 25.6932C56.1281 25.6932 55.5126 26.0795 55.0656 26.8523C54.6186 27.625 54.3933 28.7367 54.3895 30.1875C54.3895 31.1572 54.4899 31.9773 54.6906 32.6477C54.8952 33.3144 55.1849 33.8201 55.5599 34.1648C55.9349 34.5057 56.3857 34.6761 56.9122 34.6761Z" fill="#1E1E1E"/>
<path d="M82.5 24.3636L85.2841 28.9148H85.375L88.1591 24.3636H90.1932L86.5682 30.1818L90.2159 36H88.1705L85.375 31.5114H85.2841L82.4886 36H80.4432L84.1534 30.1818L80.4659 24.3636H82.5Z" fill="#F24822"/>
<path d="M27.3807 68.3636H29.375L32.4148 73.6534H32.5398L35.5795 68.3636H37.5739L33.3523 75.4318V80H31.6023V75.4318L27.3807 68.3636Z" fill="#3DADFF"/>
<path d="M61 51.8179C61 50.7133 60.1046 49.8179 59 49.8179C57.8954 49.8179 57 50.7133 57 51.8179H59H61ZM57.5858 119.232C58.3668 120.013 59.6332 120.013 60.4142 119.232L73.1421 106.504C73.9232 105.723 73.9232 104.457 73.1421 103.676C72.3611 102.895 71.0948 102.895 70.3137 103.676L59 114.989L47.6863 103.676C46.9052 102.895 45.6389 102.895 44.8579 103.676C44.0768 104.457 44.0768 105.723 44.8579 106.504L57.5858 119.232ZM59 51.8179H57V117.818H59H61V51.8179H59Z" fill="#3DADFF"/>
<path d="M59 51.8179C57.8954 51.8179 57 52.7133 57 53.8179C57 54.9224 57.8954 55.8179 59 55.8179V53.8179V51.8179ZM124.414 55.2321C125.195 54.451 125.195 53.1847 124.414 52.4037L111.686 39.6757C110.905 38.8947 109.639 38.8947 108.858 39.6757C108.077 40.4568 108.077 41.7231 108.858 42.5042L120.172 53.8179L108.858 65.1316C108.077 65.9126 108.077 67.179 108.858 67.96C109.639 68.7411 110.905 68.7411 111.686 67.96L124.414 55.2321ZM59 53.8179V55.8179H123V53.8179V51.8179H59V53.8179Z" fill="#F24822"/>
<rect x="106" y="118" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="234" cy="134" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M114 134H234" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<circle cx="106" cy="134" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M204.073 132.182C202.969 132.182 202.073 133.077 202.073 134.182C202.073 135.286 202.969 136.182 204.073 136.182V134.182V132.182ZM219.785 135.596C220.566 134.815 220.566 133.548 219.785 132.767L207.057 120.04C206.276 119.258 205.009 119.258 204.228 120.04C203.447 120.821 203.447 122.087 204.228 122.868L215.542 134.182L204.228 145.495C203.447 146.276 203.447 147.543 204.228 148.324C205.009 149.105 206.276 149.105 207.057 148.324L219.785 135.596ZM204.073 134.182V136.182H218.371V134.182V132.182H204.073V134.182Z" fill="black"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.6 KiB

29
drawlist/line_3.svg

@ -1,29 +0,0 @@
<svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="200" fill="white"/>
<rect x="166" y="118" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="198" y="118" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="134" y="118" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="102" y="118" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M70 54V182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M102 54V182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M134 54V182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M166 54V182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M262 54V182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M198 54V182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M230 54V182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M262 54L70 54" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M262 86L70 86" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M262 118L70 118" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M262 150L70 150" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M262 182L70 182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M54.1705 36.3748C53.2727 36.371 52.5057 36.1343 51.8693 35.6646C51.233 35.1949 50.7462 34.5112 50.4091 33.6135C50.072 32.7157 49.9034 31.6343 49.9034 30.3691C49.9034 29.1078 50.072 28.0301 50.4091 27.1362C50.75 26.2422 51.2386 25.5604 51.875 25.0907C52.5152 24.621 53.2803 24.3862 54.1705 24.3862C55.0606 24.3862 55.8239 24.6229 56.4602 25.0964C57.0966 25.5661 57.5833 26.2479 57.9205 27.1419C58.2614 28.032 58.4318 29.1078 58.4318 30.3691C58.4318 31.6381 58.2633 32.7214 57.9261 33.6191C57.589 34.5131 57.1023 35.1968 56.4659 35.6703C55.8295 36.14 55.0644 36.3748 54.1705 36.3748ZM54.1705 34.8578C54.9583 34.8578 55.5739 34.4733 56.017 33.7044C56.464 32.9354 56.6875 31.8237 56.6875 30.3691C56.6875 29.4032 56.5852 28.5869 56.3807 27.9203C56.1799 27.2498 55.8902 26.7422 55.5114 26.3975C55.1364 26.0491 54.6894 25.8748 54.1705 25.8748C53.3864 25.8748 52.7708 26.2612 52.3239 27.0339C51.8769 27.8066 51.6515 28.9184 51.6477 30.3691C51.6477 31.3388 51.7481 32.1589 51.9489 32.8294C52.1534 33.496 52.4432 34.0017 52.8182 34.3464C53.1932 34.6873 53.6439 34.8578 54.1705 34.8578ZM62.0825 34.5907L61.9973 35.21C61.9405 35.6646 61.8439 36.1381 61.7075 36.6305C61.5749 37.1267 61.4367 37.5869 61.2928 38.0112C61.1526 38.4354 61.0371 38.7725 60.9462 39.0225H59.7416C59.7909 38.7877 59.859 38.4695 59.9462 38.068C60.0333 37.6703 60.1185 37.2252 60.2018 36.7328C60.2852 36.2404 60.3477 35.7385 60.3893 35.2271L60.4462 34.5907H62.0825ZM67.9122 36.3748C67.0145 36.371 66.2474 36.1343 65.6111 35.6646C64.9747 35.1949 64.488 34.5112 64.1508 33.6135C63.8137 32.7157 63.6452 31.6343 63.6452 30.3691C63.6452 29.1078 63.8137 28.0301 64.1508 27.1362C64.4917 26.2422 64.9804 25.5604 65.6167 25.0907C66.2569 24.621 67.0221 24.3862 67.9122 24.3862C68.8024 24.3862 69.5656 24.6229 70.202 25.0964C70.8383 25.5661 71.3251 26.2479 71.6622 27.1419C72.0031 28.032 72.1736 29.1078 72.1736 30.3691C72.1736 31.6381 72.005 32.7214 71.6679 33.6191C71.3308 34.5131 70.844 35.1968 70.2077 35.6703C69.5713 36.14 68.8061 36.3748 67.9122 36.3748ZM67.9122 34.8578C68.7001 34.8578 69.3156 34.4733 69.7588 33.7044C70.2058 32.9354 70.4292 31.8237 70.4292 30.3691C70.4292 29.4032 70.327 28.5869 70.1224 27.9203C69.9217 27.2498 69.6319 26.7422 69.2531 26.3975C68.8781 26.0491 68.4311 25.8748 67.9122 25.8748C67.1281 25.8748 66.5126 26.2612 66.0656 27.0339C65.6186 27.8066 65.3933 28.9184 65.3895 30.3691C65.3895 31.3388 65.4899 32.1589 65.6906 32.8294C65.8952 33.496 66.1849 34.0017 66.5599 34.3464C66.9349 34.6873 67.3857 34.8578 67.9122 34.8578Z" fill="#1E1E1E"/>
<path d="M93.5 24.5453L96.2841 29.0964H96.375L99.1591 24.5453H101.193L97.5682 30.3635L101.216 36.1816H99.1705L96.375 31.693H96.2841L93.4886 36.1816H91.4432L95.1534 30.3635L91.4659 24.5453H93.5Z" fill="#F24822"/>
<path d="M38.3807 68.5453H40.375L43.4148 73.835H43.5398L46.5795 68.5453H48.5739L44.3523 75.6135V80.1816H42.6023V75.6135L38.3807 68.5453Z" fill="#3DADFF"/>
<path d="M72 52C72 50.8954 71.1046 50 70 50C68.8954 50 68 50.8954 68 52H70H72ZM68.5858 119.414C69.3668 120.195 70.6332 120.195 71.4142 119.414L84.1421 106.686C84.9232 105.905 84.9232 104.639 84.1421 103.858C83.3611 103.077 82.0948 103.077 81.3137 103.858L70 115.172L58.6863 103.858C57.9052 103.077 56.6389 103.077 55.8579 103.858C55.0768 104.639 55.0768 105.905 55.8579 106.686L68.5858 119.414ZM70 52H68V118H70H72V52H70Z" fill="#3DADFF"/>
<path d="M70 52C68.8954 52 68 52.8954 68 54C68 55.1046 68.8954 56 70 56V54V52ZM135.414 55.4142C136.195 54.6332 136.195 53.3668 135.414 52.5858L122.686 39.8579C121.905 39.0768 120.639 39.0768 119.858 39.8579C119.077 40.6389 119.077 41.9052 119.858 42.6863L131.172 54L119.858 65.3137C119.077 66.0948 119.077 67.3611 119.858 68.1421C120.639 68.9232 121.905 68.9232 122.686 68.1421L135.414 55.4142ZM70 54V56H134V54V52H70V54Z" fill="#F24822"/>
<rect x="102" y="118" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="230" cy="118" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="102" cy="118" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M118 118H214" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<path d="M205.5 116C204.395 116 203.5 116.895 203.5 118C203.5 119.105 204.395 120 205.5 120V118V116ZM214.914 119.414C215.695 118.633 215.695 117.367 214.914 116.586L202.186 103.858C201.405 103.077 200.139 103.077 199.358 103.858C198.577 104.639 198.577 105.905 199.358 106.686L210.672 118L199.358 129.314C198.577 130.095 198.577 131.361 199.358 132.142C200.139 132.923 201.405 132.923 202.186 132.142L214.914 119.414ZM205.5 118V120H213.5V118V116H205.5V118Z" fill="black"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.3 KiB

8
drawlist/line_basics.svg

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

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

6
drawlist/line_flags.svg

@ -4,9 +4,9 @@
<path opacity="0.5" d="M106.833 208.5C106.833 214.391 111.609 219.167 117.5 219.167C123.391 219.167 128.167 214.391 128.167 208.5C128.167 202.609 123.391 197.833 117.5 197.833C111.609 197.833 106.833 202.609 106.833 208.5ZM67.3333 58C67.3333 63.891 72.109 68.6667 78 68.6667C83.891 68.6667 88.6667 63.891 88.6667 58C88.6667 52.109 83.891 47.3333 78 47.3333C72.109 47.3333 67.3333 52.109 67.3333 58ZM78 58L76.0655 58.5077L77.053 62.2702L78.9875 61.7625L80.922 61.2548L79.9345 57.4923L78 58ZM80.9625 69.2875L79.028 69.7952L81.003 77.3202L82.9375 76.8125L84.872 76.3048L82.897 68.7798L80.9625 69.2875ZM84.9125 84.3375L82.978 84.8452L84.953 92.3702L86.8875 91.8625L88.822 91.3548L86.847 83.8298L84.9125 84.3375ZM88.8625 99.3875L86.928 99.8952L88.903 107.42L90.8375 106.912L92.772 106.405L90.797 98.8798L88.8625 99.3875ZM92.8125 114.438L90.878 114.945L92.853 122.47L94.7875 121.963L96.722 121.455L94.747 113.93L92.8125 114.438ZM96.7625 129.487L94.828 129.995L96.803 137.52L98.7375 137.012L100.672 136.505L98.697 128.98L96.7625 129.487ZM100.712 144.537L98.778 145.045L100.753 152.57L102.688 152.062L104.622 151.555L102.647 144.03L100.712 144.537ZM104.663 159.588L102.728 160.095L104.703 167.62L106.638 167.113L108.572 166.605L106.597 159.08L104.663 159.588ZM108.612 174.637L106.678 175.145L108.653 182.67L110.587 182.162L112.522 181.655L110.547 174.13L108.612 174.637ZM112.562 189.687L110.628 190.195L112.603 197.72L114.537 197.212L116.472 196.705L114.497 189.18L112.562 189.687ZM116.512 204.737L114.578 205.245L115.566 209.008L117.5 208.5L119.434 207.992L118.447 204.23L116.512 204.737Z" fill="black"/>
<path opacity="0.5" d="M224.833 208.5C224.833 214.391 229.609 219.167 235.5 219.167C241.391 219.167 246.167 214.391 246.167 208.5C246.167 202.609 241.391 197.833 235.5 197.833C229.609 197.833 224.833 202.609 224.833 208.5ZM185.333 58C185.333 63.891 190.109 68.6667 196 68.6667C201.891 68.6667 206.667 63.891 206.667 58C206.667 52.109 201.891 47.3333 196 47.3333C190.109 47.3333 185.333 52.109 185.333 58ZM196 58L194.066 58.5077L195.053 62.2702L196.988 61.7625L198.922 61.2548L197.934 57.4923L196 58ZM198.963 69.2875L197.028 69.7952L199.003 77.3202L200.938 76.8125L202.872 76.3048L200.897 68.7798L198.963 69.2875ZM202.912 84.3375L200.978 84.8452L202.953 92.3702L204.887 91.8625L206.822 91.3548L204.847 83.8298L202.912 84.3375ZM206.863 99.3875L204.928 99.8952L206.903 107.42L208.837 106.912L210.772 106.405L208.797 98.8798L206.863 99.3875ZM210.812 114.438L208.878 114.945L210.853 122.47L212.788 121.963L214.722 121.455L212.747 113.93L210.812 114.438ZM214.762 129.487L212.828 129.995L214.803 137.52L216.737 137.012L218.672 136.505L216.697 128.98L214.762 129.487ZM218.712 144.537L216.778 145.045L218.753 152.57L220.688 152.062L222.622 151.555L220.647 144.03L218.712 144.537ZM222.663 159.588L220.728 160.095L222.703 167.62L224.638 167.113L226.572 166.605L224.597 159.08L222.663 159.588ZM226.612 174.637L224.678 175.145L226.653 182.67L228.587 182.162L230.522 181.655L228.547 174.13L226.612 174.637ZM230.562 189.687L228.628 190.195L230.603 197.72L232.537 197.212L234.472 196.705L232.497 189.18L230.562 189.687ZM234.512 204.737L232.578 205.245L233.566 209.008L235.5 208.5L237.434 207.992L236.447 204.23L234.512 204.737Z" fill="black"/>
<path opacity="0.5" d="M344.833 208.5C344.833 214.391 349.609 219.167 355.5 219.167C361.391 219.167 366.167 214.391 366.167 208.5C366.167 202.609 361.391 197.833 355.5 197.833C349.609 197.833 344.833 202.609 344.833 208.5ZM305.333 58C305.333 63.891 310.109 68.6667 316 68.6667C321.891 68.6667 326.667 63.891 326.667 58C326.667 52.109 321.891 47.3333 316 47.3333C310.109 47.3333 305.333 52.109 305.333 58ZM316 58L314.066 58.5077L315.053 62.2702L316.988 61.7625L318.922 61.2548L317.934 57.4923L316 58ZM318.963 69.2875L317.028 69.7952L319.003 77.3202L320.938 76.8125L322.872 76.3048L320.897 68.7798L318.963 69.2875ZM322.912 84.3375L320.978 84.8452L322.953 92.3702L324.887 91.8625L326.822 91.3548L324.847 83.8298L322.912 84.3375ZM326.863 99.3875L324.928 99.8952L326.903 107.42L328.837 106.912L330.772 106.405L328.797 98.8798L326.863 99.3875ZM330.812 114.438L328.878 114.945L330.853 122.47L332.788 121.963L334.722 121.455L332.747 113.93L330.812 114.438ZM334.762 129.487L332.828 129.995L334.803 137.52L336.737 137.012L338.672 136.505L336.697 128.98L334.762 129.487ZM338.712 144.537L336.778 145.045L338.753 152.57L340.688 152.062L342.622 151.555L340.647 144.03L338.712 144.537ZM342.663 159.588L340.728 160.095L342.703 167.62L344.638 167.113L346.572 166.605L344.597 159.08L342.663 159.588ZM346.612 174.637L344.678 175.145L346.653 182.67L348.587 182.162L350.522 181.655L348.547 174.13L346.612 174.637ZM350.562 189.687L348.628 190.195L350.603 197.72L352.537 197.212L354.472 196.705L352.497 189.18L350.562 189.687ZM354.512 204.737L352.578 205.245L353.566 209.008L355.5 208.5L357.434 207.992L356.447 204.23L354.512 204.737Z" fill="black"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Helvetica" font-size="12" letter-spacing="-0.011em"><tspan x="90" y="273.14">Normal</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Helvetica" font-size="12" letter-spacing="-0.011em"><tspan x="196" y="273.14">SquareCap</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Helvetica" font-size="12" letter-spacing="-0.011em"><tspan x="316" y="273.14">NoAAEnds</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="78" y="277.547">Normal</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="188" y="277.547">SquareCap</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="-0.011em"><tspan x="316" y="277.547">NoAAEnds</tspan></text>
<defs>
<pattern id="pattern0_300_7380" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_300_7380" transform="scale(0.0026455 0.00374532)"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Before After
Before After

38
drawlist/lineh_0.svg

@ -1,5 +1,5 @@
<svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="200" fill="white"/>
<svg width="563" height="238" viewBox="0 0 563 238" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="563" height="238" fill="white"/>
<rect x="154" y="111.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="186" y="111.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="122" y="111.818" width="32" height="32" rx="3" fill="#66D575"/>
@ -16,9 +16,10 @@
<path d="M250 111.818L58 111.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M250 143.818L58 143.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M250 175.818L58 175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M42.1705 30.1932C41.2727 30.1894 40.5057 29.9527 39.8693 29.483C39.233 29.0133 38.7462 28.3295 38.4091 27.4318C38.072 26.5341 37.9034 25.4527 37.9034 24.1875C37.9034 22.9261 38.072 21.8485 38.4091 20.9545C38.75 20.0606 39.2386 19.3788 39.875 18.9091C40.5152 18.4394 41.2803 18.2045 42.1705 18.2045C43.0606 18.2045 43.8239 18.4413 44.4602 18.9148C45.0966 19.3845 45.5833 20.0663 45.9205 20.9602C46.2614 21.8504 46.4318 22.9261 46.4318 24.1875C46.4318 25.4564 46.2633 26.5398 45.9261 27.4375C45.589 28.3314 45.1023 29.0152 44.4659 29.4886C43.8295 29.9583 43.0644 30.1932 42.1705 30.1932ZM42.1705 28.6761C42.9583 28.6761 43.5739 28.2917 44.017 27.5227C44.464 26.7538 44.6875 25.642 44.6875 24.1875C44.6875 23.2216 44.5852 22.4053 44.3807 21.7386C44.1799 21.0682 43.8902 20.5606 43.5114 20.2159C43.1364 19.8674 42.6894 19.6932 42.1705 19.6932C41.3864 19.6932 40.7708 20.0795 40.3239 20.8523C39.8769 21.625 39.6515 22.7367 39.6477 24.1875C39.6477 25.1572 39.7481 25.9773 39.9489 26.6477C40.1534 27.3144 40.4432 27.8201 40.8182 28.1648C41.1932 28.5057 41.6439 28.6761 42.1705 28.6761ZM50.0825 28.4091L49.9973 29.0284C49.9405 29.483 49.8439 29.9564 49.7075 30.4489C49.5749 30.9451 49.4367 31.4053 49.2928 31.8295C49.1526 32.2538 49.0371 32.5909 48.9462 32.8409H47.7416C47.7909 32.6061 47.859 32.2879 47.9462 31.8864C48.0333 31.4886 48.1185 31.0436 48.2018 30.5511C48.2852 30.0587 48.3477 29.5568 48.3893 29.0455L48.4462 28.4091H50.0825ZM55.9122 30.1932C55.0145 30.1894 54.2474 29.9527 53.6111 29.483C52.9747 29.0133 52.488 28.3295 52.1508 27.4318C51.8137 26.5341 51.6452 25.4527 51.6452 24.1875C51.6452 22.9261 51.8137 21.8485 52.1508 20.9545C52.4917 20.0606 52.9804 19.3788 53.6167 18.9091C54.2569 18.4394 55.0221 18.2045 55.9122 18.2045C56.8024 18.2045 57.5656 18.4413 58.202 18.9148C58.8383 19.3845 59.3251 20.0663 59.6622 20.9602C60.0031 21.8504 60.1736 22.9261 60.1736 24.1875C60.1736 25.4564 60.005 26.5398 59.6679 27.4375C59.3308 28.3314 58.844 29.0152 58.2077 29.4886C57.5713 29.9583 56.8061 30.1932 55.9122 30.1932ZM55.9122 28.6761C56.7001 28.6761 57.3156 28.2917 57.7588 27.5227C58.2058 26.7538 58.4292 25.642 58.4292 24.1875C58.4292 23.2216 58.327 22.4053 58.1224 21.7386C57.9217 21.0682 57.6319 20.5606 57.2531 20.2159C56.8781 19.8674 56.4311 19.6932 55.9122 19.6932C55.1281 19.6932 54.5126 20.0795 54.0656 20.8523C53.6186 21.625 53.3933 22.7367 53.3895 24.1875C53.3895 25.1572 53.4899 25.9773 53.6906 26.6477C53.8952 27.3144 54.1849 27.8201 54.5599 28.1648C54.9349 28.5057 55.3857 28.6761 55.9122 28.6761Z" fill="#1E1E1E"/>
<path d="M81.5 18.3636L84.2841 22.9148H84.375L87.1591 18.3636H89.1932L85.5682 24.1818L89.2159 30H87.1705L84.375 25.5114H84.2841L81.4886 30H79.4432L83.1534 24.1818L79.4659 18.3636H81.5Z" fill="#F24822"/>
<path d="M26.3807 62.3636H28.375L31.4148 67.6534H31.5398L34.5795 62.3636H36.5739L32.3523 69.4318V74H30.6023V69.4318L26.3807 62.3636Z" fill="#3DADFF"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="37" y="29.5469">0,0</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="305" y="24.5469">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="79" y="29.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="26" y="73.5469">Y</tspan></text>
<path d="M60 45.8184C60 44.7138 59.1046 43.8184 58 43.8184C56.8954 43.8184 56 44.7138 56 45.8184H58H60ZM56.5858 113.233C57.3668 114.014 58.6332 114.014 59.4142 113.233L72.1421 100.505C72.9232 99.7236 72.9232 98.4573 72.1421 97.6762C71.3611 96.8952 70.0948 96.8952 69.3137 97.6762L58 108.99L46.6863 97.6762C45.9052 96.8952 44.6389 96.8952 43.8579 97.6762C43.0768 98.4573 43.0768 99.7236 43.8579 100.505L56.5858 113.233ZM58 45.8184H56V111.818H58H60V45.8184H58Z" fill="#3DADFF"/>
<path d="M58 45.8184C56.8954 45.8184 56 46.7138 56 47.8184C56 48.9229 56.8954 49.8184 58 49.8184V47.8184V45.8184ZM123.414 49.2326C124.195 48.4515 124.195 47.1852 123.414 46.4041L110.686 33.6762C109.905 32.8952 108.639 32.8952 107.858 33.6762C107.077 34.4573 107.077 35.7236 107.858 36.5047L119.172 47.8184L107.858 59.1321C107.077 59.9131 107.077 61.1794 107.858 61.9605C108.639 62.7415 109.905 62.7415 110.686 61.9605L123.414 49.2326ZM58 47.8184V49.8184H122V47.8184V45.8184H58V47.8184Z" fill="#F24822"/>
<rect x="106" y="111.818" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
@ -26,4 +27,31 @@
<circle cx="90" cy="111.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M192.386 109.818C191.281 109.818 190.386 110.714 190.386 111.818C190.386 112.923 191.281 113.818 192.386 113.818V111.818V109.818ZM203.414 113.233C204.195 112.452 204.195 111.185 203.414 110.404L190.686 97.6762C189.905 96.8952 188.639 96.8952 187.858 97.6762C187.077 98.4573 187.077 99.7236 187.858 100.505L199.172 111.818L187.858 123.132C187.077 123.913 187.077 125.179 187.858 125.96C188.639 126.742 189.905 126.742 190.686 125.96L203.414 113.233ZM192.386 111.818V113.818H202V111.818V109.818H192.386V111.818Z" fill="black"/>
<path d="M106 111.818H202" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<rect x="423" y="111.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="455" y="111.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="391" y="111.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="359" y="111.818" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M359 47.8184V175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M327 47.8184V175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M391 47.8184V175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M423 47.8184V175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 47.8184V175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M455 47.8184V175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M487 47.8184V175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 47.8184L327 47.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 79.8184L327 79.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 111.818L327 111.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 143.818L327 143.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M519 175.818L327 175.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="348" y="29.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="295" y="73.5469">Y</tspan></text>
<path d="M329 45.8184C329 44.7138 328.105 43.8184 327 43.8184C325.895 43.8184 325 44.7138 325 45.8184H327H329ZM325.586 113.233C326.367 114.014 327.633 114.014 328.414 113.233L341.142 100.505C341.923 99.7236 341.923 98.4573 341.142 97.6762C340.361 96.8952 339.095 96.8952 338.314 97.6762L327 108.99L315.686 97.6762C314.905 96.8952 313.639 96.8952 312.858 97.6762C312.077 98.4573 312.077 99.7236 312.858 100.505L325.586 113.233ZM327 45.8184H325V111.818H327H329V45.8184H327Z" fill="#3DADFF"/>
<path d="M327 45.8184C325.895 45.8184 325 46.7138 325 47.8184C325 48.9229 325.895 49.8184 327 49.8184V47.8184V45.8184ZM392.414 49.2326C393.195 48.4515 393.195 47.1852 392.414 46.4041L379.686 33.6762C378.905 32.8952 377.639 32.8952 376.858 33.6762C376.077 34.4573 376.077 35.7236 376.858 36.5047L388.172 47.8184L376.858 59.1321C376.077 59.9131 376.077 61.1794 376.858 61.9605C377.639 62.7415 378.905 62.7415 379.686 61.9605L392.414 49.2326ZM327 47.8184V49.8184H391V47.8184V45.8184H327V47.8184Z" fill="#F24822"/>
<rect x="359" y="112" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="487" cy="111.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="359" cy="111.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M375 111.818H471" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<path d="M455 109.818C453.895 109.818 453 110.714 453 111.818C453 112.923 453.895 113.818 455 113.818V111.818V109.818ZM472.414 113.233C473.195 112.452 473.195 111.185 472.414 110.404L459.686 97.6762C458.905 96.8952 457.639 96.8952 456.858 97.6762C456.077 98.4573 456.077 99.7236 456.858 100.505L468.172 111.818L456.858 123.132C456.077 123.913 456.077 125.179 456.858 125.96C457.639 126.742 458.905 126.742 459.686 125.96L472.414 113.233ZM455 111.818V113.818H471V111.818V109.818H455V111.818Z" fill="black"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="59" y="214.934">A</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="327" y="214.934">B</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

Before After
Before After

28
drawlist/lineh_1.svg

@ -1,28 +0,0 @@
<svg width="300" height="200" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="200" fill="white"/>
<rect x="150" y="108.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="182" y="108.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="118" y="108.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="86" y="108.818" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M86 44.8184V172.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M54 44.8184V172.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M118 44.8184V172.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M150 44.8184V172.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M246 44.8184V172.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M182 44.8184V172.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M214 44.8184V172.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M246 44.8184L54 44.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M246 76.8184L54 76.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M246 108.818L54 108.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M246 140.818L54 140.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M246 172.818L54 172.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M77.5 15.3636L80.2841 19.9148H80.375L83.1591 15.3636H85.1932L81.5682 21.1818L85.2159 27H83.1705L80.375 22.5114H80.2841L77.4886 27H75.4432L79.1534 21.1818L75.4659 15.3636H77.5Z" fill="#F24822"/>
<path d="M22.3807 59.3636H24.375L27.4148 64.6534H27.5398L30.5795 59.3636H32.5739L28.3523 66.4318V71H26.6023V66.4318L22.3807 59.3636Z" fill="#3DADFF"/>
<path d="M56 42.8184C56 41.7138 55.1046 40.8184 54 40.8184C52.8954 40.8184 52 41.7138 52 42.8184H54H56ZM52.5858 110.233C53.3668 111.014 54.6332 111.014 55.4142 110.233L68.1421 97.5047C68.9232 96.7236 68.9232 95.4573 68.1421 94.6762C67.3611 93.8952 66.0948 93.8952 65.3137 94.6762L54 105.99L42.6863 94.6762C41.9052 93.8952 40.6389 93.8952 39.8579 94.6762C39.0768 95.4573 39.0768 96.7236 39.8579 97.5047L52.5858 110.233ZM54 42.8184H52V108.818H54H56V42.8184H54Z" fill="#3DADFF"/>
<path d="M54 42.8184C52.8954 42.8184 52 43.7138 52 44.8184C52 45.9229 52.8954 46.8184 54 46.8184V44.8184V42.8184ZM119.414 46.2326C120.195 45.4515 120.195 44.1852 119.414 43.4041L106.686 30.6762C105.905 29.8952 104.639 29.8952 103.858 30.6762C103.077 31.4573 103.077 32.7236 103.858 33.5047L115.172 44.8184L103.858 56.1321C103.077 56.9131 103.077 58.1794 103.858 58.9605C104.639 59.7415 105.905 59.7415 106.686 58.9605L119.414 46.2326ZM54 44.8184V46.8184H118V44.8184V42.8184H54V44.8184Z" fill="#F24822"/>
<rect x="86" y="109" width="128" height="32" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="214" cy="108.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="86" cy="108.818" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M102 108.818H198" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<path d="M182 106.818C180.895 106.818 180 107.714 180 108.818C180 109.923 180.895 110.818 182 110.818V108.818V106.818ZM199.414 110.233C200.195 109.452 200.195 108.185 199.414 107.404L186.686 94.6762C185.905 93.8952 184.639 93.8952 183.858 94.6762C183.077 95.4573 183.077 96.7236 183.858 97.5047L195.172 108.818L183.858 120.132C183.077 120.913 183.077 122.179 183.858 122.96C184.639 123.742 185.905 123.742 186.686 122.96L199.414 110.233ZM182 108.818V110.818H198V108.818V106.818H182V108.818Z" fill="black"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 4 KiB

10
drawlist/lineh_basics.svg

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

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

39
drawlist/linev_0.svg

@ -1,5 +1,5 @@
<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="250" fill="white"/>
<svg width="514" height="290" viewBox="0 0 514 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="514" height="290" fill="white"/>
<rect x="113" y="139" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="113" y="171" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="113" y="106.818" width="32" height="32" rx="3" fill="#66D575"/>
@ -17,9 +17,9 @@
<path d="M209 203L49 203" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 170.818L49 170.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 235L49 235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M33.1705 25.1932C32.2727 25.1894 31.5057 24.9527 30.8693 24.483C30.233 24.0133 29.7462 23.3295 29.4091 22.4318C29.072 21.5341 28.9034 20.4527 28.9034 19.1875C28.9034 17.9261 29.072 16.8485 29.4091 15.9545C29.75 15.0606 30.2386 14.3788 30.875 13.9091C31.5152 13.4394 32.2803 13.2045 33.1705 13.2045C34.0606 13.2045 34.8239 13.4413 35.4602 13.9148C36.0966 14.3845 36.5833 15.0663 36.9205 15.9602C37.2614 16.8504 37.4318 17.9261 37.4318 19.1875C37.4318 20.4564 37.2633 21.5398 36.9261 22.4375C36.589 23.3314 36.1023 24.0152 35.4659 24.4886C34.8295 24.9583 34.0644 25.1932 33.1705 25.1932ZM33.1705 23.6761C33.9583 23.6761 34.5739 23.2917 35.017 22.5227C35.464 21.7538 35.6875 20.642 35.6875 19.1875C35.6875 18.2216 35.5852 17.4053 35.3807 16.7386C35.1799 16.0682 34.8902 15.5606 34.5114 15.2159C34.1364 14.8674 33.6894 14.6932 33.1705 14.6932C32.3864 14.6932 31.7708 15.0795 31.3239 15.8523C30.8769 16.625 30.6515 17.7367 30.6477 19.1875C30.6477 20.1572 30.7481 20.9773 30.9489 21.6477C31.1534 22.3144 31.4432 22.8201 31.8182 23.1648C32.1932 23.5057 32.6439 23.6761 33.1705 23.6761ZM41.0825 23.4091L40.9973 24.0284C40.9405 24.483 40.8439 24.9564 40.7075 25.4489C40.5749 25.9451 40.4367 26.4053 40.2928 26.8295C40.1526 27.2538 40.0371 27.5909 39.9462 27.8409H38.7416C38.7909 27.6061 38.859 27.2879 38.9462 26.8864C39.0333 26.4886 39.1185 26.0436 39.2018 25.5511C39.2852 25.0587 39.3477 24.5568 39.3893 24.0455L39.4462 23.4091H41.0825ZM46.9122 25.1932C46.0145 25.1894 45.2474 24.9527 44.6111 24.483C43.9747 24.0133 43.488 23.3295 43.1508 22.4318C42.8137 21.5341 42.6452 20.4527 42.6452 19.1875C42.6452 17.9261 42.8137 16.8485 43.1508 15.9545C43.4917 15.0606 43.9804 14.3788 44.6167 13.9091C45.2569 13.4394 46.0221 13.2045 46.9122 13.2045C47.8024 13.2045 48.5656 13.4413 49.202 13.9148C49.8383 14.3845 50.3251 15.0663 50.6622 15.9602C51.0031 16.8504 51.1736 17.9261 51.1736 19.1875C51.1736 20.4564 51.005 21.5398 50.6679 22.4375C50.3308 23.3314 49.844 24.0152 49.2077 24.4886C48.5713 24.9583 47.8061 25.1932 46.9122 25.1932ZM46.9122 23.6761C47.7001 23.6761 48.3156 23.2917 48.7588 22.5227C49.2058 21.7538 49.4292 20.642 49.4292 19.1875C49.4292 18.2216 49.327 17.4053 49.1224 16.7386C48.9217 16.0682 48.6319 15.5606 48.2531 15.2159C47.8781 14.8674 47.4311 14.6932 46.9122 14.6932C46.1281 14.6932 45.5126 15.0795 45.0656 15.8523C44.6186 16.625 44.3933 17.7367 44.3895 19.1875C44.3895 20.1572 44.4899 20.9773 44.6906 21.6477C44.8952 22.3144 45.1849 22.8201 45.5599 23.1648C45.9349 23.5057 46.3857 23.6761 46.9122 23.6761Z" fill="#1E1E1E"/>
<path d="M72.5 13.3636L75.2841 17.9148H75.375L78.1591 13.3636H80.1932L76.5682 19.1818L80.2159 25H78.1705L75.375 20.5114H75.2841L72.4886 25H70.4432L74.1534 19.1818L70.4659 13.3636H72.5Z" fill="#F24822"/>
<path d="M17.3807 57.3636H19.375L22.4148 62.6534H22.5398L25.5795 57.3636H27.5739L23.3523 64.4318V69H21.6023V64.4318L17.3807 57.3636Z" fill="#3DADFF"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="28" y="24.5469">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="70" y="24.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="17" y="68.5469">Y</tspan></text>
<path d="M51 40.8184C51 39.7138 50.1046 38.8184 49 38.8184C47.8954 38.8184 47 39.7138 47 40.8184H49H51ZM47.5858 108.233C48.3668 109.014 49.6332 109.014 50.4142 108.233L63.1421 95.5047C63.9232 94.7236 63.9232 93.4573 63.1421 92.6762C62.3611 91.8952 61.0948 91.8952 60.3137 92.6762L49 103.99L37.6863 92.6762C36.9052 91.8952 35.6389 91.8952 34.8579 92.6762C34.0768 93.4573 34.0768 94.7236 34.8579 95.5047L47.5858 108.233ZM49 40.8184H47V106.818H49H51V40.8184H49Z" fill="#3DADFF"/>
<path d="M49 40.8184C47.8954 40.8184 47 41.7138 47 42.8184C47 43.9229 47.8954 44.8184 49 44.8184V42.8184V40.8184ZM114.414 44.2326C115.195 43.4515 115.195 42.1852 114.414 41.4041L101.686 28.6762C100.905 27.8952 99.6389 27.8952 98.8579 28.6762C98.0768 29.4573 98.0768 30.7236 98.8579 31.5047L110.172 42.8184L98.8579 54.1321C98.0768 54.9131 98.0768 56.1794 98.8579 56.9605C99.6389 57.7415 100.905 57.7415 101.686 56.9605L114.414 44.2326ZM49 42.8184V44.8184H113V42.8184V40.8184H49V42.8184Z" fill="#F24822"/>
<rect x="113" y="91" width="32" height="128" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
@ -27,4 +27,33 @@
<circle cx="113" cy="75" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M115 91C115 89.8954 114.105 89 113 89C111.895 89 111 89.8954 111 91H113H115ZM111.586 187.914C112.367 188.695 113.633 188.695 114.414 187.914L127.142 175.186C127.923 174.405 127.923 173.139 127.142 172.358C126.361 171.577 125.095 171.577 124.314 172.358L113 183.672L101.686 172.358C100.905 171.577 99.6389 171.577 98.8579 172.358C98.0768 173.139 98.0768 174.405 98.8579 175.186L111.586 187.914ZM111 103.733C111 104.838 111.895 105.733 113 105.733C114.105 105.733 115 104.838 115 103.733H113H111ZM115 111.692C115 110.587 114.105 109.692 113 109.692C111.895 109.692 111 110.587 111 111.692H113H115ZM111 124.425C111 125.53 111.895 126.425 113 126.425C114.105 126.425 115 125.53 115 124.425H113H111ZM115 132.383C115 131.279 114.105 130.383 113 130.383C111.895 130.383 111 131.279 111 132.383H113H115ZM111 145.117C111 146.221 111.895 147.117 113 147.117C114.105 147.117 115 146.221 115 145.117H113H111ZM115 153.075C115 151.97 114.105 151.075 113 151.075C111.895 151.075 111 151.97 111 153.075H113H115ZM111 165.808C111 166.913 111.895 167.808 113 167.808C114.105 167.808 115 166.913 115 165.808H113H111ZM115 173.767C115 172.662 114.105 171.767 113 171.767C111.895 171.767 111 172.662 111 173.767H113H115ZM113 91H111V103.733H113H115V91H113ZM113 111.692H111V124.425H113H115V111.692H113ZM113 132.383H111V145.117H113H115V132.383H113ZM113 153.075H111V165.808H113H115V153.075H113ZM113 173.767H111V186.5H113H115V173.767H113Z" fill="#1E1E1E"/>
<path d="M115 177.963C115 176.858 114.105 175.963 113 175.963C111.895 175.963 111 176.858 111 177.963H113H115ZM111.586 187.914C112.367 188.695 113.633 188.695 114.414 187.914L127.142 175.186C127.923 174.405 127.923 173.139 127.142 172.358C126.361 171.577 125.095 171.577 124.314 172.358L113 183.671L101.686 172.358C100.905 171.577 99.6389 171.577 98.8579 172.358C98.0768 173.139 98.0768 174.405 98.8579 175.186L111.586 187.914ZM113 177.963H111V186.5H113H115V177.963H113Z" fill="black"/>
<rect x="361" y="139" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="361" y="171" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="361" y="106.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="361" y="75" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M297 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M329 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M361 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M393 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M425 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M457 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M457 42.8184L297 42.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M457 74.8184L297 74.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M457 106.818L297 106.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M457 138.818L297 138.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M457 203L297 203" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M457 170.818L297 170.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M457 235L297 235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="276" y="24.5469">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="318" y="24.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="265" y="68.5469">Y</tspan></text>
<path d="M299 40.8184C299 39.7138 298.105 38.8184 297 38.8184C295.895 38.8184 295 39.7138 295 40.8184H297H299ZM295.586 108.233C296.367 109.014 297.633 109.014 298.414 108.233L311.142 95.5047C311.923 94.7236 311.923 93.4573 311.142 92.6762C310.361 91.8952 309.095 91.8952 308.314 92.6762L297 103.99L285.686 92.6762C284.905 91.8952 283.639 91.8952 282.858 92.6762C282.077 93.4573 282.077 94.7236 282.858 95.5047L295.586 108.233ZM297 40.8184H295V106.818H297H299V40.8184H297Z" fill="#3DADFF"/>
<path d="M297 40.8184C295.895 40.8184 295 41.7138 295 42.8184C295 43.9229 295.895 44.8184 297 44.8184V42.8184V40.8184ZM362.414 44.2326C363.195 43.4515 363.195 42.1852 362.414 41.4041L349.686 28.6762C348.905 27.8952 347.639 27.8952 346.858 28.6762C346.077 29.4573 346.077 30.7236 346.858 31.5047L358.172 42.8184L346.858 54.1321C346.077 54.9131 346.077 56.1794 346.858 56.9605C347.639 57.7415 348.905 57.7415 349.686 56.9605L362.414 44.2326ZM297 42.8184V44.8184H361V42.8184V40.8184H297V42.8184Z" fill="#F24822"/>
<rect x="361" y="75" width="32" height="128" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="361" cy="203" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="361" cy="75" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M361 91V187" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<path d="M359 109.873C359 110.977 359.895 111.873 361 111.873C362.105 111.873 363 110.977 363 109.873H361H359ZM362.414 104.652C361.633 103.871 360.367 103.871 359.586 104.652L346.858 117.38C346.077 118.161 346.077 119.427 346.858 120.209C347.639 120.99 348.905 120.99 349.686 120.209L361 108.895L372.314 120.209C373.095 120.99 374.361 120.99 375.142 120.209C375.923 119.427 375.923 118.161 375.142 117.38L362.414 104.652ZM361 109.873H363V106.066H361H359V109.873H361Z" fill="black"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="50" y="266.934">A</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="298" y="266.934">B</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

30
drawlist/linev_1.svg

@ -1,30 +0,0 @@
<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="250" height="250" fill="white"/>
<rect x="113" y="139" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="113" y="171" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="113" y="106.818" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="113" y="75" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M49 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M81 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M113 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M145 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M177 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 42.8184V235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 42.8184L49 42.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 74.8184L49 74.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 106.818L49 106.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 138.818L49 138.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 203L49 203" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 170.818L49 170.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M209 235L49 235" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M33.1705 25.1932C32.2727 25.1894 31.5057 24.9527 30.8693 24.483C30.233 24.0133 29.7462 23.3295 29.4091 22.4318C29.072 21.5341 28.9034 20.4527 28.9034 19.1875C28.9034 17.9261 29.072 16.8485 29.4091 15.9545C29.75 15.0606 30.2386 14.3788 30.875 13.9091C31.5152 13.4394 32.2803 13.2045 33.1705 13.2045C34.0606 13.2045 34.8239 13.4413 35.4602 13.9148C36.0966 14.3845 36.5833 15.0663 36.9205 15.9602C37.2614 16.8504 37.4318 17.9261 37.4318 19.1875C37.4318 20.4564 37.2633 21.5398 36.9261 22.4375C36.589 23.3314 36.1023 24.0152 35.4659 24.4886C34.8295 24.9583 34.0644 25.1932 33.1705 25.1932ZM33.1705 23.6761C33.9583 23.6761 34.5739 23.2917 35.017 22.5227C35.464 21.7538 35.6875 20.642 35.6875 19.1875C35.6875 18.2216 35.5852 17.4053 35.3807 16.7386C35.1799 16.0682 34.8902 15.5606 34.5114 15.2159C34.1364 14.8674 33.6894 14.6932 33.1705 14.6932C32.3864 14.6932 31.7708 15.0795 31.3239 15.8523C30.8769 16.625 30.6515 17.7367 30.6477 19.1875C30.6477 20.1572 30.7481 20.9773 30.9489 21.6477C31.1534 22.3144 31.4432 22.8201 31.8182 23.1648C32.1932 23.5057 32.6439 23.6761 33.1705 23.6761ZM41.0825 23.4091L40.9973 24.0284C40.9405 24.483 40.8439 24.9564 40.7075 25.4489C40.5749 25.9451 40.4367 26.4053 40.2928 26.8295C40.1526 27.2538 40.0371 27.5909 39.9462 27.8409H38.7416C38.7909 27.6061 38.859 27.2879 38.9462 26.8864C39.0333 26.4886 39.1185 26.0436 39.2018 25.5511C39.2852 25.0587 39.3477 24.5568 39.3893 24.0455L39.4462 23.4091H41.0825ZM46.9122 25.1932C46.0145 25.1894 45.2474 24.9527 44.6111 24.483C43.9747 24.0133 43.488 23.3295 43.1508 22.4318C42.8137 21.5341 42.6452 20.4527 42.6452 19.1875C42.6452 17.9261 42.8137 16.8485 43.1508 15.9545C43.4917 15.0606 43.9804 14.3788 44.6167 13.9091C45.2569 13.4394 46.0221 13.2045 46.9122 13.2045C47.8024 13.2045 48.5656 13.4413 49.202 13.9148C49.8383 14.3845 50.3251 15.0663 50.6622 15.9602C51.0031 16.8504 51.1736 17.9261 51.1736 19.1875C51.1736 20.4564 51.005 21.5398 50.6679 22.4375C50.3308 23.3314 49.844 24.0152 49.2077 24.4886C48.5713 24.9583 47.8061 25.1932 46.9122 25.1932ZM46.9122 23.6761C47.7001 23.6761 48.3156 23.2917 48.7588 22.5227C49.2058 21.7538 49.4292 20.642 49.4292 19.1875C49.4292 18.2216 49.327 17.4053 49.1224 16.7386C48.9217 16.0682 48.6319 15.5606 48.2531 15.2159C47.8781 14.8674 47.4311 14.6932 46.9122 14.6932C46.1281 14.6932 45.5126 15.0795 45.0656 15.8523C44.6186 16.625 44.3933 17.7367 44.3895 19.1875C44.3895 20.1572 44.4899 20.9773 44.6906 21.6477C44.8952 22.3144 45.1849 22.8201 45.5599 23.1648C45.9349 23.5057 46.3857 23.6761 46.9122 23.6761Z" fill="#1E1E1E"/>
<path d="M72.5 13.3636L75.2841 17.9148H75.375L78.1591 13.3636H80.1932L76.5682 19.1818L80.2159 25H78.1705L75.375 20.5114H75.2841L72.4886 25H70.4432L74.1534 19.1818L70.4659 13.3636H72.5Z" fill="#F24822"/>
<path d="M17.3807 57.3636H19.375L22.4148 62.6534H22.5398L25.5795 57.3636H27.5739L23.3523 64.4318V69H21.6023V64.4318L17.3807 57.3636Z" fill="#3DADFF"/>
<path d="M51 40.8184C51 39.7138 50.1046 38.8184 49 38.8184C47.8954 38.8184 47 39.7138 47 40.8184H49H51ZM47.5858 108.233C48.3668 109.014 49.6332 109.014 50.4142 108.233L63.1421 95.5047C63.9232 94.7236 63.9232 93.4573 63.1421 92.6762C62.3611 91.8952 61.0948 91.8952 60.3137 92.6762L49 103.99L37.6863 92.6762C36.9052 91.8952 35.6389 91.8952 34.8579 92.6762C34.0768 93.4573 34.0768 94.7236 34.8579 95.5047L47.5858 108.233ZM49 40.8184H47V106.818H49H51V40.8184H49Z" fill="#3DADFF"/>
<path d="M49 40.8184C47.8954 40.8184 47 41.7138 47 42.8184C47 43.9229 47.8954 44.8184 49 44.8184V42.8184V40.8184ZM114.414 44.2326C115.195 43.4515 115.195 42.1852 114.414 41.4041L101.686 28.6762C100.905 27.8952 99.6389 27.8952 98.8579 28.6762C98.0768 29.4573 98.0768 30.7236 98.8579 31.5047L110.172 42.8184L98.8579 54.1321C98.0768 54.9131 98.0768 56.1794 98.8579 56.9605C99.6389 57.7415 100.905 57.7415 101.686 56.9605L114.414 44.2326ZM49 42.8184V44.8184H113V42.8184V40.8184H49V42.8184Z" fill="#F24822"/>
<rect x="113" y="75" width="32" height="128" rx="3" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="113" cy="203" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="113" cy="75" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<path d="M113 91V187" stroke="#1E1E1E" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel" stroke-dasharray="16 10"/>
<path d="M111 109.873C111 110.977 111.895 111.873 113 111.873C114.105 111.873 115 110.977 115 109.873H113H111ZM114.414 104.652C113.633 103.871 112.367 103.871 111.586 104.652L98.8579 117.38C98.0768 118.161 98.0768 119.427 98.8579 120.209C99.6389 120.99 100.905 120.99 101.686 120.209L113 108.895L124.314 120.209C125.095 120.99 126.361 120.99 127.142 120.209C127.923 119.427 127.923 118.161 127.142 117.38L114.414 104.652ZM113 109.873H115V106.066H113H111V109.873H113Z" fill="black"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 6.5 KiB

10
drawlist/linev_basics.svg

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

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After

4
drawlist/miter_only.svg

@ -38,6 +38,6 @@
<circle cx="357.389" cy="222" r="7" fill="black"/>
<circle cx="357.389" cy="38" r="7" fill="black"/>
<circle cx="357.389" cy="38" r="7" fill="black"/>
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Helvetica" font-size="12" letter-spacing="0em"><tspan x="231" y="277.14">MiterOnly</tspan></text>
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Helvetica" font-size="12" letter-spacing="0em"><tspan x="592" y="277.14">Default</tspan></text>
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="0em"><tspan x="231" y="280.547">MiterOnly</tspan></text>
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="0em"><tspan x="592" y="280.547">Default</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Before After
Before After

10
drawlist/ngon_basics.svg

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

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

36
drawlist/polyline_0.svg

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

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

Before After
Before After

23
drawlist/polyline_1.svg Normal file

@ -0,0 +1,23 @@
<svg width="698" height="299" viewBox="0 0 698 299" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="698" height="299" fill="white"/>
<path d="M318 40.5L242 254.5L289 272L318 187L348 272L396.5 254.5L318 40.5Z" fill="#66D575" stroke="#3E9B4B" stroke-width="4" stroke-linejoin="round"/>
<path d="M105 86.5L28 254.5L75 272L105 138L134 272L182.5 254.5L105 86.5Z" fill="#66D575" stroke="#3E9B4B" stroke-width="4" stroke-linejoin="round"/>
<path d="M517.5 88L477 257L525.5 269L537 220.5L549.5 269L597.5 257L557 88H517.5Z" fill="#66D575" stroke="#3E9B4B" stroke-width="4" stroke-linejoin="round"/>
<path d="M265.5 263L318.373 114L372.5 263" stroke="black" stroke-width="4" stroke-dasharray="12 12"/>
<path d="M51.5 263L104.373 114L158.5 263" stroke="black" stroke-width="4" stroke-dasharray="12 12"/>
<path d="M501 263L536.578 114L573 263" stroke="black" stroke-width="4" stroke-dasharray="12 12"/>
<path d="M317.293 187.707C317.683 188.098 318.317 188.098 318.707 187.707L325.071 181.343C325.462 180.953 325.462 180.319 325.071 179.929C324.681 179.538 324.047 179.538 323.657 179.929L318 185.586L312.343 179.929C311.953 179.538 311.319 179.538 310.929 179.929C310.538 180.319 310.538 180.953 310.929 181.343L317.293 187.707ZM318.707 40.2929C318.317 39.9024 317.683 39.9024 317.293 40.2929L310.929 46.6569C310.538 47.0474 310.538 47.6805 310.929 48.0711C311.319 48.4616 311.953 48.4616 312.343 48.0711L318 42.4142L323.657 48.0711C324.047 48.4616 324.681 48.4616 325.071 48.0711C325.462 47.6805 325.462 47.0474 325.071 46.6569L318.707 40.2929ZM318 187H319V41H318H317V187H318Z" fill="#FF003C"/>
<path d="M297.43 254.903C297.929 254.665 298.14 254.068 297.903 253.57L294.028 245.446C293.791 244.948 293.194 244.736 292.695 244.974C292.197 245.212 291.985 245.809 292.223 246.307L295.667 253.528L288.446 256.972C287.948 257.209 287.736 257.806 287.974 258.305C288.212 258.803 288.809 259.015 289.307 258.777L297.43 254.903ZM248.57 236.097C248.071 236.335 247.86 236.932 248.097 237.43L251.972 245.554C252.209 246.052 252.806 246.264 253.305 246.026C253.803 245.788 254.015 245.191 253.777 244.693L250.333 237.472L257.554 234.028C258.052 233.791 258.264 233.194 258.026 232.695C257.788 232.197 257.191 231.985 256.693 232.223L248.57 236.097ZM297 254L297.334 253.057L249.334 236.057L249 237L248.666 237.943L296.666 254.943L297 254Z" fill="#FF003C"/>
<path d="M79.4305 263.903C79.929 263.665 80.1403 263.068 79.9026 262.57L76.0284 254.446C75.7906 253.948 75.1938 253.736 74.6953 253.974C74.1968 254.212 73.9854 254.809 74.2231 255.307L77.6669 262.528L70.4461 265.972C69.9476 266.209 69.7362 266.806 69.974 267.305C70.2117 267.803 70.8085 268.015 71.307 267.777L79.4305 263.903ZM30.5695 245.097C30.071 245.335 29.8597 245.932 30.0974 246.43L33.9716 254.554C34.2094 255.052 34.8062 255.264 35.3047 255.026C35.8032 254.788 36.0146 254.191 35.7769 253.693L32.3331 246.472L39.5539 243.028C40.0524 242.791 40.2638 242.194 40.026 241.695C39.7883 241.197 39.1915 240.985 38.693 241.223L30.5695 245.097ZM79 263L79.3338 262.057L31.3338 245.057L31 246L30.6662 246.943L78.6662 263.943L79 263Z" fill="#FF003C"/>
<path d="M104.293 138.624C104.683 139.015 105.317 139.015 105.707 138.624L112.071 132.26C112.462 131.87 112.462 131.236 112.071 130.846C111.681 130.455 111.047 130.455 110.657 130.846L105 136.503L99.3432 130.846C98.9527 130.455 98.3195 130.455 97.929 130.846C97.5384 131.236 97.5384 131.87 97.929 132.26L104.293 138.624ZM105.707 86.7929C105.317 86.4024 104.683 86.4024 104.293 86.7929L97.9289 93.1569C97.5384 93.5474 97.5384 94.1805 97.9289 94.5711C98.3195 94.9616 98.9526 94.9616 99.3432 94.5711L105 88.9142L110.657 94.5711C111.047 94.9616 111.681 94.9616 112.071 94.5711C112.462 94.1805 112.462 93.5474 112.071 93.1569L105.707 86.7929ZM105 137.917L106 137.917L106 87.5L105 87.5L104 87.5L104 137.917L105 137.917Z" fill="#FF003C"/>
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="0em"><tspan x="289" y="27.5469">Miter join</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="0em"><tspan x="94" y="27.5469">Old</tspan></text>
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" font-weight="bold" letter-spacing="0em"><tspan x="499.172" y="27.5469">Bevel join</tspan></text>
<circle cx="537" cy="112" r="6" fill="black"/>
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="195" y="224.547">thickness</tspan></text>
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="354" y="115.547">miter scale</tspan></text>
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="12" y="113.547">thickness</tspan></text>
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="18" y="286.547">thickness</tspan></text>
<circle cx="104.5" cy="112.5" r="5.5" fill="black"/>
<circle cx="318" cy="112" r="6" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

34
drawlist/polyline_basics.svg

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

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 6 KiB

Before After
Before After

14
drawlist/quad_basics.svg

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

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Before After
Before After

161
drawlist/rect_0.svg

@ -1,5 +1,5 @@
<svg width="350" height="350" viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="350" height="350" fill="white"/>
<svg width="1110" height="379" viewBox="0 0 1110 379" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1110" height="379" fill="white"/>
<rect x="127" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="159" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="191" y="97" width="32" height="32" rx="3" fill="#66D575"/>
@ -38,9 +38,9 @@
<path d="M319 160.818L63 160.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 257L63 257" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 192.818L63 192.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M47.1705 47.1932C46.2727 47.1894 45.5057 46.9527 44.8693 46.483C44.233 46.0133 43.7462 45.3295 43.4091 44.4318C43.072 43.5341 42.9034 42.4527 42.9034 41.1875C42.9034 39.9261 43.072 38.8485 43.4091 37.9545C43.75 37.0606 44.2386 36.3788 44.875 35.9091C45.5152 35.4394 46.2803 35.2045 47.1705 35.2045C48.0606 35.2045 48.8239 35.4413 49.4602 35.9148C50.0966 36.3845 50.5833 37.0663 50.9205 37.9602C51.2614 38.8504 51.4318 39.9261 51.4318 41.1875C51.4318 42.4564 51.2633 43.5398 50.9261 44.4375C50.589 45.3314 50.1023 46.0152 49.4659 46.4886C48.8295 46.9583 48.0644 47.1932 47.1705 47.1932ZM47.1705 45.6761C47.9583 45.6761 48.5739 45.2917 49.017 44.5227C49.464 43.7538 49.6875 42.642 49.6875 41.1875C49.6875 40.2216 49.5852 39.4053 49.3807 38.7386C49.1799 38.0682 48.8902 37.5606 48.5114 37.2159C48.1364 36.8674 47.6894 36.6932 47.1705 36.6932C46.3864 36.6932 45.7708 37.0795 45.3239 37.8523C44.8769 38.625 44.6515 39.7367 44.6477 41.1875C44.6477 42.1572 44.7481 42.9773 44.9489 43.6477C45.1534 44.3144 45.4432 44.8201 45.8182 45.1648C46.1932 45.5057 46.6439 45.6761 47.1705 45.6761ZM55.0825 45.4091L54.9973 46.0284C54.9405 46.483 54.8439 46.9564 54.7075 47.4489C54.5749 47.9451 54.4367 48.4053 54.2928 48.8295C54.1526 49.2538 54.0371 49.5909 53.9462 49.8409H52.7416C52.7909 49.6061 52.859 49.2879 52.9462 48.8864C53.0333 48.4886 53.1185 48.0436 53.2018 47.5511C53.2852 47.0587 53.3477 46.5568 53.3893 46.0455L53.4462 45.4091H55.0825ZM60.9122 47.1932C60.0145 47.1894 59.2474 46.9527 58.6111 46.483C57.9747 46.0133 57.488 45.3295 57.1508 44.4318C56.8137 43.5341 56.6452 42.4527 56.6452 41.1875C56.6452 39.9261 56.8137 38.8485 57.1508 37.9545C57.4917 37.0606 57.9804 36.3788 58.6167 35.9091C59.2569 35.4394 60.0221 35.2045 60.9122 35.2045C61.8024 35.2045 62.5656 35.4413 63.202 35.9148C63.8383 36.3845 64.3251 37.0663 64.6622 37.9602C65.0031 38.8504 65.1736 39.9261 65.1736 41.1875C65.1736 42.4564 65.005 43.5398 64.6679 44.4375C64.3308 45.3314 63.844 46.0152 63.2077 46.4886C62.5713 46.9583 61.8061 47.1932 60.9122 47.1932ZM60.9122 45.6761C61.7001 45.6761 62.3156 45.2917 62.7588 44.5227C63.2058 43.7538 63.4292 42.642 63.4292 41.1875C63.4292 40.2216 63.327 39.4053 63.1224 38.7386C62.9217 38.0682 62.6319 37.5606 62.2531 37.2159C61.8781 36.8674 61.4311 36.6932 60.9122 36.6932C60.1281 36.6932 59.5126 37.0795 59.0656 37.8523C58.6186 38.625 58.3933 39.7367 58.3895 41.1875C58.3895 42.1572 58.4899 42.9773 58.6906 43.6477C58.8952 44.3144 59.1849 44.8201 59.5599 45.1648C59.9349 45.5057 60.3857 45.6761 60.9122 45.6761Z" fill="#1E1E1E"/>
<path d="M86.5 35.3636L89.2841 39.9148H89.375L92.1591 35.3636H94.1932L90.5682 41.1818L94.2159 47H92.1705L89.375 42.5114H89.2841L86.4886 47H84.4432L88.1534 41.1818L84.4659 35.3636H86.5Z" fill="#F24822"/>
<path d="M31.3807 79.3636H33.375L36.4148 84.6534H36.5398L39.5795 79.3636H41.5739L37.3523 86.4318V91H35.6023V86.4318L31.3807 79.3636Z" fill="#3DADFF"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="42" y="46.5469">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="84" y="46.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="31" y="90.5469">Y</tspan></text>
<path d="M65 62.8184C65 61.7138 64.1046 60.8184 63 60.8184C61.8954 60.8184 61 61.7138 61 62.8184H63H65ZM61.5858 130.233C62.3668 131.014 63.6332 131.014 64.4142 130.233L77.1421 117.505C77.9232 116.724 77.9232 115.457 77.1421 114.676C76.3611 113.895 75.0948 113.895 74.3137 114.676L63 125.99L51.6863 114.676C50.9052 113.895 49.6389 113.895 48.8579 114.676C48.0768 115.457 48.0768 116.724 48.8579 117.505L61.5858 130.233ZM63 62.8184H61V128.818H63H65V62.8184H63Z" fill="#3DADFF"/>
<path d="M63 62.8184C61.8954 62.8184 61 63.7138 61 64.8184C61 65.9229 61.8954 66.8184 63 66.8184V64.8184V62.8184ZM128.414 66.2326C129.195 65.4515 129.195 64.1852 128.414 63.4041L115.686 50.6762C114.905 49.8952 113.639 49.8952 112.858 50.6762C112.077 51.4573 112.077 52.7236 112.858 53.5047L124.172 64.8184L112.858 76.1321C112.077 76.9131 112.077 78.1794 112.858 78.9605C113.639 79.7415 114.905 79.7415 115.686 78.9605L128.414 66.2326ZM63 64.8184V66.8184H127V64.8184V62.8184H63V64.8184Z" fill="#F24822"/>
<rect x="95" y="97" width="192" height="192" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
@ -48,4 +48,155 @@
<rect x="95" y="97" width="192" height="192" rx="6" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="16 10"/>
<circle cx="287" cy="289" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="95" cy="97" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<rect x="501" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="501" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="437" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="469" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="501" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="533" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="565" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="597" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="629" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="661" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="661" y="97" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="661" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="661" y="161" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="661" y="193" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="661" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="661" y="257" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="661" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="629" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="597" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="565" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="533" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="501" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="469" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="437" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="437" y="258" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="437" y="227" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="437" y="192" width="32" height="33" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="437" y="162" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="437" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="437" y="98" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="501" y="161" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="501" y="193" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="501" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="533" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="565" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="597" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="597" y="193" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="597" y="161" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="597" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="565" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="533" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="533" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="565" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="595" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="629" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="629" y="161" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="629" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="629" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="629" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="469" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="532" y="258" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="501" y="258" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="563" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="596" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="629" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="469" y="130" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="469" y="162" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="469" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="469" y="224" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="469" y="255" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M437 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M469 65V321.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M501 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M533 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M565 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M597 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M661 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M629 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 64.8184L437 64.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 96.8184L437 96.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 128.818L437 128.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 225L437 225" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 289L437 289" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 321L437 321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 160.818L437 160.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 257L437 257" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M693 192.818L437 192.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="416" y="46.5469">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="458" y="46.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="405" y="90.5469">Y</tspan></text>
<path d="M439 62.8184C439 61.7138 438.105 60.8184 437 60.8184C435.895 60.8184 435 61.7138 435 62.8184H437H439ZM435.586 130.233C436.367 131.014 437.633 131.014 438.414 130.233L451.142 117.505C451.923 116.724 451.923 115.457 451.142 114.676C450.361 113.895 449.095 113.895 448.314 114.676L437 125.99L425.686 114.676C424.905 113.895 423.639 113.895 422.858 114.676C422.077 115.457 422.077 116.724 422.858 117.505L435.586 130.233ZM437 62.8184H435V128.818H437H439V62.8184H437Z" fill="#3DADFF"/>
<path d="M437 62.8184C435.895 62.8184 435 63.7138 435 64.8184C435 65.9229 435.895 66.8184 437 66.8184V64.8184V62.8184ZM502.414 66.2326C503.195 65.4515 503.195 64.1852 502.414 63.4041L489.686 50.6762C488.905 49.8952 487.639 49.8952 486.858 50.6762C486.077 51.4573 486.077 52.7236 486.858 53.5047L498.172 64.8184L486.858 76.1321C486.077 76.9131 486.077 78.1794 486.858 78.9605C487.639 79.7415 488.905 79.7415 489.686 78.9605L502.414 66.2326ZM437 64.8184V66.8184H501V64.8184V62.8184H437V64.8184Z" fill="#F24822"/>
<rect x="452" y="81" width="225" height="224" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="517" y="145" width="96" height="97.8181" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="469" y="97" width="192" height="192" rx="6" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="16 10"/>
<circle cx="661" cy="289" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="469" cy="97" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<rect x="890" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="890" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="890" y="161" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="890" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="890" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="922" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="954" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="986" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="986" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="986" y="161" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="986" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="954" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="922" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="922" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="954" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="984" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="1018" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="1018" y="161" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="1018" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="1018" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="1018" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="858" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="921" y="258" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="890" y="258" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="952" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="985" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="1018" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="858" y="130" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="858" y="162" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="858" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="858" y="224" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="858" y="255" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M826 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M858 65V321.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M890 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M922 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M954 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M986 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1050 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1018 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 64.8184L826 64.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 96.8184L826 96.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 128.818L826 128.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 225L826 225" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 289L826 289" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 321L826 321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 160.818L826 160.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 257L826 257" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M1082 192.818L826 192.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="805" y="46.5469">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="847" y="46.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="794" y="90.5469">Y</tspan></text>
<path d="M828 62.8184C828 61.7138 827.105 60.8184 826 60.8184C824.895 60.8184 824 61.7138 824 62.8184H826H828ZM824.586 130.233C825.367 131.014 826.633 131.014 827.414 130.233L840.142 117.505C840.923 116.724 840.923 115.457 840.142 114.676C839.361 113.895 838.095 113.895 837.314 114.676L826 125.99L814.686 114.676C813.905 113.895 812.639 113.895 811.858 114.676C811.077 115.457 811.077 116.724 811.858 117.505L824.586 130.233ZM826 62.8184H824V128.818H826H828V62.8184H826Z" fill="#3DADFF"/>
<path d="M826 62.8184C824.895 62.8184 824 63.7138 824 64.8184C824 65.9229 824.895 66.8184 826 66.8184V64.8184V62.8184ZM891.414 66.2326C892.195 65.4515 892.195 64.1852 891.414 63.4041L878.686 50.6762C877.905 49.8952 876.639 49.8952 875.858 50.6762C875.077 51.4573 875.077 52.7236 875.858 53.5047L887.172 64.8184L875.858 76.1321C875.077 76.9131 875.077 78.1794 875.858 78.9605C876.639 79.7415 877.905 79.7415 878.686 78.9605L891.414 66.2326ZM826 64.8184V66.8184H890V64.8184V62.8184H826V64.8184Z" fill="#F24822"/>
<rect x="858" y="96.8184" width="192" height="192.182" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="921" y="160.818" width="64" height="64.1819" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="858" y="97" width="192" height="192" rx="6" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="16 10"/>
<circle cx="1050" cy="289" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="858" cy="97" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="62" y="356.934">A</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="434" y="356.934">B</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="826" y="356.934">C</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Before After
Before After

91
drawlist/rect_1.svg

@ -1,91 +0,0 @@
<svg width="350" height="350" viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="350" height="350" fill="white"/>
<rect x="127" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="63" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="95" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="127" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="159" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="191" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="223" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="255" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="287" y="65" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="287" y="97" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="287" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="287" y="161" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="287" y="193" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="287" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="287" y="257" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="287" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="255" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="223" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="191" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="159" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="127" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="95" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="63" y="289" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="63" y="258" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="63" y="227" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="63" y="192" width="32" height="33" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="63" y="162" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="63" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="63" y="98" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="127" y="161" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="127" y="193" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="127" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="159" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="191" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="223" y="225" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="223" y="193" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="223" y="161" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="223" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="191" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="159" y="129" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="159" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="191" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="221" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="161" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="158" y="258" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="258" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="189" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="222" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="130" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="162" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="224" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="255" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M63 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M95 65V321.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M127 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M159 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M191 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M223 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M287 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M255 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 64.8184L63 64.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 96.8184L63 96.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 128.818L63 128.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 225L63 225" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 289L63 289" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 321L63 321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 160.818L63 160.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 257L63 257" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 192.818L63 192.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M47.1705 47.1932C46.2727 47.1894 45.5057 46.9527 44.8693 46.483C44.233 46.0133 43.7462 45.3295 43.4091 44.4318C43.072 43.5341 42.9034 42.4527 42.9034 41.1875C42.9034 39.9261 43.072 38.8485 43.4091 37.9545C43.75 37.0606 44.2386 36.3788 44.875 35.9091C45.5152 35.4394 46.2803 35.2045 47.1705 35.2045C48.0606 35.2045 48.8239 35.4413 49.4602 35.9148C50.0966 36.3845 50.5833 37.0663 50.9205 37.9602C51.2614 38.8504 51.4318 39.9261 51.4318 41.1875C51.4318 42.4564 51.2633 43.5398 50.9261 44.4375C50.589 45.3314 50.1023 46.0152 49.4659 46.4886C48.8295 46.9583 48.0644 47.1932 47.1705 47.1932ZM47.1705 45.6761C47.9583 45.6761 48.5739 45.2917 49.017 44.5227C49.464 43.7538 49.6875 42.642 49.6875 41.1875C49.6875 40.2216 49.5852 39.4053 49.3807 38.7386C49.1799 38.0682 48.8902 37.5606 48.5114 37.2159C48.1364 36.8674 47.6894 36.6932 47.1705 36.6932C46.3864 36.6932 45.7708 37.0795 45.3239 37.8523C44.8769 38.625 44.6515 39.7367 44.6477 41.1875C44.6477 42.1572 44.7481 42.9773 44.9489 43.6477C45.1534 44.3144 45.4432 44.8201 45.8182 45.1648C46.1932 45.5057 46.6439 45.6761 47.1705 45.6761ZM55.0825 45.4091L54.9973 46.0284C54.9405 46.483 54.8439 46.9564 54.7075 47.4489C54.5749 47.9451 54.4367 48.4053 54.2928 48.8295C54.1526 49.2538 54.0371 49.5909 53.9462 49.8409H52.7416C52.7909 49.6061 52.859 49.2879 52.9462 48.8864C53.0333 48.4886 53.1185 48.0436 53.2018 47.5511C53.2852 47.0587 53.3477 46.5568 53.3893 46.0455L53.4462 45.4091H55.0825ZM60.9122 47.1932C60.0145 47.1894 59.2474 46.9527 58.6111 46.483C57.9747 46.0133 57.488 45.3295 57.1508 44.4318C56.8137 43.5341 56.6452 42.4527 56.6452 41.1875C56.6452 39.9261 56.8137 38.8485 57.1508 37.9545C57.4917 37.0606 57.9804 36.3788 58.6167 35.9091C59.2569 35.4394 60.0221 35.2045 60.9122 35.2045C61.8024 35.2045 62.5656 35.4413 63.202 35.9148C63.8383 36.3845 64.3251 37.0663 64.6622 37.9602C65.0031 38.8504 65.1736 39.9261 65.1736 41.1875C65.1736 42.4564 65.005 43.5398 64.6679 44.4375C64.3308 45.3314 63.844 46.0152 63.2077 46.4886C62.5713 46.9583 61.8061 47.1932 60.9122 47.1932ZM60.9122 45.6761C61.7001 45.6761 62.3156 45.2917 62.7588 44.5227C63.2058 43.7538 63.4292 42.642 63.4292 41.1875C63.4292 40.2216 63.327 39.4053 63.1224 38.7386C62.9217 38.0682 62.6319 37.5606 62.2531 37.2159C61.8781 36.8674 61.4311 36.6932 60.9122 36.6932C60.1281 36.6932 59.5126 37.0795 59.0656 37.8523C58.6186 38.625 58.3933 39.7367 58.3895 41.1875C58.3895 42.1572 58.4899 42.9773 58.6906 43.6477C58.8952 44.3144 59.1849 44.8201 59.5599 45.1648C59.9349 45.5057 60.3857 45.6761 60.9122 45.6761Z" fill="#1E1E1E"/>
<path d="M86.5 35.3636L89.2841 39.9148H89.375L92.1591 35.3636H94.1932L90.5682 41.1818L94.2159 47H92.1705L89.375 42.5114H89.2841L86.4886 47H84.4432L88.1534 41.1818L84.4659 35.3636H86.5Z" fill="#F24822"/>
<path d="M31.3807 79.3636H33.375L36.4148 84.6534H36.5398L39.5795 79.3636H41.5739L37.3523 86.4318V91H35.6023V86.4318L31.3807 79.3636Z" fill="#3DADFF"/>
<path d="M65 62.8184C65 61.7138 64.1046 60.8184 63 60.8184C61.8954 60.8184 61 61.7138 61 62.8184H63H65ZM61.5858 130.233C62.3668 131.014 63.6332 131.014 64.4142 130.233L77.1421 117.505C77.9232 116.724 77.9232 115.457 77.1421 114.676C76.3611 113.895 75.0948 113.895 74.3137 114.676L63 125.99L51.6863 114.676C50.9052 113.895 49.6389 113.895 48.8579 114.676C48.0768 115.457 48.0768 116.724 48.8579 117.505L61.5858 130.233ZM63 62.8184H61V128.818H63H65V62.8184H63Z" fill="#3DADFF"/>
<path d="M63 62.8184C61.8954 62.8184 61 63.7138 61 64.8184C61 65.9229 61.8954 66.8184 63 66.8184V64.8184V62.8184ZM128.414 66.2326C129.195 65.4515 129.195 64.1852 128.414 63.4041L115.686 50.6762C114.905 49.8952 113.639 49.8952 112.858 50.6762C112.077 51.4573 112.077 52.7236 112.858 53.5047L124.172 64.8184L112.858 76.1321C112.077 76.9131 112.077 78.1794 112.858 78.9605C113.639 79.7415 114.905 79.7415 115.686 78.9605L128.414 66.2326ZM63 64.8184V66.8184H127V64.8184V62.8184H63V64.8184Z" fill="#F24822"/>
<rect x="78" y="81" width="225" height="224" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="143" y="145" width="96" height="97.8181" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="95" y="97" width="192" height="192" rx="6" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="16 10"/>
<circle cx="287" cy="289" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="95" cy="97" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

63
drawlist/rect_2.svg

@ -1,63 +0,0 @@
<svg width="350" height="350" viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="350" height="350" fill="white"/>
<rect x="127" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="161" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="159" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="191" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="223" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="223" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="223" y="161" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="223" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="191" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="159" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="159" y="98" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="191" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="221" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="161" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="129" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="225" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="97" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="158" y="258" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="258" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="189" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="222" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="257" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="130" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="162" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="193" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="224" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="255" width="32" height="32" rx="3" fill="#66D575"/>
<path d="M63 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M95 65V321.182" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M127 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M159 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M191 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M223 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M287 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M255 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 64.8184V321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 64.8184L63 64.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 96.8184L63 96.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 128.818L63 128.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 225L63 225" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 289L63 289" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 321L63 321" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 160.818L63 160.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 257L63 257" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 192.818L63 192.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M47.1705 47.1932C46.2727 47.1894 45.5057 46.9527 44.8693 46.483C44.233 46.0133 43.7462 45.3295 43.4091 44.4318C43.072 43.5341 42.9034 42.4527 42.9034 41.1875C42.9034 39.9261 43.072 38.8485 43.4091 37.9545C43.75 37.0606 44.2386 36.3788 44.875 35.9091C45.5152 35.4394 46.2803 35.2045 47.1705 35.2045C48.0606 35.2045 48.8239 35.4413 49.4602 35.9148C50.0966 36.3845 50.5833 37.0663 50.9205 37.9602C51.2614 38.8504 51.4318 39.9261 51.4318 41.1875C51.4318 42.4564 51.2633 43.5398 50.9261 44.4375C50.589 45.3314 50.1023 46.0152 49.4659 46.4886C48.8295 46.9583 48.0644 47.1932 47.1705 47.1932ZM47.1705 45.6761C47.9583 45.6761 48.5739 45.2917 49.017 44.5227C49.464 43.7538 49.6875 42.642 49.6875 41.1875C49.6875 40.2216 49.5852 39.4053 49.3807 38.7386C49.1799 38.0682 48.8902 37.5606 48.5114 37.2159C48.1364 36.8674 47.6894 36.6932 47.1705 36.6932C46.3864 36.6932 45.7708 37.0795 45.3239 37.8523C44.8769 38.625 44.6515 39.7367 44.6477 41.1875C44.6477 42.1572 44.7481 42.9773 44.9489 43.6477C45.1534 44.3144 45.4432 44.8201 45.8182 45.1648C46.1932 45.5057 46.6439 45.6761 47.1705 45.6761ZM55.0825 45.4091L54.9973 46.0284C54.9405 46.483 54.8439 46.9564 54.7075 47.4489C54.5749 47.9451 54.4367 48.4053 54.2928 48.8295C54.1526 49.2538 54.0371 49.5909 53.9462 49.8409H52.7416C52.7909 49.6061 52.859 49.2879 52.9462 48.8864C53.0333 48.4886 53.1185 48.0436 53.2018 47.5511C53.2852 47.0587 53.3477 46.5568 53.3893 46.0455L53.4462 45.4091H55.0825ZM60.9122 47.1932C60.0145 47.1894 59.2474 46.9527 58.6111 46.483C57.9747 46.0133 57.488 45.3295 57.1508 44.4318C56.8137 43.5341 56.6452 42.4527 56.6452 41.1875C56.6452 39.9261 56.8137 38.8485 57.1508 37.9545C57.4917 37.0606 57.9804 36.3788 58.6167 35.9091C59.2569 35.4394 60.0221 35.2045 60.9122 35.2045C61.8024 35.2045 62.5656 35.4413 63.202 35.9148C63.8383 36.3845 64.3251 37.0663 64.6622 37.9602C65.0031 38.8504 65.1736 39.9261 65.1736 41.1875C65.1736 42.4564 65.005 43.5398 64.6679 44.4375C64.3308 45.3314 63.844 46.0152 63.2077 46.4886C62.5713 46.9583 61.8061 47.1932 60.9122 47.1932ZM60.9122 45.6761C61.7001 45.6761 62.3156 45.2917 62.7588 44.5227C63.2058 43.7538 63.4292 42.642 63.4292 41.1875C63.4292 40.2216 63.327 39.4053 63.1224 38.7386C62.9217 38.0682 62.6319 37.5606 62.2531 37.2159C61.8781 36.8674 61.4311 36.6932 60.9122 36.6932C60.1281 36.6932 59.5126 37.0795 59.0656 37.8523C58.6186 38.625 58.3933 39.7367 58.3895 41.1875C58.3895 42.1572 58.4899 42.9773 58.6906 43.6477C58.8952 44.3144 59.1849 44.8201 59.5599 45.1648C59.9349 45.5057 60.3857 45.6761 60.9122 45.6761Z" fill="#1E1E1E"/>
<path d="M86.5 35.3636L89.2841 39.9148H89.375L92.1591 35.3636H94.1932L90.5682 41.1818L94.2159 47H92.1705L89.375 42.5114H89.2841L86.4886 47H84.4432L88.1534 41.1818L84.4659 35.3636H86.5Z" fill="#F24822"/>
<path d="M31.3807 79.3636H33.375L36.4148 84.6534H36.5398L39.5795 79.3636H41.5739L37.3523 86.4318V91H35.6023V86.4318L31.3807 79.3636Z" fill="#3DADFF"/>
<path d="M65 62.8184C65 61.7138 64.1046 60.8184 63 60.8184C61.8954 60.8184 61 61.7138 61 62.8184H63H65ZM61.5858 130.233C62.3668 131.014 63.6332 131.014 64.4142 130.233L77.1421 117.505C77.9232 116.724 77.9232 115.457 77.1421 114.676C76.3611 113.895 75.0948 113.895 74.3137 114.676L63 125.99L51.6863 114.676C50.9052 113.895 49.6389 113.895 48.8579 114.676C48.0768 115.457 48.0768 116.724 48.8579 117.505L61.5858 130.233ZM63 62.8184H61V128.818H63H65V62.8184H63Z" fill="#3DADFF"/>
<path d="M63 62.8184C61.8954 62.8184 61 63.7138 61 64.8184C61 65.9229 61.8954 66.8184 63 66.8184V64.8184V62.8184ZM128.414 66.2326C129.195 65.4515 129.195 64.1852 128.414 63.4041L115.686 50.6762C114.905 49.8952 113.639 49.8952 112.858 50.6762C112.077 51.4573 112.077 52.7236 112.858 53.5047L124.172 64.8184L112.858 76.1321C112.077 76.9131 112.077 78.1794 112.858 78.9605C113.639 79.7415 114.905 79.7415 115.686 78.9605L128.414 66.2326ZM63 64.8184V66.8184H127V64.8184V62.8184H63V64.8184Z" fill="#F24822"/>
<rect x="95" y="96.8184" width="192" height="192.182" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="158" y="160.818" width="64" height="64.1819" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<rect x="95" y="97" width="192" height="192" rx="6" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="16 10"/>
<circle cx="287" cy="289" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="95" cy="97" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 8.6 KiB

8
drawlist/rect_basics.svg

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

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

60
drawlist/rect_filled_0.svg

@ -1,5 +1,5 @@
<svg width="350" height="300" viewBox="0 0 350 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="350" height="300" fill="white"/>
<svg width="729" height="319" viewBox="0 0 729 319" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="729" height="319" fill="white"/>
<rect x="127" y="105" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="136" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="167" width="32" height="32" rx="3" fill="#66D575"/>
@ -34,12 +34,62 @@
<path d="M319 167.818L63 167.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 264L63 264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 199.818L63 199.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M47.1705 54.1932C46.2727 54.1894 45.5057 53.9527 44.8693 53.483C44.233 53.0133 43.7462 52.3295 43.4091 51.4318C43.072 50.5341 42.9034 49.4527 42.9034 48.1875C42.9034 46.9261 43.072 45.8485 43.4091 44.9545C43.75 44.0606 44.2386 43.3788 44.875 42.9091C45.5152 42.4394 46.2803 42.2045 47.1705 42.2045C48.0606 42.2045 48.8239 42.4413 49.4602 42.9148C50.0966 43.3845 50.5833 44.0663 50.9205 44.9602C51.2614 45.8504 51.4318 46.9261 51.4318 48.1875C51.4318 49.4564 51.2633 50.5398 50.9261 51.4375C50.589 52.3314 50.1023 53.0152 49.4659 53.4886C48.8295 53.9583 48.0644 54.1932 47.1705 54.1932ZM47.1705 52.6761C47.9583 52.6761 48.5739 52.2917 49.017 51.5227C49.464 50.7538 49.6875 49.642 49.6875 48.1875C49.6875 47.2216 49.5852 46.4053 49.3807 45.7386C49.1799 45.0682 48.8902 44.5606 48.5114 44.2159C48.1364 43.8674 47.6894 43.6932 47.1705 43.6932C46.3864 43.6932 45.7708 44.0795 45.3239 44.8523C44.8769 45.625 44.6515 46.7367 44.6477 48.1875C44.6477 49.1572 44.7481 49.9773 44.9489 50.6477C45.1534 51.3144 45.4432 51.8201 45.8182 52.1648C46.1932 52.5057 46.6439 52.6761 47.1705 52.6761ZM55.0825 52.4091L54.9973 53.0284C54.9405 53.483 54.8439 53.9564 54.7075 54.4489C54.5749 54.9451 54.4367 55.4053 54.2928 55.8295C54.1526 56.2538 54.0371 56.5909 53.9462 56.8409H52.7416C52.7909 56.6061 52.859 56.2879 52.9462 55.8864C53.0333 55.4886 53.1185 55.0436 53.2018 54.5511C53.2852 54.0587 53.3477 53.5568 53.3893 53.0455L53.4462 52.4091H55.0825ZM60.9122 54.1932C60.0145 54.1894 59.2474 53.9527 58.6111 53.483C57.9747 53.0133 57.488 52.3295 57.1508 51.4318C56.8137 50.5341 56.6452 49.4527 56.6452 48.1875C56.6452 46.9261 56.8137 45.8485 57.1508 44.9545C57.4917 44.0606 57.9804 43.3788 58.6167 42.9091C59.2569 42.4394 60.0221 42.2045 60.9122 42.2045C61.8024 42.2045 62.5656 42.4413 63.202 42.9148C63.8383 43.3845 64.3251 44.0663 64.6622 44.9602C65.0031 45.8504 65.1736 46.9261 65.1736 48.1875C65.1736 49.4564 65.005 50.5398 64.6679 51.4375C64.3308 52.3314 63.844 53.0152 63.2077 53.4886C62.5713 53.9583 61.8061 54.1932 60.9122 54.1932ZM60.9122 52.6761C61.7001 52.6761 62.3156 52.2917 62.7588 51.5227C63.2058 50.7538 63.4292 49.642 63.4292 48.1875C63.4292 47.2216 63.327 46.4053 63.1224 45.7386C62.9217 45.0682 62.6319 44.5606 62.2531 44.2159C61.8781 43.8674 61.4311 43.6932 60.9122 43.6932C60.1281 43.6932 59.5126 44.0795 59.0656 44.8523C58.6186 45.625 58.3933 46.7367 58.3895 48.1875C58.3895 49.1572 58.4899 49.9773 58.6906 50.6477C58.8952 51.3144 59.1849 51.8201 59.5599 52.1648C59.9349 52.5057 60.3857 52.6761 60.9122 52.6761Z" fill="#1E1E1E"/>
<path d="M86.5 42.3636L89.2841 46.9148H89.375L92.1591 42.3636H94.1932L90.5682 48.1818L94.2159 54H92.1705L89.375 49.5114H89.2841L86.4886 54H84.4432L88.1534 48.1818L84.4659 42.3636H86.5Z" fill="#F24822"/>
<path d="M31.3807 86.3636H33.375L36.4148 91.6534H36.5398L39.5795 86.3636H41.5739L37.3523 93.4318V98H35.6023V93.4318L31.3807 86.3636Z" fill="#3DADFF"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="42" y="53.5469">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="84" y="53.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="31" y="97.5469">Y</tspan></text>
<path d="M65 69.8184C65 68.7138 64.1046 67.8184 63 67.8184C61.8954 67.8184 61 68.7138 61 69.8184H63H65ZM61.5858 137.233C62.3668 138.014 63.6332 138.014 64.4142 137.233L77.1421 124.505C77.9232 123.724 77.9232 122.457 77.1421 121.676C76.3611 120.895 75.0948 120.895 74.3137 121.676L63 132.99L51.6863 121.676C50.9052 120.895 49.6389 120.895 48.8579 121.676C48.0768 122.457 48.0768 123.724 48.8579 124.505L61.5858 137.233ZM63 69.8184H61V135.818H63H65V69.8184H63Z" fill="#3DADFF"/>
<path d="M63 69.8184C61.8954 69.8184 61 70.7138 61 71.8184C61 72.9229 61.8954 73.8184 63 73.8184V71.8184V69.8184ZM128.414 73.2326C129.195 72.4515 129.195 71.1852 128.414 70.4041L115.686 57.6762C114.905 56.8952 113.639 56.8952 112.858 57.6762C112.077 58.4573 112.077 59.7236 112.858 60.5047L124.172 71.8184L112.858 83.1321C112.077 83.9131 112.077 85.1794 112.858 85.9605C113.639 86.7415 114.905 86.7415 115.686 85.9605L128.414 73.2326ZM63 71.8184V73.8184H127V71.8184V69.8184H63V71.8184Z" fill="#F24822"/>
<rect x="95" y="105" width="192" height="112" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="287" cy="216" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="95" cy="104" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<rect x="483" y="105" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="483" y="136" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="483" y="167" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="483" y="198" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="515" y="105" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="515" y="136" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="515" y="167" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="515" y="198" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="547" y="104" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="547" y="135" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="547" y="166" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="547" y="201" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="577" y="104" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="577" y="135" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="577" y="166" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="578" y="200" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="611" y="200" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="611" y="168" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="611" y="136" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="611" y="104" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="451" y="104" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="451" y="137" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="451" y="169" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="451" y="200" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<path d="M419 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M451 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M483 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M515 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M547 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M579 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M643 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M611 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M675 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M675 71.8184L419 71.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M675 103.818L419 103.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M675 135.818L419 135.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M675 232L419 232" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M675 167.818L419 167.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M675 264L419 264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M675 199.818L419 199.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="398" y="53.5469">0,0</tspan></text>
<text fill="#F24822" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="440" y="53.5469">X</tspan></text>
<text fill="#3DADFF" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="-0.011em"><tspan x="387" y="97.5469">Y</tspan></text>
<path d="M421 69.8184C421 68.7138 420.105 67.8184 419 67.8184C417.895 67.8184 417 68.7138 417 69.8184H419H421ZM417.586 137.233C418.367 138.014 419.633 138.014 420.414 137.233L433.142 124.505C433.923 123.724 433.923 122.457 433.142 121.676C432.361 120.895 431.095 120.895 430.314 121.676L419 132.99L407.686 121.676C406.905 120.895 405.639 120.895 404.858 121.676C404.077 122.457 404.077 123.724 404.858 124.505L417.586 137.233ZM419 69.8184H417V135.818H419H421V69.8184H419Z" fill="#3DADFF"/>
<path d="M419 69.8184C417.895 69.8184 417 70.7138 417 71.8184C417 72.9229 417.895 73.8184 419 73.8184V71.8184V69.8184ZM484.414 73.2326C485.195 72.4515 485.195 71.1852 484.414 70.4041L471.686 57.6762C470.905 56.8952 469.639 56.8952 468.858 57.6762C468.077 58.4573 468.077 59.7236 468.858 60.5047L480.172 71.8184L468.858 83.1321C468.077 83.9131 468.077 85.1794 468.858 85.9605C469.639 86.7415 470.905 86.7415 471.686 85.9605L484.414 73.2326ZM419 71.8184V73.8184H483V71.8184V69.8184H419V71.8184Z" fill="#F24822"/>
<rect x="451" y="105" width="192" height="112" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="643" cy="216" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="451" cy="104" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="64" y="295.934">A</tspan></text>
<text fill="#1E1E1E" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="20" font-weight="bold" letter-spacing="-0.011em"><tspan x="420" y="295.934">B</tspan></text>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Before After
Before After

51
drawlist/rect_filled_1.svg

@ -1,51 +0,0 @@
<svg width="350" height="300" viewBox="0 0 350 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="350" height="300" fill="white"/>
<rect x="127" y="105" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="136" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="167" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="127" y="198" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="159" y="105" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="159" y="136" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="159" y="167" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="159" y="198" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="191" y="104" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="191" y="135" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="191" y="166" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="191" y="201" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="221" y="104" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="221" y="135" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="221" y="166" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="222" y="200" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="255" y="200" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<rect x="255" y="168" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="136" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="255" y="104" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="104" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="137" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="169" width="32" height="32" rx="3" fill="#66D575"/>
<rect x="95" y="200" width="32" height="32" rx="3" fill="#66D575" fill-opacity="0.5"/>
<path d="M63 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M95 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M127 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M159 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M191 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M223 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M287 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M255 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 71.8184V264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 71.8184L63 71.8184" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 103.818L63 103.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 135.818L63 135.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 232L63 232" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 167.818L63 167.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 264L63 264" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M319 199.818L63 199.818" stroke="#B3B3B3" stroke-width="4" stroke-linecap="round" stroke-linejoin="bevel"/>
<path d="M47.1705 54.1932C46.2727 54.1894 45.5057 53.9527 44.8693 53.483C44.233 53.0133 43.7462 52.3295 43.4091 51.4318C43.072 50.5341 42.9034 49.4527 42.9034 48.1875C42.9034 46.9261 43.072 45.8485 43.4091 44.9545C43.75 44.0606 44.2386 43.3788 44.875 42.9091C45.5152 42.4394 46.2803 42.2045 47.1705 42.2045C48.0606 42.2045 48.8239 42.4413 49.4602 42.9148C50.0966 43.3845 50.5833 44.0663 50.9205 44.9602C51.2614 45.8504 51.4318 46.9261 51.4318 48.1875C51.4318 49.4564 51.2633 50.5398 50.9261 51.4375C50.589 52.3314 50.1023 53.0152 49.4659 53.4886C48.8295 53.9583 48.0644 54.1932 47.1705 54.1932ZM47.1705 52.6761C47.9583 52.6761 48.5739 52.2917 49.017 51.5227C49.464 50.7538 49.6875 49.642 49.6875 48.1875C49.6875 47.2216 49.5852 46.4053 49.3807 45.7386C49.1799 45.0682 48.8902 44.5606 48.5114 44.2159C48.1364 43.8674 47.6894 43.6932 47.1705 43.6932C46.3864 43.6932 45.7708 44.0795 45.3239 44.8523C44.8769 45.625 44.6515 46.7367 44.6477 48.1875C44.6477 49.1572 44.7481 49.9773 44.9489 50.6477C45.1534 51.3144 45.4432 51.8201 45.8182 52.1648C46.1932 52.5057 46.6439 52.6761 47.1705 52.6761ZM55.0825 52.4091L54.9973 53.0284C54.9405 53.483 54.8439 53.9564 54.7075 54.4489C54.5749 54.9451 54.4367 55.4053 54.2928 55.8295C54.1526 56.2538 54.0371 56.5909 53.9462 56.8409H52.7416C52.7909 56.6061 52.859 56.2879 52.9462 55.8864C53.0333 55.4886 53.1185 55.0436 53.2018 54.5511C53.2852 54.0587 53.3477 53.5568 53.3893 53.0455L53.4462 52.4091H55.0825ZM60.9122 54.1932C60.0145 54.1894 59.2474 53.9527 58.6111 53.483C57.9747 53.0133 57.488 52.3295 57.1508 51.4318C56.8137 50.5341 56.6452 49.4527 56.6452 48.1875C56.6452 46.9261 56.8137 45.8485 57.1508 44.9545C57.4917 44.0606 57.9804 43.3788 58.6167 42.9091C59.2569 42.4394 60.0221 42.2045 60.9122 42.2045C61.8024 42.2045 62.5656 42.4413 63.202 42.9148C63.8383 43.3845 64.3251 44.0663 64.6622 44.9602C65.0031 45.8504 65.1736 46.9261 65.1736 48.1875C65.1736 49.4564 65.005 50.5398 64.6679 51.4375C64.3308 52.3314 63.844 53.0152 63.2077 53.4886C62.5713 53.9583 61.8061 54.1932 60.9122 54.1932ZM60.9122 52.6761C61.7001 52.6761 62.3156 52.2917 62.7588 51.5227C63.2058 50.7538 63.4292 49.642 63.4292 48.1875C63.4292 47.2216 63.327 46.4053 63.1224 45.7386C62.9217 45.0682 62.6319 44.5606 62.2531 44.2159C61.8781 43.8674 61.4311 43.6932 60.9122 43.6932C60.1281 43.6932 59.5126 44.0795 59.0656 44.8523C58.6186 45.625 58.3933 46.7367 58.3895 48.1875C58.3895 49.1572 58.4899 49.9773 58.6906 50.6477C58.8952 51.3144 59.1849 51.8201 59.5599 52.1648C59.9349 52.5057 60.3857 52.6761 60.9122 52.6761Z" fill="#1E1E1E"/>
<path d="M86.5 42.3636L89.2841 46.9148H89.375L92.1591 42.3636H94.1932L90.5682 48.1818L94.2159 54H92.1705L89.375 49.5114H89.2841L86.4886 54H84.4432L88.1534 48.1818L84.4659 42.3636H86.5Z" fill="#F24822"/>
<path d="M31.3807 86.3636H33.375L36.4148 91.6534H36.5398L39.5795 86.3636H41.5739L37.3523 93.4318V98H35.6023V93.4318L31.3807 86.3636Z" fill="#3DADFF"/>
<path d="M65 69.8184C65 68.7138 64.1046 67.8184 63 67.8184C61.8954 67.8184 61 68.7138 61 69.8184H63H65ZM61.5858 137.233C62.3668 138.014 63.6332 138.014 64.4142 137.233L77.1421 124.505C77.9232 123.724 77.9232 122.457 77.1421 121.676C76.3611 120.895 75.0948 120.895 74.3137 121.676L63 132.99L51.6863 121.676C50.9052 120.895 49.6389 120.895 48.8579 121.676C48.0768 122.457 48.0768 123.724 48.8579 124.505L61.5858 137.233ZM63 69.8184H61V135.818H63H65V69.8184H63Z" fill="#3DADFF"/>
<path d="M63 69.8184C61.8954 69.8184 61 70.7138 61 71.8184C61 72.9229 61.8954 73.8184 63 73.8184V71.8184V69.8184ZM128.414 73.2326C129.195 72.4515 129.195 71.1852 128.414 70.4041L115.686 57.6762C114.905 56.8952 113.639 56.8952 112.858 57.6762C112.077 58.4573 112.077 59.7236 112.858 60.5047L124.172 71.8184L112.858 83.1321C112.077 83.9131 112.077 85.1794 112.858 85.9605C113.639 86.7415 114.905 86.7415 115.686 85.9605L128.414 73.2326ZM63 71.8184V73.8184H127V71.8184V69.8184H63V71.8184Z" fill="#F24822"/>
<rect x="95" y="105" width="192" height="112" rx="6" stroke="#757575" stroke-width="4" stroke-linecap="round"/>
<circle cx="287" cy="216" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
<circle cx="95" cy="104" r="8" fill="#1E1E1E" stroke="#242424" stroke-width="4" stroke-linecap="round"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 7.7 KiB

12
drawlist/triangle_basics.svg

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

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

Before After
Before After