Drawing a square with svg

Here is the codes:

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

Is:

• 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 width="200" height="200">
  <circle cx="100" cy="100" r="97" fill="none"
      stroke="url(#myGradient)" />
  <defs>
    <linearGradient id="myGradient">
    <stop offset="0%"   stop-color="green" />
    <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
</svg>

A few 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 like this example at stackoverflow

nt.svg

nt.svg

---