Design lab / optical alignment

Your play button is perfectly centered. That is why it looks wrong.

Put a triangle in a circle by its bounding box and it sits too far left. Six shapes, one job: drag each one until it looks centered. Then see where your eye landed, measured from the actual pixels.

Shape 1 of 6

Make it look centered

Drag the shape, or focus the circle and use the arrow keys. Ignore the math. Trust your eye. The dashed cross marks the exact center of the circle.

How it works: each shape is rasterized in your browser. The box center is the middle of its bounding box, what most design tools align. The mass center is the average position of every inked pixel. Your position is scored as the share of the way you moved from the box center toward the mass center along the line between them, and the error is the distance to each in pixels (circle radius 130 px). All values are computed live from the shapes on this page; nothing is loaded from outside.