How do I get two eyes side by side?

Question

I copied this code (for the eyes) from someone who was kind enough to share it. I would like to put two eyes side by side. How would I do that? I tried <br/> and <hr>. neither worked.
https://code.sololearn.com/WyNyCx2INiB1/?ref=app

Answer 1

I deleted the two rectangle svgs, changed dimensions to 100x100 from 1000x1000 (for the circle svg), copy+pasted that and had two eyes side-by-side.

Answer 2

If your display is under ~2000 pixels across, the browser wraps the elements. Really, I chose 100 because it's fewer keystrokes and a flash assessment of x,y and radius put it in that magnitude.

More accurately, your largest radius is 50, center 80, so ...80-50 = left/top space of 30. 80+50 is 130...to get the same right/bottom space, 160x160.

Answer 3

This mostly omits the white space:
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" fill="none" stroke="black"/>
<circle cx="50" cy="50" r="25" fill="pink"/>
<circle cx="50" cy="50" r="10" fill="black"/>
<circle cx="60" cy="40" r="5" fill="white"/>
</svg>

Answer 4

Thanks. Can u by any chance tell me why this makes a difference 1000 to 100? Because to me it looked like 2 circles could fit side by side.

Answer 5

Just got around to doing it. why is it doing this?
https://code.sololearn.com/WamAxEDLDPuC/?ref=app

Answer 6

My code looks the same but it cuts off some of it.