The logo soup problem: Math behind making mismatched logos look good together

Author's colleague here. Rosti wrote this after we kept running into the same problem across customer sites.

The core formula is Dan Paquette's proportional normalization (aspect ratio raised to a scale factor), but the density compensation and visual center-of-mass calculation are the interesting additions.

The visual center algorithm weights each pixel by sqrt(colorDistance) * (alpha / 255) to find where the "ink" actually lives vs. the geometric center. It's a subtle effect but makes a noticeable difference with asymmetric logos.

Library is MIT licensed: https://github.com/sanity-labs/react-logo-soup

Live Storybook: https://react-logo-soup.sanity.dev

Working on getting Rosti signed up to HN for questions you might have!