Creating responsive eye focus icon - html

Question

I've been trying to make responsive colored eye focus icon, but so far all I've tried has been unsuccessful.
I was trying to somewhat replicate the colors of a real eye.
I used border, box shadow, to get the colors, but that part is not scaling. Tried with outline too, but failed as well, that one wasn't even round.
The height of the div is currently static, but I would like it to be responsive. So the whole eye scales properly across different sizes.
Here's my code:
<div class="paragraph eye-focus">
<div class="eye1" width="80%">
<div class="eye2"></div>
</div>
</div>
.eye1 {
height: 200px;
height: calc(attr(width) / 2.5);
width: 75%;
background-color: white;
border-radius: 50%;
position: relative;
margin: auto;
}
.eye2 {
background-color: black;
width: 8%;
height: 12%;
border-radius: 50%;
border: 0.5em solid #a50;
box-shadow: 0 0 0 1.5em #080;
position: absolute;
top: 40%;
left: 45%;
}
.eye-focus {
position: relative;
}
jsfiddle if you'd prefer https://jsfiddle.net/xcxdp92q/

Answer 1

I'd like to put my solution out there.
You can use background radial-gradient to create the eye in a single element.
When adding padding in %, it is based on the width of the element. Use that to your advantage to make it responsive. If padding equals width, the element will be a square.
.eye-focus {
box-sizing: content-box;
height: 0;
width: 75%;
padding: 30% 0 0 0;
margin: 0 auto;
border-radius: 50%;
background-color: #fff;
background-image: radial-gradient(circle, #000 8%, #a50 8%, #0b0 17%, #080 33%, transparent 33%);
}
<div class="paragraph">
<div class="eye-focus"></div>
</div>
jsfiddle

Answer 2

If you're only supporting browsers that support gradients (and current browsers most do) then you can just use one div and do all the colors in a radial gradient. I used vw to size it like Suthan Bala suggested in their comment.
body {
background: #EEE;
}
.eye {
border-radius: 50%;
background: -moz-radial-gradient(center, ellipse cover, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
background: -webkit-radial-gradient(center, ellipse cover, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
background: radial-gradient(ellipse at center, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1);
width: 35vw;
height: 35vw;
}
<div class="eye">
</div>
I used the Color Gradient Generator by Colorzilla.

Answer 3

Try using this CSS:
.eye1 {
height: 4vw;
width: 4vw;
background-color: white;
border-radius: 50%;
position: relative;
margin: auto;
}
.eye2 {
background-color: black;
width: 6vw;
height: 6vw;
border-radius: 50%;
border: 1em solid #a50;
box-shadow: 0 0 0 3vw #080;
position: relative;
top: 8vw;
left: 43%;
}
.eye-focus {
position: relative;
}
I've been using vw a lot lately (for a year now). Very handy!