Interactive backgrounds are always more appealing to users. In this code we also have one of these interactive backgrounds. This background has a dark theme. There are some pink rectangular particles in the background. By placing the mouse cursor on each part of the background, these particles escape and move in a circle with a radius of four centimeters away from the mouse cursor.


HTML
<!-- This script got from www.devanswer.com  -->
<script src='http://www.devanswer.com/codes/files/pineapple.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com ">Developers Answer</a></div>
                        

CSS
body {
    color: #fff;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
   background: #000000;
    line-height: 1.4;
    overflow-x: hidden !important;
}
Javascript
const particles = new Pineapple()
// particles.createBackgroundParticlesCircle({size:4,particleNumber:2500,color:'#ffaaff',speed:0.41})
particles.createBackgroundParticlesSquare({size:4,particleNumber:2500,color:'#ffaaff',speed:0.41})