Thanks for the reply, Mikel!
I had tried rotating the circle by 45 degrees, but I couldn't get the effect you've shown here. How did you generate the rotated square? I noticed your SVG path looks very different from the ones I posted. I generated mine in Sketch.
Anyway, the first scenario definitely looks a lot better in your pen. I'd love to do this for the second scenario too.