This was inspired by an old website called LayerVault. You can see an example of how that used to look like here.
yarn add react-avatar-generator or npm i react-avatar-generatorimport AvatarGenerator from 'react-avatar-generator';<AvatarGenerator
colors={['#333', '#222', '#ccc']}
backgroundColor="#000"
/>
This creates something like this:
With a little playing around with this component I found it quite easy to make something similar to what LayerVault originally had.
prop type default options width number 200 height number 200 mirrors number 3 zoom number 0.2 rotation number 0.3 fade number 1 opacity number 0.3 amount number 16 spacing number 20 wavelength number 2 sizing number 4 shape string 'circle' can becircle, triangle or square backgroundColor string '#fff' backgroundOpacity number 0.3 colors array [] prop type description randomize function Randomizes the kaleidoscope to have a new random pattern isValidHex function Passing in a string will return true of false if that string is a valid hex, a helpful function to have when working with colors getImageData function Calling this function returns the raw image/png data you can then use to save into a .png file.
class CustomAvatarGenerator extends React.Component {
constructor(props) {
super(props);
this.avatarGenerator = null;
}
randomize() {
this.avatarGenerator.randomize();
}
render() {
return (
<div>
<button onClick={this.randomize}>Randomize</buttom>
<AvatarGenerator
ref={(el) => {
this.avatarGenerator = el;
}
colors={['#333', '#222', '#ccc']}
backgroundColor="#000"
/>
</div>
);
}
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4