HTML 26 💻 ellipse, line, path and polyline - KandZ

SVG provides several elements for creating shapes and lines. This chapter covers four essential SVG elements: <ellipse>, <line>, <path>, and <polyline>. Each serves a unique purpose in vector graphics.

Overview of SVG Shape Elements

Element	Purpose	Key Attributes
`<ellipse>`	Elliptical/circular shapes	`cx`, `cy`, `rx`, `ry`
`<line>`	Straight line	`x1`, `y1`, `x2`, `y2`
`<polyline>`	Connected straight lines	`points`
`<path>`	Complex shapes and curves	`d` (commands)

The Ellipse Element `<ellipse>`

The <ellipse> element creates elliptical shapes, including circles.

Basic Syntax:

<ellipse cx="150" cy="100" rx="80" ry="50" fill="yellow" stroke="blue" stroke-width="3"/>

Browser Display:
A yellow ellipse with a blue border.

Attributes:

Attribute	Purpose	Example
`cx`	X-coordinate of the center	`cx="150"`
`cy`	Y-coordinate of the center	`cy="100"`
`rx`	Radius on the X-axis (horizontal)	`rx="80"`
`ry`	Radius on the Y-axis (vertical)	`ry="50"`

Important Note:

If rx equals ry, the shape becomes a circle
If rx and ry differ, it’s an ellipse

The Line Element `<line>`

The <line> element creates a simple straight line between two points.

Basic Syntax:

<line x1="20" y1="20" x2="180" y2="180" stroke="blue" stroke-width="2"/>

Browser Display:
A blue diagonal line.

Attributes:

Attribute	Purpose	Example
`x1`	X-coordinate of the start point	`x1="20"`
`y1`	Y-coordinate of the start point	`y1="20"`
`x2`	X-coordinate of the end point	`x2="180"`
`y2`	Y-coordinate of the end point	`y2="180"`

The Polyline Element `<polyline>`

The <polyline> element creates a series of connected straight lines, forming an open or closed shape.

Basic Syntax:

<polyline points="0,100 50,25 50,75 100,0" fill="red" stroke="blue" stroke-width="2"/>

Browser Display:
A zigzag line in red and blue.

Attributes:

Attribute	Purpose	Example
`points`	List of x,y coordinate pairs	`points="x1,y1 x2,y2 x3,y3 ..."`
`fill`	Interior color (if closed)	`fill="red"`
`stroke`	Line color	`stroke="blue"`
`stroke-width`	Line thickness	`stroke-width="2"`

Polyline vs Polygon:

Feature	Polyline	Polygon
Shape	Open or closed	Always closed
Fill	Only fills if closed	Always fills
Use case	Paths, zigzags, open shapes	Triangles, stars, closed shapes

The Path Element `<path>`

The <path> element is the most powerful SVG shape element. It can create any shape using a series of commands.

Basic Syntax:

<path d="M 10 10 L 90 90" stroke="blue" stroke-width="2"/>

Browser Display:
A diagonal line from (10,10) to (90,90).

Path Commands:

Command	Meaning	Example	Description
`M`	Move to	`M 10 10`	Moves cursor to (10,10)
`L`	Line to	`L 90 90`	Draws line to (90,90)
`H`	Horizontal line	`H 100`	Draws horizontal line to X=100
`V`	Vertical line	`V 100`	Draws vertical line to Y=100
`C`	Cubic Bezier	`C x1 y1, x2 y2, x y`	Draws curve with two control points
`S`	Smooth Cubic	`S x2 y2, x y`	Smooth curve with one control point
`Q`	Quadratic Bezier	`Q x1 y1, x y`	Draws curve with one control point
`T`	Smooth Quadratic	`T x y`	Smooth quadratic curve
`A`	Arc	`A rx ry x-axis-rotation large-arc sweep x y`	Draws an arc
`Z`	Close path	`Z`	Closes the path

Path Example (House Shape):

<path d="M 100 20 L 20 100 L 100 180 L 180 100 Z" fill="yellow" stroke="blue" stroke-width="3"/>

