multi colored shapes image

How to Create Multi Color Animated Shapes in HTML Web Page? | Web Design

Mofreh
October 29, 2019
particles.js / Web Design
1 Comment

Multi Color Animated Shapes: In this lesson we will know how to create multi animated shapes such as circle, rectangle, start, polygon and triangle. We will use Particles.js library to help us create those particles.

This Post will follow the following:

Download and extract Particles.js library.
Create the custom HTML and style code.
Link the files that we will need.
Add our custom code.

Lesson 07

This is a YouTube Video for More about Animated Shapes:

https://youtu.be/acM5mAE6rNI

Download and extract Particles.js library:

First of all we need to download Particles.js library from the following link https://github.com/VincentGarreau/particles.js.git. After downloading this package we will need to extract it and copy the “particles.js” file into our coding place. Also you will need to copy the app.js file in the same package at this path /demo/js/app.js.

Create the custom HTML and style code:

Here we will create an html file and add our code to that file, the following code is the content of the html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    body{
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    #ShapeID{
        background: linear-gradient(to top , #9e1068,#ff5ec5);
    }
</style>
</head>
<body>
<div id="ShapeID"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>

Link the files that we will need:

Actually the previous code is containing the linking code too. The linking code is like the following ensure from the path and the name:

<script src="particles.js"></script>
<script src="app.js"></script>

And this is the ID that we will need:

<div id="ShapeID"></div>

Add our custom code:

As a final step we will modify the app.js file to match our desired code, as the following:


particlesJS('ShapeID',
  
  {
    "particles": {
      "number": {
        "value": 100,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": ['#19f21a','#ffdf0e','#044cff','#17c9ba','#fdffff','#ff4444']
      },
      "shape": {
        "type": ['circle','edge','triangle','polygon','star'],
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.8,
        "random": false,
        "anim": {
          "enable": false,
          "speed": 5,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 17,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": false,
        "distance": 150,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 1
      },
      "move": {
        "enable": true,
        "speed": 6,
        "direction": "none",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": false,
          "mode": "repulse"
        },
        "onclick": {
          "enable": true,
          "mode": "push"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 1
          }
        },
        "bubble": {
          "distance": 400,
          "size": 40,
          "duration": 2,
          "opacity": 8,
          "speed": 3
        },
        "repulse": {
          "distance": 200
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true,
    "config_demo": {
      "hide_card": false,
      "background_color": "#b61924",
      "background_image": "",
      "background_position": "50% 50%",
      "background_repeat": "no-repeat",
      "background_size": "cover"
    }
  }

);

The most important part in the previous code is the color and shapes, here is the code:

  "color": {
        "value": ['#19f21a','#ffdf0e','#044cff','#17c9ba','#fdffff','#ff4444']
      },
      "shape": {
        "type": ['circle','edge','triangle','polygon','star'],
        "stroke": {
          "width": 0,
          "color": "#000000"
        },

In that code we added an array for the color and the shapes, so that the browser will select a random color and shapes the color array is “value”: [‘#19f21a’,’#ffdf0e’,’#044cff’,’#17c9ba’,’#fdffff’,’#ff4444′] with hex value. And the shapes array is “type”: [‘circle’,’edge’,’triangle’,’polygon’,’star’], so it contain five type of shapes that will appear in the web page.

The other code we have explained them in previous lessons at particles.js tag just clikc at particles.js tag at the bottom and you will find the full lessons.

Your Could Download the code from this button:

Download Code

Website URL:

Consequently You could follow us at :

Website URL: https://www.safhatech.com/

YouTube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instagram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967778283416