Javascript 防止径向梯度改变形状&；大小

我正在尝试制作一个css3/js眼球。它看着你的鼠标指针

正如在这里可以看到的那样，它在某种程度上起作用（将鼠标移到预览框中）

我的主要问题在于绘制

径向梯度

径向梯度（在“+perX+”%“+perY+”%、#000 20%、#469B98 21%、#3083B7 30%、#306BB7 40%、#FFF 25%、#DE888处）
绘制梯度并允许移动，但移动时形状和大小会发生变化。经过一番搜索，我发现了
circle
属性：

径向渐变（位于“+perX+”%“+perY+”%、#000 20%、#469B98 21%、#3083B7 30%、#306BB7 40%、#FFF 25%、#DE888处的圆圈）
绘制渐变并允许移动，限制形状，但大小会随移动而变化

如何防止大小发生变化？（我认为这是另一个属性）

编辑：这看起来很完整，可以制作任意大小的单眼或多眼（大小都相同）

编辑2:我决定继续为多种尺寸和自定义颜色扩展此功能-
使用绝对值作为渐变距离，而不是使用百分比：

我在小提琴上试过，效果很好；只需在你的形状后添加一个固定的尺寸（150px在我看来很不错）

我已经在按照Rajkumar建议的方向工作，但希望通过更改
eyeballer
div维度来轻松调整眼球大小。我最终得到了这个-…但我真的很喜欢Jon建议的答案，修改渐变停止点要容易得多。所以我想到了这个-我正朝着这个方向努力，但是如果你想要一个容易调整大小的眼球，并且进行了一些调整，这证明了对于一个可调整大小的眼球来说，这是一个比我所做的更好的解决方案
$("#eyeballer").css('background','radial-gradient(circle at '+perX+'% '+perY+'%, #000 50px, #469B98 55px, #3083B7 80px, #306BB7 90px, #FFF 100px, #DE8888 120px)');

 $("#eyeballer").css('background','radial-gradient(circle 150px at '+perX+'% '+perY+'%, #000 20%, #469B98 21%, #3083B7 30%, #306BB7 40%, #FFF 25%, #DE8888)');
    //var perXY = "( " + perX + ", " + perY + " )";
    //$("span:first").text("( perX, perY ) - " + perXY);
});