drawsquare.md

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.

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

<style> @keyframes wiggle { 0% { transform: rotate(0deg); } 17% { transform: rotate(2deg); } 24% { transform: rotate(8deg); } 33% { transform: rotate(2deg); } 50% { transform: rotate(0deg); } 67% { transform: rotate(-2deg); } 75% { transform: rotate(-8deg); } 83% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } } svg.wiggle { display: inline-block; animation: wiggle 0.5s ease infinite; } svg.wiggle:hover { animation: none; } @keyframes squiggle { 0% { transform: rotate(0deg) scaleX(1.0)} 17% { transform: rotate(2deg) scale(0.8)} 24% { transform: rotate(8deg) scale(0.7)} 33% { transform: rotate(2deg) scaleY(0.6)} 50% { transform: rotate(0deg) scale(0.5)} 67% { transform: rotate(-2deg) scale(0.8)} 75% { transform: rotate(-8deg) scale(0.9)} 83% { transform: rotate(-2deg) scale(1.2)} 100% { transform: rotate(0deg) scale(1.0)} } svg.squiggle { display: inline-block; animation: squiggle 0.5s ease infinite; } svg.squiggle:hover { animation: none; } </style>

Also consider applying some rounding -- or animating some rounding like this example at stackoverflow