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 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









svg

nt.svg