Even though this is the first time the Pathogen puzzles have appeared on the website, they still went through several design refinements. It took a while to get the right look for the contact chart and accompanying solution labels.
Forming the seamless shape that encapsulates the contacts between circles/people was accomplished by merging shapes together (left column above), instead of trying to draw the shape from scratch. Unfortunately, there is a bug (I think) in the SVG rendering engine inside of Adobe Illustrator, as these complex shapes are not perfectly displayed on the website, regardless of browser. It’s a problem that I’m going to have to live with for the moment, as I can’t read the raw SVG code and mentally translate it into the visual shape to determine where the problem is.
An additional complication was the fact that different sizes of graphics would be necessary for what appeared in print versus on the website. This is something I try to avoid, as it creates twice the number of images that need to be produced, but occasionally it makes sense. Here, the print images needed to be smaller to fit on the page, while larger web images were more legible on the screen. The print images are scaled by 150% with further adjustments to lighten the stroke weights.