This draws a diamond/house shape.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG: ellipse, line, path, polyline</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            margin-top: 30px;
            border-left: 4px solid #28a745;
            padding-left: 15px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        .svg-container {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            margin: 20px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            align-items: center;
        }

        .svg-container svg {
            background: #fafafa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .example-box {
            background: #e9ecef;
            padding: 15px;
            border-radius: 6px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
            flex: 1;
            min-width: 250px;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 15px 0;
        }

        .grid-3 .shape-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #ddd;
            text-align: center;
        }

        .shape-card:hover {
            border-color: #007bff;
        }

        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #dc3545;
        }

        pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .reference-table tr:hover {
            background: #e9ecef;
        }

        .command-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 15px;
            margin: 15px 0;
        }

        .command-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #ddd;
        }

        .command-card .cmd {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            color: #007bff;
            font-size: 1.2em;
        }

        .command-card .desc {
            color: #6c757d;
            margin-top: 5px;
        }

        .comparison-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 15px 0;
        }

        .comparison-card {
            flex: 1;
            min-width: 200px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 2px solid #ddd;
        }

        .comparison-card h3 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #ddd;
        }
    </style>
</head>
<body>

    <h1>SVG: ellipse, line, path, polyline</h1>

    <!-- ====== SECTION 1: ELLIPSE ====== -->
    <h2>1. Ellipse Element</h2>

    <div class="svg-container">
        <svg width="300" height="200" viewBox="0 0 300 200">
            <!-- Standard ellipse -->
            <ellipse cx="150" cy="100" rx="80" ry="50" fill="#ffc107" stroke="#007bff" stroke-width="3"/>

            <!-- Circle (rx = ry) -->
            <ellipse cx="150" cy="100" rx="30" ry="30" fill="none" stroke="#dc3545" stroke-width="2"/>
        </svg>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;ellipse cx="150" cy="100" rx="80" ry="50"
                         fill="#ffc107" stroke="#007bff" stroke-width="3"/&gt;

                &lt;ellipse cx="150" cy="100" rx="30" ry="30"
                         fill="none" stroke="#dc3545" stroke-width="2"/&gt;</code>
            </pre>
            <ul>
                <li><code>cx="150"</code> — Center X</li>
                <li><code>cy="100"</code> — Center Y</li>
                <li><code>rx="80"</code> — Horizontal radius</li>
                <li><code>ry="50"</code> — Vertical radius</li>
                <li>If <code>rx = ry</code>, it's a circle</li>
            </ul>
        </div>
    </div>

    <!-- ====== SECTION 2: LINE ====== -->
    <h2>2. Line Element</h2>

    <div class="svg-container">
        <svg width="200" height="200" viewBox="0 0 200 200">
            <!-- Diagonal line -->
            <line x1="20" y1="20" x2="180" y2="180" stroke="#007bff" stroke-width="4"/>

            <!-- Horizontal line -->
            <line x1="20" y1="100" x2="180" y2="100" stroke="#28a745" stroke-width="3" stroke-dasharray="10,5"/>

            <!-- Vertical line -->
            <line x1="100" y1="20" x2="100" y2="180" stroke="#dc3545" stroke-width="3" stroke-dasharray="5,5"/>
        </svg>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;!-- Diagonal line --&gt;
                &lt;line x1="20" y1="20" x2="180" y2="180" stroke="#007bff" stroke-width="4"/&gt;

                &lt;!-- Dashed horizontal line --&gt;
                &lt;line x1="20" y1="100" x2="180" y2="100" stroke="#28a745" stroke-width="3" stroke-dasharray="10,5"/&gt;

                &lt;!-- Dashed vertical line --&gt;
                &lt;line x1="100" y1="20" x2="100" y2="180" stroke="#dc3545" stroke-width="3" stroke-dasharray="5,5"/&gt;</code>
            </pre>
            <ul>
                <li><code>x1,y1</code> — Start point</li>
                <li><code>x2,y2</code> — End point</li>
                <li><code>stroke-dasharray</code> — Creates dashed lines</li>
            </ul>
        </div>
    </div>

    <!-- ====== SECTION 3: POLYLINE ====== -->
    <h2>3. Polyline Element</h2>

    <div class="svg-container">
        <svg width="200" height="150" viewBox="0 0 200 150">
            <!-- Zigzag polyline -->
            <polyline points="0,100 50,25 50,75 100,0 100,50 150,25 150,75 200,50"
                      fill="none" stroke="#007bff" stroke-width="3"/>

            <!-- Closed polyline with fill -->
            <polyline points="0,120 50,50 100,90 150,50 200,100 100,140"
                      fill="#ffc107" stroke="#dc3545" stroke-width="2"/>
        </svg>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;!-- Open zigzag --&gt;
                &lt;polyline points="0,100 50,25 50,75 100,0 100,50 150,25 150,75 200,50"
                          fill="none" stroke="#007bff" stroke-width="3"/&gt;

                &lt;!-- Closed polyline with fill --&gt;
                &lt;polyline points="0,120 50,50 100,90 150,50 200,100 100,140"
                          fill="#ffc107" stroke="#dc3545" stroke-width="2"/&gt;</code>
            </pre>
            <ul>
                <li><code>points</code> — List of x,y coordinates</li>
                <li><code>fill</code> — Fills the shape if closed</li>
                <li><code>fill="none"</code> — Makes it an open path</li>
            </ul>
        </div>
    </div>

    <!-- ====== SECTION 4: PATH ====== -->
    <h2>4. Path Element</h2>

    <div class="svg-container" style="flex-direction: column;">
        <div style="display: flex; flex-wrap: wrap; gap: 30px; width: 100%;">
            <!-- Simple Path -->
            <div style="flex: 1; min-width: 250px;">
                <h3>Simple Path</h3>
                <svg width="200" height="200" viewBox="0 0 200 200">
                    <path d="M 10 10 L 90 90" stroke="#007bff" stroke-width="4"/>
                    <path d="M 10 90 L 90 10" stroke="#dc3545" stroke-width="4"/>
                </svg>
                <p><small>Two diagonal lines using <code>M</code> and <code>L</code></small></p>
            </div>

            <!-- House Shape -->
            <div style="flex: 1; min-width: 250px;">
                <h3>House Shape</h3>
                <svg width="200" height="200" viewBox="0 0 200 200">
                    <path d="M 100 20 L 20 100 L 100 180 L 180 100 Z"
                          fill="#ffc107" stroke="#007bff" stroke-width="3"/>
                </svg>
                <p><small><code>M 100 20</code> → <code>L 20 100</code> → <code>L 100 180</code> → <code>L 180 100</code> → <code>Z</code> (close)</small></p>
            </div>

            <!-- Heart Shape -->
            <div style="flex: 1; min-width: 250px;">
                <h3>Heart Shape</h3>
                <svg width="200" height="200" viewBox="0 0 200 200">
                    <path d="M 100 180 C 40 120, 0 80, 20 40 C 40 0, 80 20, 100 60 C 120 20, 160 0, 180 40 C 200 80, 160 120, 100 180 Z"
                          fill="#dc3545" stroke="#c92a2a" stroke-width="2"/>
                </svg>
                <p><small>Bezier curves (<code>C</code>) for smooth shapes</small></p>
            </div>
        </div>

        <div class="example-box" style="width: 100%;">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;!-- House shape --&gt;
                &lt;path d="M 100 20 L 20 100 L 100 180 L 180 100 Z"
                      fill="#ffc107" stroke="#007bff" stroke-width="3"/&gt;

                &lt;!-- Heart shape --&gt;
                &lt;path d="M 100 180 C 40 120, 0 80, 20 40 C 40 0, 80 20, 100 60 C 120 20, 160 0, 180 40 C 200 80, 160 120, 100 180 Z"
                      fill="#dc3545" stroke="#c92a2a" stroke-width="2"/&gt;</code>
            </pre>
        </div>
    </div>

    <!-- ====== SECTION 5: PATH COMMANDS ====== -->
    <h2>5. Path Commands Reference</h2>

    <div class="command-grid">
        <div class="command-card">
            <span class="cmd">M x y</span>
            <div class="desc">Move to — sets starting point</div>
        </div>
        <div class="command-card">
            <span class="cmd">L x y</span>
            <div class="desc">Line to — draws a straight line</div>
        </div>
        <div class="command-card">
            <span class="cmd">H x</span>
            <div class="desc">Horizontal line to — draws a line horizontally</div>
        </div>
        <div class="command-card">
            <span class="cmd">V y</span>
            <div class="desc">Vertical line to — draws a line vertically</div>
        </div>
        <div class="command-card">
            <span class="cmd">C x1 y1, x2 y2, x y</span>
            <div class="desc">Cubic Bezier curve — smooth curve with two control points</div>
        </div>
        <div class="command-card">
            <span class="cmd">S x2 y2, x y</span>
            <div class="desc">Smooth cubic — continues a curve smoothly</div>
        </div>
        <div class="command-card">
            <span class="cmd">Q x1 y1, x y</span>
            <div class="desc">Quadratic Bezier — simple curve with one control point</div>
        </div>
        <div class="command-card">
            <span class="cmd">T x y</span>
            <div class="desc">Smooth quadratic — continues a quadratic curve smoothly</div>
        </div>
        <div class="command-card">
            <span class="cmd">A rx ry rot large sweep x y</span>
            <div class="desc">Arc — draws an elliptical arc</div>
        </div>
        <div class="command-card">
            <span class="cmd">Z</span>
            <div class="desc">Close path — returns to the starting point</div>
        </div>
    </div>

    <!-- ====== SECTION 6: COMPARISON ====== -->
    <h2>6. Comparison: polyline vs polygon vs path</h2>

    <div class="comparison-grid">
        <div class="comparison-card">
            <h3>📏 Polyline</h3>
            <svg width="150" height="100" viewBox="0 0 150 100">
                <polyline points="10,90 50,10 90,50 130,10" fill="none" stroke="#007bff" stroke-width="3"/>
            </svg>
            <ul>
                <li>✅ Open or closed shape</li>
                <li>✅ Simple connected lines</li>
                <li>❌ No curves</li>
                <li>❌ Limited control</li>
            </ul>
        </div>

        <div class="comparison-card">
            <h3>🔺 Polygon</h3>
            <svg width="150" height="100" viewBox="0 0 150 100">
                <polygon points="10,90 50,10 90,50 130,10" fill="#ffc107" stroke="#007bff" stroke-width="3"/>
            </svg>
            <ul>
                <li>✅ Always closed</li>
                <li>✅ Simple connected lines</li>
                <li>❌ No curves</li>
                <li>✅ Always fills</li>
            </ul>
        </div>

        <div class="comparison-card">
            <h3>🛤️ Path</h3>
            <svg width="150" height="100" viewBox="0 0 150 100">
                <path d="M 10 90 C 40 10, 70 10, 90 50 C 110 90, 130 10, 140 10" fill="none" stroke="#007bff" stroke-width="3"/>
            </svg>
            <ul>
                <li>✅ Open or closed</li>
                <li>✅ Lines and curves</li>
                <li>✅ Full control</li>
                <li>✅ Most versatile</li>
            </ul>
        </div>
    </div>

    <!-- ====== SECTION 7: MORE PATH EXAMPLES ====== -->
    <h2>7. More Path Examples</h2>

    <div class="svg-container" style="flex-direction: column;">
        <div class="grid-3">
            <div class="shape-card">
                <h4>Star</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <path d="M 60 10 L 70 50 L 110 50 L 80 75 L 90 110 L 60 90 L 30 110 L 40 75 L 10 50 L 50 50 Z"
                          fill="#ffc107" stroke="#007bff" stroke-width="2"/>
                </svg>
            </div>

            <div class="shape-card">
                <h4>Arc</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <path d="M 20 60 A 40 40 0 1 1 100 60" fill="none" stroke="#28a745" stroke-width="4"/>
                    <path d="M 20 60 A 40 40 0 0 0 100 60" fill="none" stroke="#dc3545" stroke-width="4"/>
                </svg>
            </div>

            <div class="shape-card">
                <h4>Wave</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <path d="M 10 60 Q 30 30, 50 60 T 90 60 T 110 60" fill="none" stroke="#6c5ce7" stroke-width="4"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 8: REFERENCE TABLES ====== -->
    <h2>8. Quick Reference</h2>

    <table class="reference-table">
        <thead>
            <tr>
                <th>Element</th>
                <th>Purpose</th>
                <th>Key Attributes</th>
                <th>Best For</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>&lt;ellipse&gt;</code></td>
                <td>Ellipse/Circle</td>
                <td><code>cx</code>, <code>cy</code>, <code>rx</code>, <code>ry</code></td>
                <td>Ovals, circles</td>
            </tr>
            <tr>
                <td><code>&lt;line&gt;</code></td>
                <td>Straight line</td>
                <td><code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code></td>
                <td>Simple lines, rules</td>
            </tr>
            <tr>
                <td><code>&lt;polyline&gt;</code></td>
                <td>Connected lines</td>
                <td><code>points</code></td>
                <td>Zigzags, open paths</td>
            </tr>
            <tr>
                <td><code>&lt;path&gt;</code></td>
                <td>Complex shapes</td>
                <td><code>d</code></td>
                <td>Any shape (most versatile)</td>
            </tr>
        </tbody>
    </table>

    <!-- ====== SECTION 9: BEST PRACTICES ====== -->
    <h2>9. Best Practices</h2>

    <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
        <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
        <ul>
            <li>Use <code>&lt;ellipse&gt;</code> for <strong>ovals and circles</strong></li>
            <li>Use <code>&lt;line&gt;</code> for <strong>simple straight lines</strong></li>
            <li>Use <code>&lt;polyline&gt;</code> for <strong>zigzags and open shapes</strong></li>
            <li>Use <code>&lt;path&gt;</code> for <strong>complex shapes</strong> with curves</li>
            <li>Use <strong>lowercase commands</strong> in <code>d</code> attribute for clarity</li>
            <li>Add <strong>comments</strong> to complex paths for readability</li>
        </ul>
    </div>

    <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
        <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
        <ul>
            <li>Don't use <code>&lt;polyline&gt;</code> for closed shapes — use <code>&lt;polygon&gt;</code></li>
            <li>Don't use <code>&lt;line&gt;</code> for <strong>thick shapes</strong> — use <code>&lt;rect&gt;</code> instead</li>
            <li>Don't use <code>&lt;path&gt;</code> for <strong>simple shapes</strong> — use simpler elements</li>
            <li>Don't use <strong>absolute coordinates</strong> without considering <code>viewBox</code></li>
            <li>Don't forget to set <code>fill="none"</code> for open paths</li>
        </ul>
    </div>

