mirror of
https://github.com/ocornut/imgui.git
synced 2026-11-06 06:25:54 +01:00
Added polyline rendering updated to latest code
Mikko Mononen
ocornut
parent
19c528f3e8
commit
5cc70cb4f6
113
Polyline-Rendering.md
Normal file
113
Polyline-Rendering.md
Normal file
@ -0,0 +1,113 @@
|
||||
# Anti-aliased Polyline Rendering
|
||||
|
||||
|
||||
|
||||
The anti-aliased polyline rendering is based on expanding the stroke of the polyline, and making it slightly blurry by creating a fringe around the perimeter.
|
||||
|
||||
The fringe approximates box filtering of the line geometry. That is, you can get anti-aliased result by taking multiple samples (e.g. MSAA), analytically, or prefiltering the line and then taking just one sample. For more information, see "Prefiltered Antialiased Lines Using Half-Plane Distance Functions"
|
||||
https://bitsavers.trailing-edge.com/pdf/dec/tech_reports/WRL-98-2.pdf
|
||||
|
||||
Rest of the document focuses in how we can efficiently and robustly generate the outline and fringe geometry.
|
||||
|
||||
## Corner Types
|
||||
|
||||
|
||||
|
||||
The stroke is expanded around the polyline along the normal of the lines. To create the continuous line, the corners are mitered or beveled depending how sharp the corner is.
|
||||
|
||||
The miter distance and direction can be calculated quite neatly from the normals of the neighboring segments. You can find detailed derivation here: https://www.angusj.com/clipper2/Docs/Trigonometry.htm
|
||||
|
||||
**Miter join** is the cheapest join, since it requires to only offset two points in opposite directions. The join can be used for most corners. With default miter limit of 4.0, miters will generally be used up to 150 degree corners.
|
||||
|
||||
**Belvel join** is a bit more complicated, and is used when the corners become very sharp. The sharper the turn, the more towards infinity the miter off set will shoot. Bevel is used to prevent the super spiky corners.
|
||||
|
||||
|
||||
|
||||
There are several ways to do create the bevel. The simplest way is to just offset the bevel corners along the normals, but that creates a corner that is very hard to anti-alias with the method that is explained later.
|
||||
|
||||
Instead, we are place the bevel points half stroke thickness away from the corner. It is a bit more expensive than the simple method, but allows us to control the texture coordinates used for texture based anti-aliasing. The bevel is essentially double miter, but we calculate it based on *side offset* which allows to easily reuse the distance on each side of the bevel.
|
||||
|
||||
## Tessellation
|
||||
|
||||
|
||||
|
||||
The stroke tessellation is built so that the last 2 vertices (marked red, will be 0 and 1 in next corner), are always in the same order. This helps connecting the corners.
|
||||
|
||||
The middle vertex on beveled corners is needed to avoid texture strecthing (see Texture Coordinates section later).
|
||||
|
||||
|
||||
### Sharp Inner Corners
|
||||
|
||||
|
||||
|
||||
When the corner is sharp, the inner corner will overshoot too. For outer corners we nearly handle that by beveling, but inner corners are trickier. One option for inner corners would be fold to create overlap, similar to the leftmost case in the _Corner Types_ image above. We chose to no use that since it requires more triangles or creates a T-junction (which will cause flickring pixels).
|
||||
|
||||
Alternative solution is to just constrain the distance. Our solution is to allow the inner miter (on beveled joins) to only expand up to the maximun on the thickness, and adjacent edge lengths. The edge lengths guarantee that the miter position stays within the bounding box of the geometry, and thickness is there to ensure that small segments do not get over constrained.
|
||||
|
||||
### Stroke Position
|
||||
|
||||
|
||||
|
||||
To make the polyline rendering more useful for pixel perfect UI rendering, the renderer supports stroke position. Stroke position controls whether the stroke is rendered inside, center, or outside of the provided path. Inside is right along path direction.
|
||||
|
||||
The offset is simply implemented by biasing the extrusion of the stroke either left or right.
|
||||
|
||||
|
||||
## Fringes
|
||||
|
||||
The fringes that describe the pre-filtered shape can be created any means necessary, as long as the pixels at the outer edge have transparency of 0, and the pixels close to the center have have the stroke color.
|
||||
|
||||
Since the fringe represents filtered results, the start of the fringe is placed from half filter width outside the stroke edge to half filter width inside. For this reason we never let the line width to be smaller than twice the filter width, and instead just adjust the opacity of the lines smaller than filter width. This is still an approximation (we're dealing with square filter after all), but works and is in the right spirit. We use filter width (which is the fringe width) of 1 pixel.
|
||||
|
||||
### Fringe Geometry
|
||||
|
||||
One option is to just add extra column of triangles each side of the line, and adjust the colors of the outer vertices. This would mean that in order to render a thick line, we would need 3 columns of triangles.
|
||||
|
||||
Instead we use textures to describe the fringe, which allows us to use just one column of triangles (2 triangles per segment).
|
||||
|
||||
|
||||
|
||||
The basic idea is that we create textures that describe the filtered result, and use the bilinear filtering to create the alpha across the line. This saves us rendering a lot of small triangles.
|
||||
|
||||
For line ends we use triangles and transparency, since wrapping around the texture would take more triangles.
|
||||
|
||||
### Texture Coordinates
|
||||
|
||||
|
||||
|
||||
Bevel joins are a bit tricky to texture, so that we keep the fringe width consistent. The general idea is to try to avoid texture stretching (even if we use 1D texture). It's a bit of balance between triangle count, vertex placement, and complexity of calculations.
|
||||
|
||||
It can help to think how the shape would unfold to reason if the texture would stretch. Many of the issues can be solved by placing a vertex at the middle of the corner. This is also why we chose the specific corner geometry. When we place the vertex at the corner, the distance to the bevel edge will be haf thickness, which makes it trivial to place the texture coordinate at the middle too.
|
||||
|
||||
### Fringe Textures
|
||||
|
||||
For integer thicknesses, we can create textures with transparent pixels at the edges, and opaque pixels in the middle. Note, that even if 1px line has 1 solid pixel, after biliear interpolation, it is interpreted as a tent!
|
||||
|
||||
For that reason, we should align the center of the texel to the fringe edge. The texel values are stored at texel centers.
|
||||
|
||||
Fractional line thicknesses can be achieved by selecting the nearest texture and scaling the fringe so that half fringe (zero crossing) is at the line thickness.
|
||||
|
||||
The error is proportional to the requested size vs the size of the texture. The larger the thickness, the less error. For smaller sizes (< 4 px) where the texture transition can be very visible (especially on round, off grid, shapes), we can oversample the textures, and reduce the error.
|
||||
|
||||
|
||||
### Texture Selection Examples
|
||||
|
||||
|
||||
|
||||
**Animation 1:** How the 1 px prefiltered line gets sample to pixels. Note that even if the texture looks like 1 px wide, it is actually representing the result of box filter, which is tent shaped.
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
**Animation 2:** The prefiltered texture is selected based on the line thickness. For fractional thickness, the error is handled by scaling the fringe. Note how the fringe correction gets smaller the wider the texture is.
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
**Animation 3:** When the line position is slightly off pixel (e.g. at rounded corners), the texture size change can be very visible at the smaller values. This can be solved by super sampling the texture.
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
**Animation 4:** With 4x super sampling the transition on smaller sizes is much smoother. Note how the tent shape is more visible on the super sampled textures.
|
||||
<br>
|
||||
24
polyline_rendering/bevel_side_offset.svg
Normal file
24
polyline_rendering/bevel_side_offset.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<svg width="297" height="277" viewBox="0 0 297 277" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="297" height="277" fill="white"/>
|
||||
<path d="M107 80.5L87.5 249L157 255.5L163.5 184.5L205 244.5L261 202.5L152.5 69L107 80.5Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="110" y="129.547">n0</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="156" y="114.547">n1</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="140" y="147.547">p1</tspan></text>
|
||||
<text fill="#0999C9" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="133" y="59.5469">bevel_normal</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="26" y="62.5469">side_offset</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="80" y="31.5469">Bevel side offset</tspan></text>
|
||||
<line x1="124.503" y1="253.949" x2="139.503" y2="108.949" stroke="black" stroke-dasharray="2 2"/>
|
||||
<line x1="140.393" y1="108.691" x2="231.393" y2="224.691" stroke="black" stroke-dasharray="2 2"/>
|
||||
<line x1="180.522" y1="242.146" x2="108.522" y2="7.14647" stroke="black" stroke-opacity="0.3" stroke-dasharray="2 2"/>
|
||||
<path d="M129 75L126.427 86.2567L137.462 82.8564L129 75ZM139.522 109.149L140.478 108.855L132.606 83.3065L131.65 83.6009L130.694 83.8954L138.567 109.444L139.522 109.149Z" fill="#0999C9"/>
|
||||
<path d="M105 106L114.375 112.741L115.525 101.251L105 106ZM139.943 109.497L140.043 108.502L114.055 105.901L113.955 106.896L113.855 107.891L139.844 110.492L139.943 109.497Z" fill="black"/>
|
||||
<path d="M168 88L156.536 89.3812L163.464 98.6188L168 88ZM140 109L140.6 109.8L161.4 94.2L160.8 93.4L160.2 92.6L139.4 108.2L140 109Z" fill="black"/>
|
||||
<line x1="54.8787" y1="93.5149" x2="198.879" y2="57.5149" stroke="black" stroke-opacity="0.3" stroke-dasharray="2 2"/>
|
||||
<line x1="96.5033" y1="172.943" x2="110.503" y2="51.9425" stroke="black" stroke-opacity="0.3" stroke-dasharray="2 2"/>
|
||||
<circle cx="140" cy="109" r="5" fill="black"/>
|
||||
<path d="M130 75L107 81" stroke="#FF003C" stroke-width="2"/>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="120" y="102.547">θ</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="27" y="79.5469">= tan(θ/2)</tspan></text>
|
||||
<line x1="138.671" y1="109.376" x2="106.671" y2="81.3763" stroke="black" stroke-opacity="0.25"/>
|
||||
<circle cx="139" cy="108" r="33.5" stroke="#0999C9" stroke-opacity="0.25"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
27
polyline_rendering/bevels_and_miters.svg
Normal file
27
polyline_rendering/bevels_and_miters.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg width="698" height="309" viewBox="0 0 698 309" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="698" height="309" fill="white"/>
|
||||
<path d="M39.5 255.5L86 272.5L138 119L92 103.5L39.5 255.5Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<path d="M147.315 272.169L194.197 256.252L138.447 104.074L92.8955 120.845L147.315 272.169Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<path d="M318 40.5L242 254.5L289 272L318 187L348 272L396.5 254.5L318 40.5Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<path d="M517.5 88L477 257L525.5 269L537 220.5L549.5 269L597.5 257L557 88H517.5Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<path d="M265.5 263L318.373 114L372.5 263" stroke="black" stroke-dasharray="4 4"/>
|
||||
<path d="M62.5 263L115.373 114L169.5 263" stroke="black" stroke-dasharray="4 4"/>
|
||||
<path d="M501 263L536.578 114L573 263" stroke="black" stroke-dasharray="4 4"/>
|
||||
<circle cx="318.5" cy="112" r="3" fill="black"/>
|
||||
<circle cx="115.5" cy="112" r="3" fill="black"/>
|
||||
<path d="M318 187L323.774 177H312.226L318 187ZM318 41L312.226 51H323.774L318 41ZM318 178H319V50H318H317V178H318Z" fill="#FF003C"/>
|
||||
<path d="M98 243L90.5012 234.219L86.6463 245.104L98 243ZM50 226L57.4988 234.781L61.3537 223.896L50 226ZM89.5164 239.995L89.8502 239.053L58.8175 228.062L58.4836 229.005L58.1498 229.947L89.1825 240.938L89.5164 239.995Z" fill="#FF003C"/>
|
||||
<path d="M537 89L534.113 94L539.887 94L537 89ZM537 114L537.5 114L537.5 93.5L537 93.5L536.5 93.5L536.5 114L537 114Z" 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="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>
|
||||
<line x1="513" y1="109.5" x2="562" y2="109.5" stroke="#FF003C" stroke-dasharray="2 2"/>
|
||||
<circle cx="537" cy="112" r="3" fill="black"/>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="344" y="93.5469">miter distance</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="573" y="103.547">bevel distance</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="7" y="214.547">thickness</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="66" y="105.547">n0</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="148" y="103.547">n1</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="110" y="98.5469">p1</tspan></text>
|
||||
<path d="M89.9998 103L97.8178 111.498L101.268 100.478L89.9998 103ZM113.943 110.497L114.242 109.543L98.8874 104.735L98.5886 105.689L98.2898 106.644L113.645 111.451L113.943 110.497Z" fill="black"/>
|
||||
<path d="M141 103L129.687 100.685L133.339 111.64L141 103ZM117 111L117.316 111.949L132.778 106.795L132.462 105.846L132.146 104.897L116.684 110.051L117 111Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
77
polyline_rendering/corner_tessellation.svg
Normal file
77
polyline_rendering/corner_tessellation.svg
Normal file
@ -0,0 +1,77 @@
|
||||
<svg width="1109" height="419" viewBox="0 0 1109 419" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1109" height="419" fill="white"/>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="54" y="351.318">0</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="387" y="363.318">0</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="134" y="351.318">1</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="476" y="355.318">1</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="50" y="70.3182">2</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="379" y="241.318">2</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="160" y="197.318">3</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="476" y="75.3182">3</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="600" y="354.318">0</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="930" y="363.318">0</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="690" y="354.318">1</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="1020" y="363.318">1</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="593" y="130.318">2</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="1024" y="142.318">2</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="641" y="157.318">3</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="979" y="164.318">3</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="700" y="208.318">5</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="962" y="70.3182">5</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="651" y="62.3182">4</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="16" letter-spacing="0em"><tspan x="925" y="207.318">4</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="613" y="385.547">cos_theta < 0</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="249" y="56.5469">Miter</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="800" y="62.5469">Bevel</tspan></text>
|
||||
<path d="M616.807 331.132C616.807 331.019 616.807 330.907 617.257 298.687C617.708 266.467 618.609 202.145 619.017 167.938C619.425 133.732 619.312 131.592 619.142 130.095C618.513 124.744 618.063 119.268 617.662 114.839C617.493 113.803 617.155 113.24 616.807 112.66" stroke="#468B09" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M1016.19 335.132C1016.19 335.019 1016.19 334.907 1015.74 302.687C1015.29 270.467 1014.39 206.145 1013.98 171.938C1013.57 137.732 1013.69 135.592 1013.86 134.095C1014.48 128.744 1014.93 123.268 1015.34 118.839C1015.5 117.803 1015.84 117.24 1016.19 116.66" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M619.538 116.073C621.47 111.984 622.378 109.71 625.385 105.735C627.925 102.378 631.915 97.3325 636.647 92.2496C639.193 89.5145 642.054 87.8631 644.165 86.6069C646.498 84.7874 648.434 83.4186 649.4 82.8519C649.803 82.5106 650.028 82.06 650.26 81.5957" stroke="#468B09" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M1013.46 120.073C1011.53 115.984 1010.62 113.71 1007.61 109.735C1005.07 106.378 1001.08 101.333 996.351 96.2496C993.805 93.5145 990.944 91.8631 988.833 90.6069C986.5 88.7874 984.564 87.4186 983.598 86.8519C983.195 86.5106 982.97 86.06 982.738 85.5957" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M652.65 81.5957C653.101 81.5957 656.262 83.1728 662.783 86.1819C666.295 87.8023 670.544 88.8531 675.057 90.4489C679.57 92.0448 684.301 93.9599 687.809 95.566C691.316 97.1721 693.456 98.4112 698.389 100.796C703.322 103.18 710.982 106.672 716.899 108.978C722.817 111.284 726.76 112.298 730.762 113.552C738.775 116.064 744.234 118.005 746.96 118.572C751.453 119.506 759.428 126.048 764.096 129.663C767.658 132.421 771.314 133.251 774.334 134.729C778.14 136.592 782.798 138.822 788.662 141.382C790.547 142.126 792.032 142.584 793.452 143.038C794.083 143.266 794.534 143.492 794.998 143.724" stroke="#468B09" stroke-opacity="0.25" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M980.348 85.5957C979.898 85.5957 976.737 87.1728 970.215 90.1819C966.703 91.8023 962.454 92.8531 957.941 94.4489C953.428 96.0448 948.697 97.9599 945.189 99.566C941.682 101.172 939.542 102.411 934.609 104.796C929.676 107.18 922.016 110.672 916.099 112.978C910.181 115.284 906.238 116.298 902.236 117.552C894.223 120.064 888.764 122.005 886.038 122.572C881.545 123.506 873.57 130.048 868.902 133.663C865.34 136.421 861.684 137.251 858.664 138.729C854.859 140.592 850.2 142.822 844.336 145.382C842.451 146.126 840.966 146.584 839.546 147.038C838.915 147.266 838.464 147.492 838 147.724" stroke="black" stroke-opacity="0.25" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M690.2 168.985C690.2 170.562 689.975 178.358 689.464 189.898C689.263 194.458 688.841 196.369 688.555 206.48C688.268 216.591 688.043 234.84 688.039 244.974C688.036 255.107 688.261 256.571 688.377 269.661C688.493 282.751 688.493 307.421 688.606 320.468C688.718 333.515 688.944 334.191 689.06 335.158C689.176 336.126 689.176 337.365 689.176 338.642" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M942.798 172.985C942.798 174.562 943.023 182.358 943.534 193.898C943.735 198.458 944.157 200.369 944.443 210.48C944.73 220.591 944.956 238.84 944.959 248.974C944.962 259.107 944.737 260.571 944.621 273.661C944.505 286.751 944.505 311.421 944.392 324.468C944.28 337.515 944.054 338.191 943.938 339.158C943.822 340.126 943.822 341.365 943.822 342.642" stroke="#468B09" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M689.517 167.619C690.869 167.957 692.221 168.295 696.015 170.553C699.809 172.811 706.005 176.979 709.76 179.352C714.527 182.364 717.379 183.653 722.585 186.316C731.532 190.892 738.888 193.215 741.498 194.746C746.955 197.947 750.266 200.602 753.453 202.206C757.325 204.025 759.718 205.394 761.022 205.736C761.763 205.852 762.664 205.852 763.593 205.852" stroke="black" stroke-opacity="0.25" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M943.481 171.619C942.129 171.957 940.777 172.295 936.983 174.553C933.189 176.811 926.993 180.979 923.238 183.352C918.471 186.364 915.619 187.653 910.413 190.316C901.466 194.892 894.11 197.215 891.5 198.746C886.043 201.947 882.732 204.602 879.545 206.206C875.673 208.025 873.28 209.394 871.976 209.736C871.235 209.852 870.334 209.852 869.405 209.852" stroke="#468B09" stroke-opacity="0.25" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M616.807 118.804C621.108 118.234 627.034 118.914 631.354 121.354C633.457 122.542 638.275 126.168 644.414 131.455C649.685 135.995 654.555 140.399 659.687 143.77C663.928 146.556 666.632 149.404 672.087 151.85C675.021 153.166 678.45 157.235 680.353 160.386C681.536 161.352 682.799 162.492 683.651 163.685C684.052 164.202 684.39 164.54 685.421 164.888" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M1016.19 122.804C1011.89 122.234 1005.96 122.914 1001.64 125.354C999.541 126.542 994.723 130.168 988.583 135.455C983.313 139.995 978.443 144.399 973.311 147.77C969.069 150.556 966.366 153.404 960.911 155.85C957.976 157.166 954.548 161.235 952.645 164.386C951.462 165.352 950.199 166.492 949.347 167.685C948.946 168.202 948.608 168.54 947.577 168.888" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M654.356 79.2063C655.486 82.1557 657.313 84.7739 660.358 90.531C663.029 95.581 668.584 104.624 671.764 110.564C674.944 116.504 675.733 118.982 676.984 122.455C679.83 130.357 681.891 136.088 682.232 138.472C682.832 142.661 683.031 145.649 683.767 149.568C684.386 152.868 686.322 156.334 687.634 160.266C688.032 161.127 688.595 161.802 688.998 162.376C689.401 162.949 689.626 163.4 689.858 163.864" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M978.641 83.2063C977.511 86.1557 975.685 88.7739 972.64 94.531C969.969 99.581 964.413 108.624 961.233 114.564C958.054 120.504 957.265 122.982 956.014 126.455C953.168 134.357 951.107 140.088 950.765 142.472C950.166 146.661 949.967 149.649 949.231 153.568C948.612 156.868 946.676 160.334 945.363 164.266C944.966 165.127 944.402 165.802 944 166.376C943.597 166.949 943.372 167.4 943.139 167.864" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M655.722 114.708C655.272 114.708 654.589 114.933 653.005 115.387C651.872 115.616 650.069 115.841 644.128 115.957C638.187 116.073 628.161 116.073 617.831 116.073" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M977.276 118.708C977.726 118.708 978.409 118.933 979.993 119.387C981.126 119.616 982.929 119.841 988.87 119.957C994.812 120.073 1004.84 120.073 1015.17 120.073" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M657.77 81.5957C657.657 82.3877 657.429 90.9627 657.26 102.963C656.179 109.355 655.722 110.721 655.609 111.685C655.496 112.199 655.271 112.762 655.039 113.342" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M975.228 85.5957C975.34 86.3877 975.569 94.9627 975.738 106.963C976.818 113.355 977.276 114.721 977.388 115.685C977.501 116.199 977.726 116.762 977.958 117.342" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M655 113C657.171 115.593 660.563 120.117 662.025 124.032C663.206 127.195 668.41 133.569 671.359 137.576C673.226 140.114 672.817 144.587 674.686 148.051C676.607 151.61 679.347 153.771 682.616 156.262C686.823 160.079 690.143 162.845 690.932 163.465C691.121 163.861 690.881 164.422 690.634 165" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M977.958 117.343C975.921 119.947 972.736 124.491 971.363 128.423C970.255 131.6 965.369 138.002 962.601 142.026C960.847 144.575 961.232 149.069 959.477 152.547C957.674 156.122 955.101 158.292 952.032 160.795C948.082 164.628 944.966 167.407 944.225 168.03C944.048 168.427 944.273 168.991 944.505 169.571" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<circle cx="691" cy="166" r="6" fill="#D9D9D9"/>
|
||||
<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 947.998 164)" fill="#D9D9D9"/>
|
||||
<circle cx="657" cy="82" r="6" fill="#D9D9D9"/>
|
||||
<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 981.998 80)" fill="#D9D9D9"/>
|
||||
<circle cx="655" cy="115" r="6" fill="#D9D9D9"/>
|
||||
<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 983.998 113)" fill="#D9D9D9"/>
|
||||
<circle cx="620" cy="119" r="6" fill="#D9D9D9"/>
|
||||
<path d="M143.3 202.416C143.3 203.468 142.776 208.202 142.376 218.184C142.245 220.651 141.983 222.615 141.848 241.371C141.713 260.128 141.713 295.616 141.713 332.181" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M395.859 206.416C395.859 207.468 396.383 212.202 396.784 222.184C396.915 224.651 397.176 226.615 397.311 245.371C397.446 264.128 397.446 299.616 397.446 336.181" stroke="#468B09" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M144.491 200.829C144.884 201.75 150.396 206.48 161.977 212.782C167.99 216.054 173.967 218.012 180.841 220.331C185.707 221.974 189.182 224.099 193.22 227.076C196.092 229.193 198.976 228.734 201.23 229.135C201.762 229.266 202.285 229.528 202.883 229.663C203.48 229.798 204.135 229.798 204.809 229.798" stroke="black" stroke-opacity="0.25" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M394.668 204.829C394.276 205.75 388.764 210.48 377.182 216.782C371.169 220.054 365.192 222.012 358.319 224.331C353.452 225.974 349.977 228.099 345.939 231.076C343.067 233.193 340.183 232.734 337.929 233.135C337.398 233.266 336.874 233.528 336.276 233.663C335.679 233.798 335.024 233.798 334.35 233.798" stroke="#468B09" stroke-opacity="0.25" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M236.159 164.32C234.842 164.32 232.338 164.058 220.006 158.227C208.948 152.998 188.817 141.788 177.771 135.731C166.725 129.673 165.547 128.756 163.237 127.302C157.602 123.753 152.836 120.943 149.741 118.964C145.478 116.24 139.626 113.808 134.278 110.835C127.139 106.867 120.593 104.414 115.012 100.906C108.817 97.0127 104.95 95.4143 100.726 92.8369C95.0836 89.3942 93.839 86.938 90.4044 84.6344C86.4641 81.9916 83.0055 79.9378 80.1463 78.1481C78.8943 77.16 77.6958 76.6203 76.6403 76.4894C76.1085 76.3584 75.5847 76.0965 73.8545 75.8267" stroke="#468B09" stroke-opacity="0.25" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M303 168.32C304.318 168.32 306.822 168.058 319.153 162.227C330.212 156.998 350.342 145.788 361.388 139.731C372.434 133.673 373.612 132.756 375.922 131.302C381.557 127.753 386.323 124.943 389.418 122.964C393.681 120.24 399.534 117.808 404.881 114.835C412.021 110.867 418.566 108.414 424.147 104.906C430.342 101.013 434.209 99.4143 438.433 96.8369C444.076 93.3942 445.32 90.938 448.755 88.6344C452.695 85.9916 456.154 83.9378 459.013 82.1481C460.265 81.16 461.463 80.6203 462.519 80.4894C463.051 80.3584 463.574 80.0965 465.305 79.8267" stroke="black" stroke-opacity="0.25" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M69.4896 75.033C70.0134 75.8187 70.5452 76.7473 70.8765 81.4696C71.1704 85.6584 70.815 93.5254 70.1583 101.829C69.5015 110.133 68.3229 118.645 67.5848 126.5C66.8467 134.356 66.5848 141.296 66.3189 145.723C66.053 150.149 65.7911 151.852 65.6562 156.592C65.5213 161.332 65.5213 169.059 65.3248 173.759C65.1284 178.46 64.7355 179.9 64.5331 191.773C64.3308 203.646 64.3308 225.909 64.1998 237.967C64.0689 250.024 63.807 251.203 63.672 264.12C63.5371 277.037 63.5371 301.656 63.5371 327.022" stroke="#468B09" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M469.67 79.033C469.146 79.8187 468.614 80.7473 468.283 85.4696C467.989 89.6584 468.344 97.5254 469.001 105.829C469.658 114.133 470.836 122.645 471.574 130.5C472.312 138.356 472.574 145.296 472.84 149.723C473.106 154.149 473.368 155.852 473.503 160.592C473.638 165.332 473.638 173.059 473.834 177.759C474.031 182.46 474.424 183.9 474.626 195.773C474.828 207.646 474.828 229.909 474.959 241.967C475.09 254.024 475.352 255.203 475.487 268.12C475.622 281.037 475.622 305.656 475.622 331.022" stroke="black" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="M74.6484 76.6204C75.704 77.4061 77.1524 80.9657 83.3867 92.2575C88.5761 101.657 98.3949 118.216 105.089 129.076C111.784 139.935 115.189 144.518 117.401 147.272C122.135 153.165 125.689 157.82 131.705 165.745C134.638 169.608 136.412 172.908 138.598 176.674C140.06 179.192 141.824 186.361 143.1 190.833C144.094 193.412 144.618 195.535 145.412 196.194C145.682 196.591 145.682 197.115 146.475 197.654" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M464.511 80.6204C463.455 81.4061 462.007 84.9657 455.772 96.2575C450.583 105.657 440.764 122.216 434.07 133.076C427.375 143.935 423.97 148.518 421.758 151.272C417.024 157.165 413.47 161.82 407.454 169.745C404.522 173.608 402.748 176.908 400.561 180.674C399.099 183.192 397.335 190.361 396.059 194.833C395.065 197.412 394.541 199.535 393.748 200.194C393.478 200.591 393.478 201.115 392.684 201.654" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<circle cx="144" cy="198" r="6" fill="#D9D9D9"/>
|
||||
<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 401.159 196)" fill="#D9D9D9"/>
|
||||
<circle cx="73" cy="76" r="6" fill="#D9D9D9"/>
|
||||
<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 472.159 74)" fill="#D9D9D9"/>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="43" y="388.547">(direction invariant)</tspan></text>
|
||||
<path d="M65.9941 328.399C66.9833 328.399 72.068 328.399 81.0402 328.77C89.5833 329.123 96.9369 330.647 102.364 330.771C105.71 330.847 108.444 332.015 112.92 332.952C119.869 333.27 124.567 333.517 127.913 333.892C130.765 334.019 135.958 334.019 141.309 334.019" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M67.8677 322.404C67.8677 322.156 68.2386 321.534 70.5936 318.745C76.0547 312.276 81.2182 305.939 83.2791 302.32C84.7852 299.674 84.7292 297.31 84.9765 295.5C85.3063 293.086 87.3521 289.707 88.0977 286.007C88.735 282.845 91.826 279.71 93.8419 276.887C96.0273 273.826 97.5889 270.957 99.3968 269.451C102.411 266.94 105.45 262.714 108.262 258.038C111.103 253.314 112.944 249.599 114.574 247.286C116.843 244.065 119.441 240.622 121.253 237.296C124.216 231.858 128.674 227.267 131.743 223.247C135.49 218.337 137.427 216.124 138.559 213.19C139.411 210.98 139.81 208.63 140.556 206.443C141.556 203.504 142.306 201.881 142.68 200.697C142.808 200.131 142.808 199.637 142.808 199.127" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M400.602 337.392C400.726 337.392 400.849 337.392 405.55 337.392C410.251 337.392 419.524 337.392 424.673 337.268C429.821 337.144 430.563 336.897 434.593 336.77C438.623 336.642 445.918 336.642 449.986 336.519C454.053 336.395 454.671 336.148 458.328 336.02C461.986 335.893 468.663 335.893 475.542 335.893" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M402.101 332.521C401.606 330.542 401.846 326.803 403.276 321.073C404.881 314.637 407.714 308.57 408.962 303.208C409.912 299.123 411.33 293.589 413.823 287.165C415.547 282.726 417.209 279.579 418.515 276.031C420.1 271.724 421.585 268.211 421.833 264.419C422.219 258.491 423.455 253.597 424.141 250.733C425.656 244.403 427.693 239.362 431.251 229.588C435.735 217.269 435.944 213.133 438.001 207.77C440.672 200.804 441.939 195.657 444.184 188.911C445.997 183.46 447.56 178.916 449.244 175.038C451.487 169.872 450.932 165.801 451.434 162.109C452.201 156.466 453.18 151.061 453.62 144.694C453.921 140.346 455.548 133.967 456.305 123.912C456.783 117.565 459.925 113.838 460.925 111.146C462.194 107.73 462.173 104.845 465.849 96.2418C466.92 92.8433 468.663 88.3731 469.296 84.5418C469.42 83.8505 469.667 83.2322 469.922 81.8458" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M613.807 332.989C614.301 332.989 616.411 332.989 619.654 332.927C621.915 332.884 630.589 332.614 642.825 332.676C649.546 332.71 652.753 334.233 656.075 334.611C658.579 334.897 661.251 335.979 668.983 336.485C670.63 336.609 671.248 336.856 673.978 336.983C676.708 337.111 681.53 337.111 686.499 337.111" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M619.052 332.614C619.674 330.996 623.391 325.787 628.152 317.969C633.596 309.029 635.532 305.149 637.281 303.02C639.198 300.689 640.036 296.905 641.836 293.166C645.347 285.874 646.645 283.041 650.077 276.808C651.924 273.454 651.771 269.432 652.335 265.745C653.279 259.57 654.889 252.945 657.075 246.087C658.838 240.556 660.764 237.71 662.697 232.837C664.318 228.753 667.254 224.596 668.942 220.348C671.659 213.511 673.624 210.477 675.19 206.979C677.056 202.811 677.506 199.356 679.683 194.556C681.331 190.921 682.871 185.747 684.681 182.434C686.117 179.806 686.244 177.248 688.177 175.186C688.866 174.004 689.369 172.872 689.991 171.875C690.365 171.373 690.86 170.878 691.369 170.369" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M949.164 340.296C949.905 340.296 951.648 340.048 958.346 339.674C963.676 339.375 972.957 339.546 978.105 339.361C983.254 339.175 983.996 338.804 989.633 338.613C995.27 338.422 1005.78 338.422 1016.61 338.422" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<path d="M948.04 341.42C948.04 341.172 948.781 337.583 950.338 331.781C951.334 328.072 953.653 322.853 955.086 315.183C956.772 306.158 959.026 301.604 960.959 296.971C961.727 295.13 962.645 292.353 964.326 288.615C966.074 284.726 968.142 279.628 969.574 272.838C972.068 261.006 974.269 257.502 974.891 254.189C975.642 250.188 975.767 245.631 976.513 243.445C977.529 240.466 978.39 237.275 979.26 232.526C980.217 227.296 981.875 224.161 983.258 220.59C984.617 217.079 986.252 212.036 988.059 206.747C992.448 193.908 993.498 189.928 994.375 186.494C995.173 183.369 995.627 180.059 996.249 177.749C997.181 174.287 997.125 171.943 998.18 168.701C1000.65 161.116 1000.99 158.333 1001.87 155.641C1003.02 152.116 1002.75 149.708 1003.37 147.645C1004.07 145.318 1005.37 143.338 1006.74 138.227C1007.46 135.541 1008.85 132.854 1009.61 130.285C1010.49 127.098 1010.99 124.974 1011.11 123.79C1011.24 123.224 1011.48 122.729 1011.74 122.22" stroke="black" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 4"/>
|
||||
<circle cx="6" cy="6" r="6" transform="matrix(-1 0 0 1 1019 117)" fill="#D9D9D9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 22 KiB |
101
polyline_rendering/fringe_with_textures.svg
Normal file
101
polyline_rendering/fringe_with_textures.svg
Normal file
@ -0,0 +1,101 @@
|
||||
<svg width="929" height="345" viewBox="0 0 929 345" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="929" height="345" fill="white"/>
|
||||
<rect opacity="0.25" x="87" y="264" width="101" height="29" fill="#0999C9"/>
|
||||
<rect x="295" y="25.5" width="54" height="162" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9"/>
|
||||
<line x1="294.525" y1="187.843" x2="348.525" y2="24.8428" stroke="#0999C9" stroke-opacity="0.25"/>
|
||||
<rect x="285.5" y="113" width="18" height="18" fill="white" stroke="black"/>
|
||||
<rect x="303.5" y="113" width="18" height="18" fill="#666565" stroke="black"/>
|
||||
<rect x="321.5" y="113" width="18" height="18" fill="#666565" stroke="black"/>
|
||||
<rect x="339.5" y="113" width="18" height="18" fill="white" stroke="black"/>
|
||||
<path d="M285 155H294L311.5 142H330L349.5 155H357.5" stroke="#FF003C"/>
|
||||
<path d="M28 293H75.5714L102.755 264H170.714L201.296 293H250" stroke="#FF003C" stroke-width="2"/>
|
||||
<line x1="322" y1="188" x2="322" y2="25" stroke="black" stroke-dasharray="2 2"/>
|
||||
<circle cx="322.5" cy="25" r="3" fill="black"/>
|
||||
<circle cx="322.5" cy="188" r="3" fill="black"/>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="365.5" y="161.547">Alpha</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="256" y="300.547">Alpha</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="41" y="325.547">Filter window</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="279" y="223.547">2px thick line</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="115" y="204.547">A</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="184" y="186.547">A</tspan></text>
|
||||
<path d="M118.5 45L119.5 153L139.5 20L118.5 45Z" fill="url(#paint0_linear_117_69)"/>
|
||||
<path d="M59 189.5L107 201L119.5 151L99 20.5L59 189.5Z" fill="url(#paint1_linear_117_69)"/>
|
||||
<path d="M119 44.5L120 154.5L99 20.5L119 44.5Z" fill="url(#paint2_linear_117_69)"/>
|
||||
<path d="M119 154L131.5 202L179 189.5L139 20.5L119 154Z" fill="url(#paint3_linear_117_69)"/>
|
||||
<path d="M139 20.5H99L119 46L139 20.5Z" fill="url(#paint4_linear_117_69)"/>
|
||||
<path d="M83 195.5L118.578 46.5L155 195.5" stroke="black" stroke-dasharray="4 4"/>
|
||||
<circle cx="119" cy="44.5" r="3" fill="black"/>
|
||||
<circle cx="83" cy="195.5" r="3" fill="black"/>
|
||||
<circle cx="155" cy="195.5" r="3" fill="black"/>
|
||||
<path d="M118 190L184.5 172.5" stroke="#FF003C" stroke-dasharray="2 2"/>
|
||||
<rect x="70.5" y="264.5" width="22" height="28" stroke="black" stroke-opacity="0.5" stroke-dasharray="2 2"/>
|
||||
<line x1="81.5" y1="246" x2="81.5" y2="308" stroke="black"/>
|
||||
<circle cx="294.5" cy="122.5" r="1.5" fill="black"/>
|
||||
<circle cx="312.5" cy="122.5" r="1.5" fill="black"/>
|
||||
<circle cx="330.5" cy="122.5" r="1.5" fill="black"/>
|
||||
<circle cx="348.5" cy="122.5" r="1.5" fill="black"/>
|
||||
<rect x="501" y="40.5" width="54" height="107" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9"/>
|
||||
<line y1="-0.5" x2="120.748" y2="-0.5" transform="matrix(0.447214 -0.894427 0.976746 0.2144 501.5 148)" stroke="#0999C9" stroke-opacity="0.25"/>
|
||||
<path d="M491 115H500L522 102L534 102L555.5 115H563.5" stroke="#FF003C"/>
|
||||
<line x1="528" y1="148" x2="528" y2="40" stroke="black" stroke-dasharray="2 2"/>
|
||||
<circle cx="528.5" cy="40" r="3" fill="black"/>
|
||||
<circle cx="528.5" cy="148" r="3" fill="black"/>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="571.5" y="121.547">Alpha</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="477" y="187.547">1.5px thick line</tspan></text>
|
||||
<rect x="495" y="89" width="11.1429" height="11.1429" fill="white" stroke="black"/>
|
||||
<rect x="506.143" y="89" width="11.1429" height="11.1429" fill="#B7B7B7" stroke="black"/>
|
||||
<rect x="527.906" y="89" width="11.1429" height="11.1429" fill="#666565" stroke="black"/>
|
||||
<rect x="517.286" y="89" width="11.1429" height="11.1429" fill="#666565" stroke="black"/>
|
||||
<rect x="539.049" y="89" width="11.1429" height="11.1429" fill="#B7B7B7" stroke="black"/>
|
||||
<rect x="550.192" y="89" width="11.1429" height="11.1429" fill="white" stroke="black"/>
|
||||
<circle cx="500.571" cy="94.881" r="0.928571" fill="black"/>
|
||||
<circle cx="511.714" cy="94.881" r="0.928571" fill="black"/>
|
||||
<circle cx="533.477" cy="94.881" r="0.928571" fill="black"/>
|
||||
<circle cx="522.857" cy="94.881" r="0.928571" fill="black"/>
|
||||
<circle cx="544.62" cy="94.881" r="0.928571" fill="black"/>
|
||||
<circle cx="555.763" cy="94.881" r="0.928571" fill="black"/>
|
||||
<rect x="686.5" y="127.875" width="72" height="128" transform="rotate(-90 686.5 127.875)" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9"/>
|
||||
<rect x="814.5" y="127.875" width="71" height="26" transform="rotate(-90 814.5 127.875)" fill="url(#paint5_linear_117_69)" fill-opacity="0.25" stroke="#0999C9"/>
|
||||
<line y1="-0.5" x2="147.267" y2="-0.5" transform="matrix(-0.875838 -0.482605 0.195342 -0.980735 815.052 126.072)" stroke="#0999C9" stroke-opacity="0.25"/>
|
||||
<line x1="840.905" y1="128.546" x2="814.582" y2="56.158" stroke="#0999C9" stroke-opacity="0.25"/>
|
||||
<line x1="828" y1="90.875" x2="686" y2="90.875" stroke="black" stroke-dasharray="2 2"/>
|
||||
<ellipse cx="686" cy="90.875" rx="3.5" ry="4" transform="rotate(-90 686 90.875)" fill="black"/>
|
||||
<ellipse cx="828" cy="90.875" rx="3.5" ry="4" transform="rotate(-90 828 90.875)" fill="black"/>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="733" y="168.547">Line end</tspan></text>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_117_69" x1="168" y1="138.5" x2="119" y2="151.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_117_69" x1="59" y1="189" x2="108" y2="201" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_117_69" x1="72" y1="142" x2="119" y2="152.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_117_69" x1="179" y1="190" x2="132" y2="202" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_117_69" x1="118.5" y1="20.5" x2="120" y2="67" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_117_69" x1="850" y1="128.375" x2="850" y2="155.375" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#0999C9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
20
polyline_rendering/overshoot.svg
Normal file
20
polyline_rendering/overshoot.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<svg width="504" height="317" viewBox="0 0 504 317" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="504" height="317" fill="white"/>
|
||||
<path d="M383.5 159.842L212 139.842L212 95.3423L321.5 82L327 132L387.281 125.811L389 110.342L458.5 118.5L387.281 125.811L383.5 159.842Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<path d="M212 277.842L383.5 297.842L389 248.342L385.5 257L327 270L321.5 220L212 233.342L212 277.842Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Inter" font-size="12" font-weight="bold" letter-spacing="0em"><tspan x="24" y="30.8636">Overshoot</tspan></text>
|
||||
<line x1="236" y1="118.5" x2="456" y2="118.5" stroke="#FF003C"/>
|
||||
<line x1="237" y1="118.5" x2="236" y2="118.5" stroke="#FF003C"/>
|
||||
<line x1="226" y1="117.5" x2="6" y2="117.5" stroke="#FF003C"/>
|
||||
<path d="M222 95L2.99999 116.933L222 142" stroke="#FF003C" stroke-dasharray="2 2"/>
|
||||
<path d="M386.5 135.342L237.5 118.047L323.5 105.842" stroke="black" stroke-dasharray="4 4"/>
|
||||
<path d="M386.5 273.342L237.5 256.047L323.5 243.842" stroke="black" stroke-dasharray="4 4"/>
|
||||
<circle cx="237.5" cy="118.342" r="3" transform="rotate(-90 237.5 118.342)" fill="black"/>
|
||||
<circle cx="237.5" cy="256.342" r="3" transform="rotate(-90 237.5 256.342)" fill="black"/>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="288" y="190.547">len0_sqr</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="245" y="65.5469">len1_sqr</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="112" y="111.547">ref_thickness</tspan></text>
|
||||
<path d="M233.949 156.776C233.512 157.114 233.431 157.742 233.768 158.179L239.264 165.306C239.601 165.743 240.229 165.825 240.666 165.487C241.104 165.15 241.185 164.522 240.848 164.085L235.963 157.75L242.298 152.864C242.735 152.527 242.816 151.899 242.479 151.462C242.142 151.025 241.514 150.943 241.077 151.281L233.949 156.776ZM381.179 177.232C381.616 176.895 381.697 176.267 381.36 175.829L375.865 168.702C375.527 168.265 374.899 168.184 374.462 168.521C374.025 168.858 373.943 169.486 374.281 169.923L379.166 176.259L372.83 181.144C372.393 181.481 372.312 182.109 372.649 182.546C372.986 182.984 373.614 183.065 374.052 182.728L381.179 177.232ZM234.56 157.568L234.432 158.56L380.44 177.432L380.568 176.44L380.697 175.448L234.688 156.576L234.56 157.568Z" fill="black"/>
|
||||
<path d="M231.619 80.8361C231.289 81.2795 231.382 81.9059 231.825 82.2352L239.051 87.6008C239.494 87.93 240.121 87.8375 240.45 87.3941C240.779 86.9507 240.687 86.3243 240.243 85.9951L233.82 81.2256L238.59 74.8028C238.919 74.3594 238.827 73.733 238.383 73.4038C237.94 73.0745 237.313 73.1671 236.984 73.6105L231.619 80.8361ZM320.235 69.1746C320.564 68.7312 320.472 68.1049 320.028 67.7756L312.803 62.41C312.359 62.0807 311.733 62.1733 311.404 62.6167C311.074 63.0601 311.167 63.6864 311.61 64.0157L318.033 68.7851L313.264 75.2079C312.934 75.6514 313.027 76.2777 313.47 76.607C313.914 76.9362 314.54 76.8437 314.869 76.4003L320.235 69.1746ZM232.421 81.4323L232.568 82.4216L319.578 69.5677L319.432 68.5785L319.286 67.5892L232.275 80.443L232.421 81.4323Z" fill="black"/>
|
||||
<path d="M211.293 117.293C210.902 117.683 210.902 118.317 211.293 118.707L217.657 125.071C218.047 125.462 218.681 125.462 219.071 125.071C219.462 124.681 219.462 124.047 219.071 123.657L213.414 118L219.071 112.343C219.462 111.953 219.462 111.319 219.071 110.929C218.681 110.538 218.047 110.538 217.657 110.929L211.293 117.293ZM237.707 118.707C238.098 118.317 238.098 117.683 237.707 117.293L231.343 110.929C230.953 110.538 230.319 110.538 229.929 110.929C229.538 111.319 229.538 111.953 229.929 112.343L235.586 118L229.929 123.657C229.538 124.047 229.538 124.681 229.929 125.071C230.319 125.462 230.953 125.462 231.343 125.071L237.707 118.707ZM212 118L212 119L237 119L237 118L237 117L212 117L212 118Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
52
polyline_rendering/overview.svg
Normal file
52
polyline_rendering/overview.svg
Normal file
@ -0,0 +1,52 @@
|
||||
<svg width="619" height="271" viewBox="0 0 619 271" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="619" height="271" fill="white"/>
|
||||
<path d="M515.5 229L78.5 201.5L72.5 146.839L419 39L515.5 229ZM298.438 146.839L400.821 153.859L383.709 120.22L298.438 146.839Z" fill="#0999C9" stroke="white" stroke-width="4"/>
|
||||
<path d="M419 34L412 61L483.5 207.5L520.5 230.5L419 34Z" fill="url(#paint0_linear_115_7)"/>
|
||||
<path d="M71 143.5L95.5 160L412.5 61L419.5 34L71 143.5Z" fill="url(#paint1_linear_115_7)"/>
|
||||
<path d="M95.5 160.5L71 144L78 200L97.5 182L95.5 160.5Z" fill="url(#paint2_linear_115_7)"/>
|
||||
<path d="M521 231L484 208L97.5 182L78 200L521 231Z" fill="url(#paint3_linear_115_7)"/>
|
||||
<path d="M298 147L203 158.5L436 177L400 153L298 147Z" fill="url(#paint4_linear_115_7)"/>
|
||||
<path d="M396.5 95L383 120.5L399.5 153L435.5 177L396.5 95Z" fill="url(#paint5_linear_115_7)"/>
|
||||
<path d="M203 158.5L298 147L383.5 120.5L397 95L203 158.5Z" fill="url(#paint6_linear_115_7)"/>
|
||||
<path d="M402.5 77L111 168L461 192L402.5 77Z" stroke="black" stroke-width="2" stroke-dasharray="4 4"/>
|
||||
<path d="M503.686 220.552L87.3623 191.8L83.5361 152.151L416.215 48.6025L503.686 220.552ZM390.908 107.844L247.116 152.967L247.231 153.943L419.961 165.705L420.84 165.765L420.44 164.979L391.503 108.095L391.312 107.718L390.908 107.844Z" stroke="black"/>
|
||||
<circle cx="111" cy="168" r="6" fill="black"/>
|
||||
<circle cx="403" cy="77" r="6" fill="black"/>
|
||||
<circle cx="462" cy="192" r="6" fill="black"/>
|
||||
<path d="M289 136L291.394 124.704L280.414 128.279L289 136ZM275 93L272.606 104.296L283.586 100.721L275 93ZM286.214 127.442L287.165 127.133L278.737 101.248L277.786 101.558L276.835 101.867L285.263 127.752L286.214 127.442Z" fill="#FF003C"/>
|
||||
<path d="M319 88L321.315 76.6874L310.36 80.3389L319 88ZM312 67L309.685 78.3126L320.64 74.6611L312 67ZM316.154 79.4619L317.103 79.1456L315.795 75.2219L314.846 75.5382L313.897 75.8544L315.205 79.7781L316.154 79.4619Z" fill="#FF003C"/>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="203" y="75.5469">thickness</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="282" y="53.5469">fringe</tspan></text>
|
||||
<line x1="297.85" y1="95.5229" x2="348.85" y2="79.5229" stroke="black" stroke-dasharray="2 2"/>
|
||||
<line x1="290.85" y1="73.5229" x2="341.85" y2="57.5229" stroke="black" stroke-dasharray="2 2"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_115_7" x1="501.5" y1="197" x2="481.5" y2="207.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#0999C9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_115_7" x1="251.5" y1="86.5" x2="258.5" y2="108.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#0999C9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_115_7" x1="75.5" y1="175" x2="96.5" y2="172" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#0999C9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_115_7" x1="417.5" y1="223.5" x2="419" y2="203" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#0999C9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_115_7" x1="356.5" y1="151" x2="355" y2="171" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#0999C9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_115_7" x1="395" y1="144.5" x2="416.5" y2="136" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#0999C9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_115_7" x1="330" y1="135.5" x2="325" y2="119" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#0999C9"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
BIN
polyline_rendering/sample_1_offset.gif
Normal file
BIN
polyline_rendering/sample_1_offset.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 480 KiB |
BIN
polyline_rendering/sample_1_thickness.gif
Normal file
BIN
polyline_rendering/sample_1_thickness.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 629 KiB |
BIN
polyline_rendering/sample_1_thickness_off.gif
Normal file
BIN
polyline_rendering/sample_1_thickness_off.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 638 KiB |
BIN
polyline_rendering/sample_4_thickness_off.gif
Normal file
BIN
polyline_rendering/sample_4_thickness_off.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 540 KiB |
18
polyline_rendering/stroke_position.svg
Normal file
18
polyline_rendering/stroke_position.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<svg width="654" height="289" viewBox="0 0 654 289" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="654" height="289" fill="white"/>
|
||||
<path d="M506 69L453 221L408 207L471 20.5L539.5 19L606.5 205L560.5 221L506 69Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<path d="M258.5 230L212 213L267 47.5H305.5L366.5 213L319 230L288 142L258.5 230Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<path d="M234.5 220.5L287.373 71.5L341.5 220.5" stroke="black" stroke-width="4" stroke-dasharray="4 4"/>
|
||||
<path d="M453 220.5L505.873 71.5L560 220.5" stroke="black" stroke-width="4" stroke-dasharray="4 4"/>
|
||||
<circle cx="287.5" cy="69.5" r="3" fill="black"/>
|
||||
<circle cx="506" cy="69.5" r="3" fill="black"/>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="266" y="266.047">center</tspan></text>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="483" y="266.547">outside</tspan></text>
|
||||
<path d="M107 70.5L53 221.5L101 238L107 218L114.5 238L161.5 221.5L107 70.5Z" fill="#0999C9" fill-opacity="0.25" stroke="#0999C9" stroke-width="2"/>
|
||||
<path d="M54 220.5L106.873 71.5L161 220.5" stroke="black" stroke-width="4" stroke-dasharray="4 4"/>
|
||||
<circle cx="107" cy="69.5" r="3" fill="black"/>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="87" y="266.047">inside</tspan></text>
|
||||
<path d="M99.8858 92.536C99.6296 92.0468 99.0252 91.8579 98.536 92.1142L90.5635 96.2902C90.0743 96.5465 89.8854 97.1508 90.1417 97.6401C90.3979 98.1293 91.0023 98.3182 91.4915 98.0619L98.5782 94.3498L102.29 101.436C102.546 101.926 103.151 102.115 103.64 101.858C104.129 101.602 104.318 100.998 104.062 100.508L99.8858 92.536ZM94 109L94.9545 109.298L99.9545 93.2983L99 93L98.0455 92.7017L93.0455 108.702L94 109Z" fill="black"/>
|
||||
<path d="M279.886 92.536C279.63 92.0468 279.025 91.8579 278.536 92.1142L270.564 96.2902C270.074 96.5465 269.885 97.1508 270.142 97.6401C270.398 98.1293 271.002 98.3182 271.492 98.0619L278.578 94.3498L282.29 101.436C282.546 101.926 283.151 102.115 283.64 101.858C284.129 101.602 284.318 100.998 284.062 100.508L279.886 92.536ZM274 109L274.954 109.298L279.954 93.2983L279 93L278.046 92.7017L273.046 108.702L274 109Z" fill="black"/>
|
||||
<path d="M498.886 92.536C498.63 92.0468 498.025 91.8579 497.536 92.1142L489.564 96.2902C489.074 96.5465 488.885 97.1508 489.142 97.6401C489.398 98.1293 490.002 98.3182 490.492 98.0619L497.578 94.3498L501.29 101.436C501.546 101.926 502.151 102.115 502.64 101.858C503.129 101.602 503.318 100.998 503.062 100.508L498.886 92.536ZM493 109L493.954 109.298L498.954 93.2983L498 93L497.046 92.7017L492.046 108.702L493 109Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
109
polyline_rendering/texture_coordinates.svg
Normal file
109
polyline_rendering/texture_coordinates.svg
Normal file
@ -0,0 +1,109 @@
|
||||
<svg width="619" height="306" viewBox="0 0 619 306" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_117_101)">
|
||||
<rect width="619" height="306" fill="white"/>
|
||||
<path d="M219.5 59L220.5 167L240.5 34L219.5 59Z" fill="url(#paint0_linear_117_101)"/>
|
||||
<path d="M160 203.5L208 215L220.5 165L200 34.5L160 203.5Z" fill="url(#paint1_linear_117_101)"/>
|
||||
<path d="M220 58.5L221 168.5L200 34.5L220 58.5Z" fill="url(#paint2_linear_117_101)"/>
|
||||
<path d="M220 168L232.5 216L280 203.5L240 34.5L220 168Z" fill="url(#paint3_linear_117_101)"/>
|
||||
<path d="M240 34.5H200L220 60L240 34.5Z" fill="url(#paint4_linear_117_101)"/>
|
||||
<rect x="95.167" y="243.192" width="413" height="52" fill="url(#paint5_linear_117_101)"/>
|
||||
<path d="M339.078 269.328L445.737 294.692L320.237 244.192L339.078 269.328Z" fill="white" fill-opacity="0.2" stroke="black"/>
|
||||
<path d="M106.425 244.076L106.425 294.186L157.962 294.611L280.014 244.076L106.425 244.076Z" fill="white" fill-opacity="0.2" stroke="black"/>
|
||||
<path d="M261.374 269.147L157.667 294.692L280.014 244.076L261.374 269.147Z" fill="white" fill-opacity="0.2" stroke="black"/>
|
||||
<path d="M446.237 294.692L494.237 294.692L493.569 243.386L319.9 243.78L446.237 294.692Z" fill="white" fill-opacity="0.2" stroke="black"/>
|
||||
<path d="M351 203.5L399 215L411.5 165L391 34.5L351 203.5Z" fill="url(#paint6_linear_117_101)"/>
|
||||
<path d="M411 168L423.5 216L471 203.5L431 34.5L411 168Z" fill="url(#paint7_linear_117_101)"/>
|
||||
<path d="M431 35H391L411 168L431 35Z" fill="url(#paint8_linear_117_101)"/>
|
||||
<path d="M319.167 244.192H279.167L299.167 269.692L319.167 244.192Z" fill="white" fill-opacity="0.2" stroke="black"/>
|
||||
<path d="M200.5 34.5L160 203.5L208.5 215.5L220 167L232.5 215.5L280.5 203.5L240 34.5H200.5Z" stroke="black" stroke-width="2"/>
|
||||
<path d="M391.5 34.5L351 203.5L399.5 215.5L411 167L423.5 215.5L471.5 203.5L431 34.5H391.5Z" stroke="black" stroke-width="2"/>
|
||||
<path d="M184 209.5L219.578 60.5L256 209.5" stroke="black" stroke-dasharray="4 4"/>
|
||||
<path d="M375 209.5L410.578 60.5L447 209.5" stroke="black" stroke-dasharray="4 4"/>
|
||||
<line x1="219.505" y1="167.571" x2="200.505" y2="34.5707" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="410.505" y1="167.571" x2="391.505" y2="34.5707" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="157.977" y1="294.73" x2="280.058" y2="244.586" stroke="black"/>
|
||||
<line x1="220.505" y1="168.43" x2="239.505" y2="34.4298" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="411.505" y1="168.43" x2="430.505" y2="34.4298" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="159.743" y1="203.071" x2="219.743" y2="167.071" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="350.743" y1="203.071" x2="410.743" y2="167.071" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="106.695" y1="244.469" x2="158.515" y2="294.834" stroke="black"/>
|
||||
<line x1="239.5" y1="34.5166" x2="233.5" y2="215.517" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="430.5" y1="34.5166" x2="424.5" y2="215.517" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="319.808" y1="244.273" x2="494.873" y2="293.711" stroke="black"/>
|
||||
<line x1="219.615" y1="57.8184" x2="200.615" y2="34.8184" stroke="black" stroke-opacity="0.5"/>
|
||||
<line x1="220.197" y1="168.502" x2="218.803" y2="57.5108" stroke="black" stroke-opacity="0.5"/>
|
||||
<circle cx="220" cy="58.5" r="3" fill="black"/>
|
||||
<circle cx="411" cy="58.5" r="3" fill="black"/>
|
||||
<circle cx="184" cy="209.5" r="3" fill="black"/>
|
||||
<circle cx="375" cy="209.5" r="3" fill="black"/>
|
||||
<circle cx="256" cy="209.5" r="3" fill="black"/>
|
||||
<circle cx="447" cy="209.5" r="3" fill="black"/>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="8" font-weight="bold" letter-spacing="0em"><tspan x="76" y="296.773">0.0</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="8" font-weight="bold" letter-spacing="0em"><tspan x="76" y="271.773">0.5</tspan></text>
|
||||
<text fill="black" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="8" font-weight="bold" letter-spacing="0em"><tspan x="76" y="246.773">1.0</tspan></text>
|
||||
<path d="M497.121 37.1284L482.746 51.5036M482.746 51.5036L468.371 65.8787M482.746 51.5036L469 37.7576M482.746 51.5036L497.121 65.8787" stroke="#FF003C" stroke-width="6"/>
|
||||
<path d="M257 52.5L272.5 68L300.5 40" stroke="#6DDF2C" stroke-width="6"/>
|
||||
<line x1="220.615" y1="57.1816" x2="239.615" y2="34.1816" stroke="black" stroke-opacity="0.5"/>
|
||||
<path d="M412 46L416.4 42.2622L410.963 40.3204L412 46ZM422 18L421.529 17.8318L413.043 41.594L413.514 41.7622L413.984 41.9303L422.471 18.1682L422 18Z" fill="#FF003C"/>
|
||||
<text fill="#FF003C" style="white-space: pre" xml:space="preserve" font-family="Arial" font-size="16" letter-spacing="0em"><tspan x="408" y="17.5469">Stretching</tspan></text>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_117_101" x1="269" y1="152.5" x2="220" y2="165.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_117_101" x1="160" y1="203" x2="209" y2="215" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_117_101" x1="173" y1="156" x2="220" y2="166.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_117_101" x1="280" y1="204" x2="233" y2="216" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_117_101" x1="219.5" y1="34.5" x2="221" y2="81" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_117_101" x1="301.667" y1="243.192" x2="301.667" y2="295.192" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_117_101" x1="351" y1="203" x2="400" y2="215" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_117_101" x1="471" y1="204" x2="424" y2="216" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_117_101" x1="410.5" y1="35" x2="431.482" y2="164.603" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.240385" stop-color="#0999C9"/>
|
||||
<stop offset="0.759615" stop-color="#0999C9"/>
|
||||
<stop offset="1" stop-color="#F5F5F5"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_117_101">
|
||||
<rect width="619" height="306" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.3 KiB |
Loading…
x
Reference in New Issue
Block a user