Могу ли я динамически изменить свойство Clip с помощью JS?

Question

Я пытался изменить свойство клипа с помощью JS, используя входные значения и входные значения диапазона. Идея упражнения такова:

1. Я могу указать, сколько места займет желтый круг в поле ввода,
2. Я могу анимировать круг.

Вот мои текущие настройки

HTML: 
    </div>
        <div class="layer-one">
        <div class="layer-three"></div>
        <div class="layer-two"></div>
    </div>



       .layer-one {
      margin-top: 4em;
        width: 200px;
        height: 200px;
        background-color: lightgray;
        margin-right: 4em;
        border-radius: 50%;
        position: relative;
        border-radius: 50%;
    }

    .layer-two {
        width: 200px;
        height:200px;
        background-color: #ffdb4d;
        border-radius: 50%;
        position: absolute;
        clip: rect(0px, 100px, 100px, 0px); 
        transform: rotate(20deg);
    }

    .layer-three {
        width: 180px;
        height: 180px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        right: 10px;
        top: 10px;  
        z-index: 10000;
    } 

And here are the functions: 

    const valueInput = document.querySelector("#valueInput");
    const layerTwo = document.querySelector(".layer-two");
    const rangeInput = document.querySelector("#rangeInput");

    rangeInput.addEventListener("input", ()=> {
    let rangeValue = rangeInput.value;
    layerTwo.style.clip = "rect(0" + rangeValue + "px" + rangeValue + "px" + "0)";

    valueInput.addEventListener("input", ()=> {
    let valueFromInput = valueInput.value;
    layerTwo.style.clip = "rect(0" + valueFromInput + "px" + valueFromInput + "px" + "0)";
})

Проблема, которую я пытаюсь решить, - это изменение второго и третьего значения свойства clip с помощью входных данных. Таким образом, я смогу динамически изменять количество места, которое занимает желтый круг.

Экран проекта

Answer 1

Вам не хватает разделителей аргументов для прямоугольника:

Если, например, rangeValue=100, "rect(0" + rangeValue + "px" + rangeValue + "px" + "0)" оценивается как "rect(0100px100px0)"

, это должно быть что-то вроде: "rect(0," + rangeValue + "px," + rangeValue + "px," + "0)"