# \<path>

[browser](../..) ⟩ [SVG](..) ⟩ [shape]() ⟩ \<path>

{% tabs %}
{% tab title="💈範例" %}
:floppy\_disk: [https://replit.com/@pegasusroe/svg-path](https://replit.com/@pegasusroe/svg-path#index.html)

```markup
<path 
    d="
        M 100,100 
        L 100,300 
        L 150,300 
        L 150,150 
        S 250,150,175,200 
        L 200,300 
        L 250,300 
        L 225,225 
        S 350,100,100,100"

    stroke-width="1" 
    stroke="#003366" 
    fill="#cccccc"
></path>
```

#### Explanation

1. (**M**)ove to (100,100)
2. (**L**)ine to (100,300)
3. (**L**)ine to (150,300)
4. (**L**)ine to (150,150)
5. (**S**)mooth Bézier curve through control point (250, 150) to (150,175)\
   and so on ...

#### Result

![letter R](https://0bc6f593-dd94-4d5a-a526-84deff74d5cd.id.repl.co/letterR.svg)
{% endtab %}

{% tab title="👥 相關" %}
* [canvas](../../canvas "mention") ⟩ [path](../../canvas/path "mention")
{% endtab %}
{% endtabs %}

