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

svg