<!-- tsParticles container -->
<div id="tsparticles"></div>
<!-- https://github.com/matteobruni/tsparticles -->
<div class="github">
<a class="btn btn-link" href="https://github.com/matteobruni/tsparticles" title="Find more info on GitHub">
<img class="img-fluid" id="gh-mark" src="https://cdn.matteobruni.it/images/particles/GitHub-Mark-120px-plus.png" alt="">
<span id="gh-project">Made with tsParticles</span>
</a>
<div>
<a class="github-button" href="https://github.com/matteobruni/tsparticles" data-icon="octicon-star" data-show-count="true" aria-label="Star matteobruni/tsparticles on GitHub">Star</a>
<a class="github-button" href="https://github.com/matteobruni/tsparticles/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork matteobruni/tsparticles on GitHub">Fork</a>
<a class="github-button" href="https://github.com/matteobruni/tsparticles/releases/tag/tsparticles%401.28.0" data-icon="octicon-download" aria-label="Download matteobruni/tsparticles on GitHub">Download</a>
</div>
</div>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- tsparticles container ---- */
.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;
}
tsParticles.load("tsparticles", {
background: {
color: {
value: "#000000"
}
},
fullScreen: {
enable: true,
zIndex: -1
},
interactivity: {
detectsOn: "window"
},
emitters: {
position: {
x: 50,
y: 100
},
rate: {
quantity: 5,
delay: 0.25
}
},
particles: {
color: {
value: ["#1E00FF", "#FF0061", "#E1FF00", "#00FF9E"]
},
move: {
decay: 0.05,
direction: "top",
enable: true,
gravity: {
enable: true
},
outModes: {
top: "none",
default: "destroy"
},
speed: { min: 25, max: 50 }
},
number: {
value: 0
},
opacity: {
value: 1
},
rotate: {
value: {
min: 0,
max: 360
},
direction: "random",
animation: {
enable: true,
speed: 30
}
},
tilt: {
direction: "random",
enable: true,
value: {
min: 0,
max: 360
},
animation: {
enable: true,
speed: 30
}
},
size: {
value: 8
},
roll: {
darken: {
enable: true,
value: 25
},
enable: true,
speed: {
min: 5,
max: 15
}
},
wobble: {
distance: 30,
enable: true,
speed: {
min: -7,
max: 7
}
},
shape: {
type: [
"circle",
"square",
"polygon",
"character",
"character",
"character",
"image",
"image",
"image"
],
options: {
image: [
{
src: "https://particles.js.org/images/fruits/apple.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/avocado.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/banana.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/berries.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/cherry.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/grapes.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/lemon.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/orange.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/peach.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/pear.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/pepper.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/plum.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/star.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/strawberry.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/watermelon.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
},
{
src: "https://particles.js.org/images/fruits/watermelon_slice.png",
width: 32,
height: 32,
particles: {
size: {
value: 16
}
}
}
],
polygon: [
{
sides: 5
},
{
sides: 6
}
],
character: [
{
fill: true,
font: "Verdana",
value: ["💩", "🤡", "🍀", "🍙", "🦄", "⭐️"],
style: "",
weight: 400
}
]
}
}
}
});