Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
2 hours ago

What is the method for randomly positioning an image within multiple nested border lines?

Can someone please help me place an image inside nested borders randomly? I would like to achieve the effect shown in the image below. Here is my current code:

.first {
  border: 2px solid #D9DFE7;
  width: 385px;
  height: 385px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 40px;
  margin-left: 40px;
}

.img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: -1.1rem;
}

.second {
  border: 2px solid #D9DFE7;
  width: 301px;
  height: 301px;
  border-radius: 50%;
  margin: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.imgSecond {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: -1.1rem;
}

.third {
  border: 2px solid #D9DFE7;
  height: 215px;
  width: 215px;
  border-radius: 50%;
  margin: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.imgThird {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: -1.1rem;
}

.forth {
  border: 2px solid #D9DFE7;
  height: 133px;
  width: 133px;
  border-radius: 50%;
  margin: 2.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.imgForth {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: absolute;
  top: -1.1rem;
}

.fifth {
  width: 49px;
  height: 49px;
  border: 2px solid #D9DFE7;
  border-radius: 50%;
  margin: 2.5%;
}
<div class="first">
  <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="img" />

  <div class="second">
    <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgSecond" />

    <div class="third">
      <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgThird" />

      <div class="forth">
        <img src="https://images.unsplash.com/photo-1683265379492-8179a1fff9c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3498&q=80" class="imgForth" />
        <div class="fifth"></div>
      </div>
    </div>
  </div>
</div>
I want to know how to randomly position the images as shown in the image. Any help is much appreciated. Thank you!

Answers(1)
avatar
Tolerim
2 hours ago
Verified Answer
To place images randomly inside nested border line like the image provided using JavaScript, one way to achieve this is by generating random x and y values for each image, and setting the position of the image using CSS top and left properties accordingly. Here's an example code snippet that you can use to achieve this effect: 
<div class="container">
  <img src="https://i.stack.imgur.com/5N92d.png" class="img1" />
  <img src="https://i.stack.imgur.com/5N92d.png" class="img2" />
  <img src="https://i.stack.imgur.com/5N92d.png" class="img3" />
  <img src="https://i.stack.imgur.com/5N92d.png" class="img4" />
</div>

<style>
  .container {
    position: relative;
    width: 400px;
    height: 400px;
    border: 2px solid #D9DFE7;
    border-radius: 50%;
    margin: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
  }

  .img1 {
    top: 20px;
    left: 20px;
  }
  
  .img2 {
    top: 100px;
    left: 50px;
  }
  
  .img3 {
    top: 170px;
    left: 120px;
  }
  
  .img4 {
    top: 250px;
    left: 280px;
  }
</style>

<script>
  function getRandomPosition(element) {
    const x = document.querySelector('.container').offsetWidth - element.clientWidth;
    const y = document.querySelector('.container').offsetHeight - element.clientHeight;
    const randomX = Math.floor(Math.random() * x);
    const randomY = Math.floor(Math.random() * y);
    return [randomX,randomY];
  }
  
  const images = document.querySelectorAll('.container img');
  
  images.forEach(image => {
    const randomPosition = getRandomPosition(image);
    image.style.top = randomPosition[0] + 'px';
    image.style.left = randomPosition[1] + 'px';
  });
</script>
In this example, we have a container element with a width and height of 400 pixels, and a border of 2 pixels solid #D9DFE7 with border-radius of 50%. We have also added four image elements inside the container with a src attribute linking to the image of choice. The CSS for the container applies position relative, display flex, align-items center, and justify-content center property. For each of the image elements, we have defined the position property as absolute and set the width and height properties to 35px and border-radius property to 50%. We have also defined a JavaScript function that returns a random x and y values for each image element. We then loop through each image element using forEach, get the random position generated by the getRandomPosition function, and set the top and left styles of the image element accordingly. This will allow the images to appear in random positions inside the container.
;