3 ms·
The logo soup problem: Math behind making mismatched logos look good together
- kmelve 8mo agoAuthor'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 https://github.com/sanity-labs/react-logo-soup Live Storybook: https://react-logo-soup.sanity.dev https://react-logo-soup.sanity.dev Working on getting Rosti signed up to HN for questions you might have!