</body>
</html>

Quick Reference

Element	Purpose	Key Attributes	Example
`<ellipse>`	Ellipse/Circle	`cx`, `cy`, `rx`, `ry`	`<ellipse cx="50" cy="50" rx="30" ry="20"/>`
`<line>`	Straight line	`x1`, `y1`, `x2`, `y2`	`<line x1="10" y1="10" x2="90" y2="90"/>`
`<polyline>`	Connected lines	`points`	`<polyline points="0,0 50,25 100,0"/>`
`<path>`	Complex shapes	`d` (commands)	`<path d="M 10 10 L 90 90"/>`

Path Commands Cheat Sheet

Command	Description	Example
`M x y`	Move to	`M 10 10`
`L x y`	Line to	`L 90 90`
`H x`	Horizontal line	`H 100`
`V y`	Vertical line	`V 100`
`C x1 y1, x2 y2, x y`	Cubic Bezier	`C 20 20, 80 20, 100 50`
`Q x1 y1, x y`	Quadratic Bezier	`Q 50 10, 90 90`
`A rx ry rot large sweep x y`	Arc	`A 40 40 0 1 1 100 60`
`Z`	Close path	`Z`

Pro Tip: The <path> element is the most powerful and flexible SVG element. While simpler elements like <rect>, <circle>, and <polyline> are easier to use, mastering <path> gives you complete control over any shape you can imagine!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of SVG Shape Elements

The Ellipse Element <ellipse>

Basic Syntax:

Attributes:

Important Note:

The Line Element <line>

Basic Syntax:

Attributes:

The Polyline Element <polyline>

Basic Syntax:

Attributes:

Polyline vs Polygon:

The Path Element <path>

Basic Syntax:

Path Commands:

Path Example (House Shape):

Complete Example

Quick Reference

Path Commands Cheat Sheet

Ads Blocker Detected!!!

The Ellipse Element `<ellipse>`

The Line Element `<line>`

The Polyline Element `<polyline>`

The Path Element `<path>`