/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
position: absolute;
width: 100%;
height: 100%;
background-color: #323031;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.github {
bottom: 10px;
right: 10px;
position: fixed;
border-radius: 10px;
background: #fff;
padding: 0 12px 6px 12px;
border: 1px solid #000;
}
.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
color: #000;
text-decoration: none;
}
.github img {
height: 30px;
}
.github #gh-project {
font-size: 20px;
padding-left: 5px;
font-weight: bold;
vertical-align: bottom;
}
(async () => {
const options = {
fpsLimit: 60,
interactivity: {
events: {
onHover: {
enable: true,
mode: "bubble"
}
},
modes: {
bubble: {
distance: 40,
duration: 2,
opacity: 8,
size: 6,
speed: 3
}
}
},
particles: {
color: {
value: "#ff0000",
animation: {
enable: true,
speed: 20,
sync: true
}
},
links: {
blink: false,
color: "random",
consent: false,
distance: 30,
enable: true,
opacity: 0.3,
width: 0.5
},
move: {
enable: true,
outModes: "bounce",
speed: { min: 0.5, max: 1 }
},
number: {
value: 200
},
opacity: {
animation: {
enable: true,
speed: 2,
sync: false
},
random: false,
value: { min: 0.05, max: 1 }
},
shape: {
type: "circle"
},
size: {
animation: {
enable: false,
speed: 40,
sync: false
},
random: true,
value: { min: 0.1, max: 1 }
}
},
polygon: {
draw: {
enable: true,
stroke: {
color: "#fff",
width: 0.3,
opacity: 0.2
}
},
move: {
radius: 10
},
inline: {
arrangement: "equidistant"
},
scale: 0.5,
type: "inline",
url: "https://particles.js.org/images/smalldeer.svg"
}
};
await loadPolygonMaskPlugin(tsParticles);
await tsParticles.load({ id: "tsparticles", options });
})();