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.
1 comment
[ 2.7 ms ] story [ 16.9 ms ] threadThe 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!