チェックアイコンがドローインする入力欄

<div class="d04-11-05-field">
          <div class="d04-11-05-inputwrap">
            <input type="text" class="d04-11-05-input" placeholder="ユーザー名(4文字以上)" aria-label="ユーザー名">
            <span class="d04-11-05-iconwrap">
              <svg class="d04-11-05-check" viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="12" cy="12" r="10" fill="none" stroke="#22b573" stroke-width="2"/>
                <polyline points="7 12.5 10.5 16 17 8.5" fill="none" stroke="#22b573" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </div>
        </div>

.d04-11-05-field{width:min(270px,100%)}
        .d04-11-05-inputwrap{position:relative}
        .d04-11-05-input{width:100%;padding:12px 42px 12px 14px;font-size:14px;border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;transition:border-color .25s}
        .d04-11-05-input:focus{border-color:#4a6cf7}
        .d04-11-05-input.is-valid{border-color:#22b573}
        .d04-11-05-iconwrap{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:22px;height:22px}
        .d04-11-05-check{width:100%;height:100%}
        .d04-11-05-check circle{stroke-dasharray:63;stroke-dashoffset:63;transition:stroke-dashoffset .4s ease}
        .d04-11-05-check polyline{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s ease .35s}
        .d04-11-05-input.is-valid ~ .d04-11-05-iconwrap .d04-11-05-check circle{stroke-dashoffset:0}
        .d04-11-05-input.is-valid ~ .d04-11-05-iconwrap .d04-11-05-check polyline{stroke-dashoffset:0}

(function(){
        var input=document.querySelector('.d04-11-05-input');
        if(!input)return;
        input.addEventListener('input',function(){
          input.classList.toggle('is-valid',input.value.trim().length>=4);
        });
      })();