<button id="generateButton">Generate SVG</button>

<div id="svgContainer"></div>

#svgContainer {
  margin-top: 20px;
}

#svgContainer img {
  max-width: 80%;
  height: auto;
  display: block;
  margin-top: 10px;
  margin-left: 100px;
}
#generateButton {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  color: white;
  background-color: #007bff; 
  transition: background-color 0.3s ease;
}

document.getElementById('generateButton').addEventListener('click', function () {

  const randomSeed = Math.random().toString(36).substring(7);
  
 
  const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  

  document.getElementById('generateButton').style.backgroundColor = randomColor;
  
  fetch(`https://api.dicebear.com/8.x/adventurer/svg?seed=${randomSeed}`)
    .then((response) => response.text())
    .then((svgContent) => {
      const svgContainer = document.getElementById('svgContainer');
   
      const myImage = new Image();

      myImage.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgContent);
     
      svgContainer.innerHTML = '';
      svgContainer.appendChild(myImage);
    })
    .catch((error) => {
      console.error('Error fetching SVG:', error);
    });
});