I have a React project which I would like to embed my logo as a polygon mask using tsparticles.
It works normally if I use the sample code from the official documentation page, however if I try to use the polygon mask option, it seems that it could not detect the SVG format. I don't know whether this is a browser issue or not.
Below is the original code from codepen by the creator embedded to my React project.
I have my own logo which I store locally but for this question, I'm going to use the code from the original author of the code.
import React from "react";
import { Container} from "#material-ui/core";
import Particles from "react-tsparticles";
//import polygonmasklogo from "./polygonmask.svg";
export default function Banner() {
return (
<Container >
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "#fff",
},
},
detectRetina: false,
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onHover: {
enable: true,
mode: "bubble",
},
resize: true,
},
modes: {
bubble: {
distance: 40,
duration: 2,
opacity: 8,
size: 6,
speed: 3,
},
},
},
particles: {
color: {
value: "#ff0000",
animation: {
enable: true,
speed: 20,
sync: true,
},
},
lineLinked: {
blink: false,
color: "random",
consent: false,
distance: 30,
enable: true,
opacity: 0.3,
width: 0.5,
},
move: {
attract: {
enable: false,
rotate: {
x: 600,
y: 1200,
},
},
bounce: false,
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 1,
straight: false,
},
number: {
density: {
enable: false,
area: 2000,
},
limit: 0,
value: 200,
},
opacity: {
animation: {
enable: true,
minimumValue: 0.05,
speed: 2,
sync: false,
},
random: false,
value: 1,
},
shape: {
type: "circle",
},
size: {
animation: {
enable: false,
minimumValue: 0.1,
speed: 40,
sync: false,
},
random: true,
value: 1,
},
},
polygon: {
draw: {
enable: true,
lineColor: "rgba(255,255,255,0.2)",
lineWidth: 0.3,
},
move: {
radius: 10,
},
inlineArrangement: "equidistant",
scale: 0.5,
type: "inline",
//url: {polygonmasklogo},
url: "https://cdn.matteobruni.it/images/particles/smalldeer.svg",
},
}}
/>
</Container>
);
}
The Polygon Mask feature requires pathseg library to work correctly in some browsers (Chrome removed the SVG 1.1 support in a recent version)
pathseg is a client-side library like tsParticles, so if you are using a framework that uses SSR you need to check the documentation for the client-side imports.
I have a working sample with Next.js here
This is the code needed for Next.js before returning the <Particles /> component:
if (process.browser) {
require("pathseg");
}
If you are using React client-side just import pathseg like this:
import "pathseg";
This should fix your issue.
Related
I’m working with Tailwind.css in my Django templates, but for a while, I’m trying to reproduce something that requires JavaScript.
<div id="chart">
</div>
<script>
var options = {
series: [76, 67, 61, 90],
chart: {
height: 390,
type: 'radialBar',
},
plotOptions: {
radialBar: {
offsetY: 0,
startAngle: 0,
endAngle: 270,
hollow: {
margin: 5,
size: '30%',
background: 'transparent',
image: undefined,
},
dataLabels: {
name: {
show: false,
},
value: {
show: false,
}
}
}
},
colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
legend: {
show: true,
floating: true,
fontSize: '16px',
position: 'left',
offsetX: 160,
offsetY: 15,
labels: {
useSeriesColors: true,
},
markers: {
size: 0
},
formatter: function(seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
},
itemMargin: {
vertical: 3
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
show: false
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
As much as you can see, I created this script in the HTML template file, but my div is invisible on the page when I render and it is also in my developer tools, which means that is there, but it does not appear.
I’m expecting to render this code, which is a radial chart bar, in my HTML.
I'm trying to represent in a real timeline chart the input from a user's microphone in hertz (corresponding to each musical note from the second octave to the 6th). I'm trying to achieve something like: this
Right now I got: this. If I use the formatter function I get: this.
My problem is that I need to replace the hertz value for the octave scale (A2, B2, C2, D2, E2, F2, G2 and so on) on the Y-axis.
My config:
const initialOptions = {
chart: {
id: "realtime",
height: 350,
type: "line",
animations: {
enabled: true,
easing: "linear",
dynamicAnimation: {
speed: 20,
},
},
toolbar: {
show: false,
},
zoom: {
enabled: true,
type: "x",
autoScaleYaxis: true,
zoomedArea: {
fill: {
color: "#90CAF9",
opacity: 0.4,
},
stroke: {
color: "#0D47A1",
opacity: 0.4,
width: 1,
},
},
},
},
dataLabels: {
enabled: true,
},
stroke: {
curve: "smooth",
width: 0.99,
opacity: 1,
},
markers: {
size: 0,
},
plotOptions: {
bar: {
horizontal: false,
},
},
legend: {
show: false,
},
dataLabels: {
offsetX: 0,
enabled: true,
},
xaxis: {
show: true,
categories: [0],
tickAmount: 10, // optional tickAmount value
},
};
And I have tried updating the options on a useEffect like this:
yaxis: {
tickAmount: 1,
labels: {
enabled: true,
formatter: function (val, index) {
return currentNote; // This prints the same output on each line of the Y axis as in picture 2
},
},
},
I've been stuck on this for days now and I'm not sure if I should move on to another library. Any suggestions welcomed!
I am trying to add style to the div element which gets created while adding particle component in React. I am adding the style in Component and not in the options params provided by tsparticles. But the height and visibility properties is getting added to the canvas. Please see attached screenshot in the post.
<Particles
className="react-particles"
id="particles-js"
style={
{
visibility: "hidden"
}
}
options={{
background: {
color: {
value: "#3e1110"
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: false,
mode: "push",
},
onHover: {
enable: false,
mode: "repulse"
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4
}
}
},
canvas:{
w: "500",
h: "500"
},
particles: {
number: {
value: 40,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#722035"
},
shape: {
type: "edge",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
"nb_sides": 5
},
image: {
src: "img/github.svg",
width: 50,
height: 50
}
},
opacity: {
value: 0.749690259550659,
random: true,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 3,
size_min: 1,
sync: false
}
},
line_linked: {
enable: false,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 3,
direction: "top-right",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: false,
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,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
detectRetina: true,
}}
/>
I am trying to replicate ts particle params to use in React particles. I used the same params what are working in tsparticles, But in React it is not getting displayed.
Here are the below config params for both TsParticle and React Particle.
TSParticles
particles: {
number: { value: 10, density: { enable: true, value_area: 9999999 } },
color: { value: "#ffffff" },
shape: {
type: "square",
stroke: { width: 0, color: "#000000" },
image: { src: "img/github.svg", width: 50, height: 50 }
},
opacity: {
value: 1,
random: true,
anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
},
line_linked: {
enable: false,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 0.5,
direction: "bottom-right",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 600 }
}
},
interactivity: {
detect_on: "canvas",
events: {
resize: true
},
modes: {
grab: { distance: 191.80819180819182, line_linked: { opacity: 1 } },
bubble: { distance: 250, size: 0, duration: 2, opacity: 0, speed: 3 },
repulse: { distance: 695.3046953046953, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
React Particles
particles: {
number: { value: 10, density: { enable: true, value_area: 99999 } },
color: { value: "#ffffff" },
shape: {
type: "square",
stroke: { width: 0, color: "#000000" },
image: { src: "img/github.svg", width: 50, height: 50 }
},
opacity: {
value: 1,
random: true,
anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
},
move: {
enable: true,
speed: 0.5,
direction: "top-left",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 600 }
},
interactivity: {
detect_on: "canvas",
events: {
resize: true
}
},
},
Link for both TsParticles and React Particles
TSParticle
React Particle
particle-react-js is not filling up the entire screen, only a section of it. When I wrapped it in an ID and gave the id height:100%, it would not work properly. I am using AWS Amplify to create the web app with the React framework. This is how the problem looks like : https://imgur.com/a/LjXXKlw . I gave particle component the particle-js Id. This is how the id looks in my css:
#particles-js{
height:100%;
}
My code is :
import React, { Component } from 'react';
import Amplify, { Interactions, Storage } from 'aws-amplify';
import { ChatBot, AmplifyTheme } from 'aws-amplify-react';
import { withAuthenticator, AmplifySignOut, SignOut } from '#aws-amplify/ui-react';
//import {withAuthenticator} from 'aws-amplify-react';
import Particles from 'react-particles-js';
import awsconfig from './aws-exports';
import './App.css';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
Amplify.configure(awsconfig);
Amplify.configure({
Auth: {
identityPoolId: '#######',
region: 'ap-southeast-1'
},
Interactions: {
bots: {
"#####": {
"name": "#####",
"alias": "$LATEST",
"region": "#####",
},
}
}
});
Storage.configure({
customPrefix: {public:''}
})
// Imported default theme can be customized by overloading attributes
const myTheme = {
...AmplifyTheme,
color:'#00f0fc',
sectionHeader: {
...AmplifyTheme.sectionHeader,
backgroundColor: '#ff6600'
}
};
let params = {
particles: {
number: {
value: 40,
density: {
enable: true,
value_area: 800
}
},
color: {
value: ["#c311e7", "#b8e986", "#4dc9ff", "#ffd300", "#FF7E79"]
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
},
image: {
src: "img/github.svg",
width: 100,
height: 100
}
},
opacity: {
value: 0.9,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.5,
sync: false
}
},
size: {
value: 8,
random: true,
anim: {
enable: false,
speed: 30,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 80,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 3,
direction: "none",
random: false,
straight: false,
out_mode: "bounce",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
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: 150,
duration: 1
},
push: {
particles_nb: 3
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
};
class App extends Component {
state = {
imageName: "",
imageFile: "",
response: ""
};
uploadImage = () => {
//SetS3Config("####", "protected");
Storage.put(this.upload.files[0].name,
this.upload.files[0],
{ contentType: this.upload.files[0].type },
)
.then(result => {
this.upload = null;
this.setState({ response: "Success, uploading file!" });
})
.catch(err => {
this.setState({ response: `Unable to upload file: ${err}` });
});
};
handleComplete(err, confirmation) {
if (err) {
alert('Bot conversation failed')
return;
}
alert('Success: ' + JSON.stringify(confirmation, null, 2));
return '######';
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to SuppBot!</h1>
<h2>L######</h2>
<h2>####</h2>
</header>
<ChatBot
title="#####"
theme={myTheme}
botName="#####3"
welcomeMessage="#####"
//onComplete={this.handleComplete.bind(this)}
clearOnComplete={false}
conversationModeOn={false}
/>
<div id="particles-js" ><Particles params={params} /></div>
</div>
);
}
}
export default withAuthenticator(App, {includeGreetings:true});