Blob Customizer | Online SVG Blob Generator Tool

<html lang="en">
<head>
  <title>Blob Customizer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }

.container {
      max-width: 600px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

.controls {
      display: flex;
      flex-direction: column;
    }

label {
      margin-top: 10px;
    }

input[type="range"] {
      width: 100%;
    }

.preview {
      margin-top: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Blob Customizer</h1>
    <div class="controls">
      <label for="seed">Seed:</label>
      <input type="range" id="seed" min="0" max="100" value="0" oninput="updateBlob()">
      <span id="seedValue">0</span>

<label for="extraPoints">Extra Points:</label>
      <input type="range" id="extraPoints" min="0" max="20" value="4" oninput="updateBlob()">
      <span id="extraPointsValue">4</span>

<label for="randomness">Randomness:</label>
      <input type="range" id="randomness" min="0" max="20" value="6" oninput="updateBlob()">
      <span id="randomnessValue">6</span>

<label for="fill">Fill Color:</label>
      <input type="color" id="fill" value="#ff0000" onchange="updateBlob()">

<label for="stroke">Stroke Color:</label>
      <input type="color" id="stroke" value="#000000" onchange="updateBlob()">

<label for="strokeWidth">Stroke Width:</label>
      <input type="range" id="strokeWidth" min="0" max="20" value="0" oninput="updateBlob()">
      <span id="strokeWidthValue">0</span>
    </div>
    <div class="preview">
      <h2>Blob Preview</h2>
      <img alt="Generated Blob" id="blobImage" src="">
    </div>
  </div>
  <script>
    function updateBlob() {
      const seed = document.getElementById('seed').value;
      const extraPoints = document.getElementById('extraPoints').value;
      const randomness = document.getElementById('randomness').value;
      const size = document.getElementById('size').value;
      const fill = document.getElementById('fill').value.replace('#', ''); // URL encode
      const stroke = document.getElementById('stroke').value.replace('#', ''); // URL encode
      const strokeWidth = document.getElementById('strokeWidth').value;
      console.log(fill)
      const blobUrl = `https://blobcdn.com/blob.svg?seed=${seed}&extraPoints=${extraPoints}&randomness=${randomness}&size=${size}&fill=${fill}&stroke=${stroke}&strokeWidth=${strokeWidth}`;

document.getElementById('blobImage').src = blobUrl;

// Update displayed values
      document.getElementById('seedValue').textContent = seed;
      document.getElementById('extraPointsValue').textContent = extraPoints;
      document.getElementById('randomnessValue').textContent = randomness;
      document.getElementById('sizeValue').textContent = size;
      document.getElementById('strokeWidthValue').textContent = strokeWidth;
    }

// Initialize the blob on page load
    window.onload = updateBlob;
  </script>

</body>
</html>

Blob Customizer | Online SVG Blob Generator Tool

You may like these posts :

Write Your Comment