Is there a way we can pull off this with pure CSS instead of an image? Know there have been discussions before, but to see if that's doable...

Not really — not without having the corners misaligned or dots getting cut off (I tried). I really don't want to go down the path of changing the implementation for this again when we finally got it working. but I'm happy to change out that SVG for a new one if you want to update it.

Here's what it would look like if I just change the size of the dots, but I don't know if you'd also want to update the spacing between dots.

@ryelle

Thanks. If you can put this version live, that's good, as long as previous fallback is somewhere to be found? So we can revert easily.

This works well for what we need, but in case someone wants it reverted, we need the current version saved, or guide on how to put it back. Let me know if I can help with that record/tracking somehow.

Thank you!

If this needs to be undone, the commit can be reverted or just the dots-hero.svg file can be updated to set the r="2.5" back to r="4" — all I did was a find & replace to update this 🙂