Overlapping Discs

Like they used to have on SoundCloud. Negative margin-right pulls the next one over.

•  
•  
•  
•  
•  
•  

<style>
ul{
    list-style-type:none;
    padding:0;
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.disc{
    width:40px;
    height:40px;
    border:2px solid white;
    background-color:blueviolet;
    border-radius:50%;
    margin-right:-8px;
}
</style>

<ul>
    <li class="disc">&nbsp;</li>
    <li class="disc">&nbsp;</li>
    <li class="disc">&nbsp;</li>
    <li class="disc">&nbsp;</li>
    <li class="disc">&nbsp;</li>
    <li class="disc">&nbsp;</li>
</ul>