Adding one image multiple times

December 10, 2021

I have this snippet here that I have been experimented on. I want to ask that instead of showing the circle, how can I insert the same image in place of those pixels several time and still have the same effect? Like instead of those circles, I want to insert one svg and have it pops up randomly like the current one.

Thank you very much !

var pix = document.getElementsByClassName("pixel");
for (var i = 0; i < pix.length; i++) {
  pix[i].style.animationDelay = Math.ceil(Math.random()*5000)+"ms";
}

html, body{
width: 100%; height: 100%;
margin: 0; padding:0;
background: rgb(255,255,255)
    overflow: hidden;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.pixelCon {
    position: absolute;
    width: 150%;  height: 150%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  
  .pixel {
    background: rgb(0, 0, 0);
    width: 200px;
    height: 200px;
    padding-top: 10%;
    border-radius: 50%;
    float: left;
    opacity: 0.0;
    animation: blink 5s infinite;
  }
  
  @keyframes blink {
    0%    {opacity: 0.0;}
    25%   {opacity: 0.0;}
    50%   {opacity: 0.5;}
    100%  {opacity: 0.0;}
  }

 <div class="sidePanel">
        <div class="pixelCon">
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          </div>
          </div>

>Solution :

Try this.

use CSS property content: url() and comment padding-top: 10%;

var pix = document.getElementsByClassName("pixel");
for (var i = 0; i < pix.length; i++) {
  pix[i].style.animationDelay = Math.ceil(Math.random()*5000)+"ms";
}

html, body{
width: 100%; height: 100%;
margin: 0; padding:0;
background: rgb(255,255,255)
    overflow: hidden;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.pixelCon {
    position: absolute;
    width: 150%;  height: 150%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  
  .pixel {
    background: rgb(0, 0, 0);
    width: 200px;
    height: 200px;
    /* padding-top: 10%; */
    border-radius: 50%;
    float: left;
    opacity: 0.0;
    animation: blink 5s infinite;
    content: url(https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578);
  }
  
  @keyframes blink {
    0%    {opacity: 0.0;}
    25%   {opacity: 0.0;}
    50%   {opacity: 0.5;}
    100%  {opacity: 0.0;}
  }

<div class="sidePanel">
        <div class="pixelCon">
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          <div class="pixel"></div>
          </div>
          </div>