Подскажите, пожалуйста, как сверстать такой глаз:
пробовал использовать border-radius, но что- то не получилось.
const pup = document.querySelector('#pup');
const container = document.querySelector('.lien');
let cursor = {x: 0, y: 0};
let position = {x: 0, y: 0};
let width=500, height=500;
let radius = 20;
let speedMultiplier = 1e-3;
let lastTime;
let frames = 5e5;
function onMouseMove(event){
const bounds = container.getBoundingClientRect();
cursor.x = event.clientX - bounds.left - bounds.width / 2;
cursor.y = event.clientY - bounds.top - bounds.height / 2;
cursor.length = Math.sqrt(cursor.x * cursor.x + cursor.y * cursor.y);
cursor.x *= radius / cursor.length;
cursor.y *= radius / cursor.length;
}
document.addEventListener("mousemove", onMouseMove);
function loop(timestamp) {
const deltaTime = lastTime ? timestamp - lastTime : 0;
lastTime = timestamp;
if (0 === deltaTime) {
if (--frames > 0) return requestAnimationFrame(loop);
else return;
}
const multiplier = speedMultiplier * deltaTime;
const vector = {
x: cursor.x - position.x,
y: cursor.y - position.y,
};
position.x += vector.x * multiplier;
position.y += vector.y * multiplier;
// if(position.x<0) position.x = 0;
// if(position.x>width-radius*2) position.x = width-radius*2;
// if(position.y<0) position.y = 0;
// if(position.y>height-radius*2) position.y = height-radius*2;
pup.setAttribute('transform', `translate(${position.x}, ${position.y})`);
if (--frames > 0) requestAnimationFrame(loop);
else console.log("Out of frames");
}
requestAnimationFrame(loop);
.conatiner {
width: 800px;
}
.lien {
margin: auto;
width: 20%;
position: relative;
}
.bottom-line {
width: 100%;
height: 10px;
background: black;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
<div class="container">
<div class="lien anim">
<svg version="1.1" id="oeil" viewBox="0 0 62 36">
<style type="text/css">
.st0 {
fill: none;
stroke: #000000;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #000000;
stroke-miterlimit: 10;
}
</style>
<mask id="eyemask">
<rect fill="black" x="0" y="0" width="62" height="36" />
<path stroke="black" fill="white" d="M59,18c0,0-12.5,16-28,16S3,18,3,18S15.5,2,31,2S59,18,59,18z" />
</mask>
<path id="contour" class="st0 circle" d="M59,18c0,0-12.5,16-28,16S3,18,3,18S15.5,2,31,2S59,18,59,18z" />
<g mask="url(#eyemask)">
<g id="pup" class="anim eye">
<circle class="st1" cx="31" cy="18" r="11" />
<circle id="rondpup"fill="#FFB703" cx="31" cy="18" r="7" />
</g>
</g>
</svg>
</a>
<div class="bottom-line">
</div>
</div>
</div>