I can't figure out how to assign multiple colors to links in tsParticles.
For particles themselves, it's straightforward:
color: {
value: ["#03dac6", "#fac561", "#000000"],
animation: {
enable: true,
speed: 40,
sync: false
}
},
Same does not work for link. I want to use identical colors as particles.
tsParticles.load("tsparticles", {
particles: {
number: {
value: 400
},
color: {
value: ["#03dac6", "#fac561", "#000000"],
animation: {
enable: true,
speed: 40,
sync: false
}
},
shape: {
type: "circle",
},
size: {
value: 2,
random: true,
animation: {
enable: true,
speed: 16,
minimumValue: 0.1,
sync: false
}
},
links: {
enable: true,
distance: 100,
color: "random",
opacity: 1,
width: 1
},
move: {
enable: true,
},
},
detectRetina: true,
});#tsparticles {
/* background; */
width: 100vw;
background-color: #212b29;
height: 70vh;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>tsparticles </title>
<!-- Import app.css from root directory -->
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<!-- tsparticles div dom -->
<div id="tsparticles"></div>
<!-- Import cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"></script>
<!-- Import app.js from root directory -->
<script src="/app.js">
</script>
</body>
</html>