Random Blob Generator using HTML, CSS and JavaScript (Source Code)

Welcome to Coding Torque! Are you ready to unleash your creativity and bring your ideas to life with HTML, CSS, and JavaScript? In this tutorial, we will guide you through the process of building a dynamic and interactive Random Blob Maker App. You’ll learn how to use various programming techniques to generate unique and eye-catching designs, and you’ll have a blast experimenting with different color schemes and patterns. Whether you’re a beginner or an experienced coder, this project is sure to inspire and engage you. So let’s get started!

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Random Blob Generator using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <!-- Further code here -->

    <!-- JQUERY  -->
    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag

<div class="container">
    <div class="blob-wrapper">
        <div class="blob"></div>
    </div>
    <p class="style">border-radius: <span>Haha, blobs are funny :D</span>;</p>
    <button onclick="generateBlob()">Click me</button>
</div>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

* {
  text-align: center;
}

body {
  background: #675afe;
  display: flex;
  justify-content: center;
}

.container {
  margin-top: 2rem;
  width: 40rem;
  height: 100%;
  background: white;
  border-radius: 20px;
  padding: 40px;
}

.blob-wrapper {
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
}

.blob {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  background: url("../_imgs/coding-torque-logo.png");
  background-size: cover;
}

p {
  font-size: 20px;
  font-family: monospace, monospace;
}

button {
  margin: 0 0 0 20px;
  background: #675afe;
  color: white;
  border: 0;
  padding: 10px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  transition-duration: 0.4s;
}

button:hover {
  background: #675afe;
  cursor: pointer;
}

Output Till Now

JavaScript Code

Create a file script.js and paste the code below.

function generateBlob() {
    const percentage1 = Math.floor(Math.random() * 50) + 25;
    const percentage2 = Math.floor(Math.random() * 50) + 25;
    const percentage3 = Math.floor(Math.random() * 50) + 25;
    const percentage4 = Math.floor(Math.random() * 50) + 25;

    var percentage11 = 100 - percentage1;
    var percentage21 = 100 - percentage2;
    var percentage31 = 100 - percentage3;
    var percentage41 = 100 - percentage4;
    var borderRadius = `${percentage1}% ${percentage11}% ${percentage21}% ${percentage2}% / ${percentage3}% ${percentage4}% ${percentage41}% ${percentage31}%`;
    $(".blob").css("border-radius", borderRadius);
    $(".style span").html(borderRadius)
}

$(document).ready(function () {
    generateBlob();
});

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