Change <svg> 4 times and loop it - loops

Question

I'm trying to change 4 on time and loop it. On page load it should show the first then the second and so on... Sorry for the question. I am totally new to this kinda Javascript/jQuery. Is it possible to do a class changer like class="show" and class="hide"? Thank you
Here is my code i want to loop:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><polygon points="863 0 863 443 417 443 417 0 0 0 0 1024 417 1024 417 582 863 582 863 1024 1280 1024 1280 0 863 0"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M2019-.12H1602l-322,1024h417l139.77-444.5h166.46L2143,1023.88h417L2238-.12Zm-138.52,440.5L1920,314.71l39.52,125.67Z" transform="translate(-1280 0.13)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M3240,0c-353.46,0-640,229.23-640,512s286.54,512,640,512,640-229.23,640-512S3593.46,0,3240,0Zm0,885c-123.16,0-223-167-223-373s99.84-373,223-373,223,167,223,373S3363.16,885,3240,885Z" transform="translate(-2600)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" preserveAspectRatio="none"><polygon points="417 0 0 0 0 885 0 1024 417 1024 1024 1024 1024 885 417 885 417 0"/></svg>

Answer 1

I hope this is what you want. I've made the svg elements smaller, and I'm using a css animation to change the opacity of the SVG elements.
svg{height:100px; opacity:0 }
#keyframes _h {
0%{opacity:0}
20%{opacity:1}
90%{opacity:1}
}
#keyframes _a {
0%{opacity:0}
20%{opacity:0}
40%{opacity:1}
90%{opacity:1}
}
#keyframes _o {
0%{opacity:0}
40%{opacity:0}
60%{opacity:1}
90%{opacity:1}
}
#keyframes _l {
0%{opacity:0}
60%{opacity:0}
80%{opacity:1}
90%{opacity:1}
}
#H{
animation: _h 5s ease-in infinite
}
#A{
animation: _a 5s ease-in infinite
}
#O{
animation: _o 5s ease-in infinite
}
#L{
animation: _l 5s ease-in infinite
}
<svg id="H" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><polygon points="863 0 863 443 417 443 417 0 0 0 0 1024 417 1024 417 582 863 582 863 1024 1280 1024 1280 0 863 0"/></svg>
<svg id="A" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M2019-.12H1602l-322,1024h417l139.77-444.5h166.46L2143,1023.88h417L2238-.12Zm-138.52,440.5L1920,314.71l39.52,125.67Z" transform="translate(-1280 0.13)"/></svg>
<svg id="O" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1024" preserveAspectRatio="none"><path d="M3240,0c-353.46,0-640,229.23-640,512s286.54,512,640,512,640-229.23,640-512S3593.46,0,3240,0Zm0,885c-123.16,0-223-167-223-373s99.84-373,223-373,223,167,223,373S3363.16,885,3240,885Z" transform="translate(-2600)"/></svg>
<svg id="L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" preserveAspectRatio="none"><polygon points="417 0 0 0 0 885 0 1024 417 1024 1024 1024 1024 885 417 885 417 0"/></svg>