medium_clap.html

<div class="canvas">
    <div id="totalCounter" class="total-counter"></div>

    <div id="clap" class="clap-container">
        <i class="clap-icon fa fa-hand-paper-o"></i>
    </div>
    
    <div id="clicker" class="click-counter">
        <span class="counter"></span>
    </div>
    
    <div id="sonar-clap" class="clap-container-sonar"></div>
    
    <div id="particles" class="particles-container">
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
    </div>
    
    <div id="particles-2" class="particles-container">
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
    </div>
    
    <div id="particles-3" class="particles-container">
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
    </div>
    
</div>