# Drawing a square with svg

Here is the codes:

```
<svg width="400" height="110">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
```

`stroke-width`

e.g. 1, 2, 10%.`stroke`

(color) e.g. rgb(255,127,63), green

## Stroke Example (also a circle example)

Can define a stroke using another element.

## svg path commands

(in the following rel. means relative and abs. means absolute.

Letter |
Meaning | `Sample` |
Params | Note |
---|---|---|---|---|

M |
Move to | `M 10 30` |
(X,Y)+ | _set current point to abs. _ (10,30) |

m |
move delta | `m 1 2` |
(dx,dy)+ | _change current point by rel. _ (1,2) |

L |
Line to | `L 10 20` |
(dx,dy)+ | _line from current point, to rel. _ (10,20) |

`L 10 20 30 40` |
(dx,dy)+ | _line from current point to rel. _ (10,20) _and line from there to rel. _ (30,40) | ||

H |
Horiz Line to | `H 10` |
x+ | _horiz line from current point to abs. _ x of 10 |

h |
Horiz Line delta | `h 10` |
dx+ | _horiz line from current point to rel. _ x of x + 10 |

`h -10` |
dx+ | _horiz line from current point to rel. _ x of x - 10 |
||

V |
Vert Line to | `V 10` |
y+ | vertical from current point to y of 10 |

v |
Vert Line delta | `v 10` |
dy+ | _vertical from current point to rel. _ y of y + 10 |

`v -10` |
dy+ | _vertical from current point to rel. _ y of y - 10 |
||

C |
Cubic BÃ©zier | `C 30,90 25,10 50,10` |
(x1,y1, x2,y2, x,y)+ | from current point to end point x,y with control points at x1,y1 and x2,y2 |

`C 30,90 25,10 50,10 10,25 90,30 10,50` |
(x1,y1, x2,y2, x,y)+ | subsequent triplets of pairs continue the curve |
||

c |
relative Cubic BÃ©zier | `C 30,90 25,10 50,10` |
(dx1,dy1, dx2,dy2, dx,dy)+ | from current point to relative end point x,y with relative control points at dx1,dy1 and dx2,dy2 |

C |
Cubic BÃ©zier | `C 30,90 25,10 50,10` |
(x1,y1, x2,y2, x,y)+ | from current point to end point x,y with control points at x1,y1 and x2,y2 |

`C 30,90 25,10 50,10 10,25 90,30 10,50` |
(x1,y1, x2,y2, x,y)+ | subsequent triplets of pairs continue the curve |
||

S |
Smooth Cubic BÃ©zier | `S 20,50 80,110` |
(x2, y2, x, y)+ | from current point to end point x,y with end control point x2, y2 and start control point of previous control point or current point if previous curve wasn't a cubic bÃ©zier |

Q |
Quadratic BÃ©zier | |||

q |
Relative Quad BÃ©z | |||

T |
Smooth Quad BÃ©z | |||

t |
Realitve smooth quad BÃ©z | |||

A |
Arc curve | |||

a |
Relative Arc curve | |||

Z |
Close path |

(Some ideas for a NimbleText logo redesign.)

## On Dark Mode

## On Light Mode

## Here's a squiggly one

Also consider applying some rounding -- or animating some rounding... https://stackoverflow.com/questions/10177985/svg-rounded-corner