SVG Animate Opacity для значения переменной

Я пытаюсь анимировать элемент svg, чтобы он исчезал (медленно и изящно), когда двоичная переменная установлена ​​​​на ноль, а затем снова появлялся (опять же, красиво и медленно), когда двоичная переменная возвращается к единице. У меня исчезает изображение, но я не могу понять, как заставить его снова появиться. Вот JavaScript:

function go() {

    var max = 2;
    var random = Math.floor(Math.random() * Math.floor(max));;
    console.info("hi" + random);

    var elements = document.getElementsByTagName("animate");
    for (var i = 0; i < elements.length; i++) {
        if (random == 1) {
            elements[i].beginElement();
        }
        else {
            elements[i].endElement();

        }

    }
}

а вот элементы SVG

  <svg xmlns = "http://www.w3.org/2000/svg" class = "icons" width = "40" height = "40">
<g class = "icon" transform = "translate(-2 -2)">
  <path class = "icon__sight" d = "M38.255 20.182A16.353 16.353 0 0 0 23.818 5.745V2h-3.636v3.745A16.353 16.353 0 0 0 5.745 20.182H2v3.636h3.745a16.353 16.353 0 0 0 14.437 14.437V42h3.636v-3.745a16.353 16.353 0 0 0 14.437-14.437H42v-3.636h-3.745zM22 34.727A12.727 12.727 0 1 1 34.727 22 12.718 12.718 0 0 1 22 34.727z" fill = "#fff"/>
  <circle class = "icon__indicator" cx = "8" cy = "8" r = "8" transform = "translate(14 14)" fill = "#88db29">
    <animate dur = "1" attributeName = "opacity" from = "1" to = "0" begin = "move.end" repeatCount = "0" fill = "freeze" />
  </circle>/>
</g>

Любые советы или советы очень ценятся. Будьте добры, я новичок в этом :)