SVG Notes: Circle & Ellipse

Just a guy who loves to write code and watch anime.
Search for a command to run...

Just a guy who loves to write code and watch anime.
No comments yet. Be the first to comment.
Qualities that make outstanding builders.

Bipedal vs quadrupedal: how many legs This is about the number of legs the creature walks on. Bipedal. Two legs. Humans, ostriches, T-rex, kangaroos, most fantasy humanoids. Quadrupedal. Four legs. Do

Intro You hear "lerp" and "smoothstep" everywhere in game dev. They sound like math jargon. They're not. Both are small tools that do the same job: smoothly move from one value to another. The problem

What is Kinematics Kinematics is the math field. It's the study of how things move without worrying about forces (which would be dynamics). FK and IK are the two branches: forward kinematics and inver

Intro Textures are usually the biggest cost in a 3D scene. Memory, bandwidth, and load time all get eaten by them. Resizing them is the obvious lever. There's more. This post is about the less obvious

<circle cx="50" cy="50" r="20" />
cx, cy = center point coordinates
r = radius (distance from center to edge)
Radius = 20 units from center to edge
Width = 40 units (r × 2)
Height = 40 units (r × 2)
<circle cx="50" cy="50" r="20" fill="blue" stroke="red" stroke-width="2" />
<ellipse cx="50" cy="50" rx="30" ry="15" />
cx, cy = center point coordinates
rx = horizontal radius (left/right distance from center)
ry = vertical radius (top/bottom distance from center)
Horizontal radius = 30 units from center to left/right edges
Vertical radius = 15 units from center to top/bottom edges
Width = 60 units (rx × 2)
Height = 30 units (ry × 2)
<!-- Wide oval -->
<ellipse cx="50" cy="50" rx="40" ry="20" />
<!-- Tall oval -->
<ellipse cx="50" cy="50" rx="15" ry="35" />
<!-- Nearly a circle -->
<ellipse cx="50" cy="50" rx="25" ry="24" />
Use center point (cx, cy) instead of corner (x, y)
Use radius (half-dimensions) instead of full width/height