<path>

browserSVGshape ⟩ <path>

💾 https://replit.com/@pegasusroe/svg-path

<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

Last updated