- Notifications
You must be signed in to change notification settings - Fork0
100+ abstract shapes with gradient for design & dev project
License
lowcoder-org/coolshapes-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by@realvjy. Coolshapes is a completely open-source set of 100+ abstract shapes crafted for any design and development projects. Free for both commercial and personal use. Licensed under MIT.
npm install coolshapes-react
or
yarn add coolshapes-react
There are two types of components available inCoolshapes, which you can use:Global component andComponentfor each category of shapes. and, you can pass additionalprops to adjust the shapes.
Just import the Global componentCoolshape and it will work.
import{Coolshape}from"coolshapes-react";constApp=()=>{return<Coolshapetype="star"index={0}size={48}noise={true}/>;};exportdefaultApp;
You can import the component for specific category -Star,Ellipse... etc - and simply pass the index of the shape.
import{Star}from"coolshapes-react";constApp=()=>{return<Starindex={0}size={48}/>;};exportdefaultApp;
setting therandomprop to true or leaving theindex ortype prop empty would replace the shape with arandom shape every time it renders.
// renders a random shape from any categoryconstComponent=()=>{return<Coolshaperandom={true}/>;};// renders a shape from the category starconstComponent2=()=>{return<Coolshapetype="star"random={true}/>;};
import{getRandomShape}from"coolshapes-react";
getRandomShape();// returns a random shape component
getRandomShape({type:"ellipse"});// returns a random shape component from the category ellipse
getRandomShape({onlyId:true});// returns shape identifier that can passed as props to the shape component// {shapeType, index}
getRandomShape({onlyId:true,type:"star"});// returns shape identifier that can passed as props to the shape component// {shapeType: "star", index}
All the components are mapped from object that we have given you access to
constshapes={star:[Star1,Star2, ...],ellipse:[Ellipse1,Ellipse2, ...], ...}
import{shapes}from"coolshapes-react";constShapeGrid=()=>{return(<>{Object.keys(shapes).map((shapeType,_)=>{returnshapes[shapeType].map((Shape,index)=>{return<Shapesize={48}/>;});})}</>);};
shapes[type][index];
conststarComponents=shapes["star"];constStarComponent1=starComponents[0];
| name | data type | default | description |
|---|---|---|---|
size | Number | 200 | The dimension of shape |
type | String | random | The category of shapes, if left empty it will randomly select a category. |
noise | Boolean | true | Whether to add noise to the shape or not. |
index | Number | random | The index of shape within the shapecategory, it would randomly select a shape from the category if type prop given. index starts from 0. |
random | Boolean | false | If set true it will select a random component |
Index starts from number 0, so if you want to retrieve the first shape of any category, you would use the index number 0.
The shapes are SVG components behind the hood, so it's also supports all the props that can be passed in a svg element.
There are a total of115 shapes available in Coolshapes under the following categories.
| name | count |
|---|---|
star | 13 |
triangle | 14 |
moon | 15 |
polygon | 8 |
flower | 16 |
rectangle | 9 |
ellipse | 12 |
wheel | 7 |
misc | 11 |
number | 10 |
Note: While passing the category name in the component, the name will be in lower case.
all the components have classnamecoolshapes assigned as default, but you can also pass custom classname of yours.
import{Star}from'coolshapes-react';exportconstShape=()=>{return(<StarclassName={"myshape"}/>)}
// make the shapes size responsive similar to img elements..coolshapes{width:100%;max-height:48px;}
We have givenumd,es andcjs versions of the build.
constCoolshapes=require("coolshapes-react");
Using with react in the browser
<!doctype html><html><head><metacharset="UTF-8"/><scriptsrc="https://unpkg.com/react@18/umd/react.development.js"></script><scriptsrc="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><scriptsrc="https://unpkg.com/@babel/standalone/babel.min.js"></script><scriptsrc="https://unpkg.com/coolshapes-react/dist/umd/coolshapes.js"></script></head><body><divid="root"></div><scripttype="text/babel">constdomContainer=document.querySelector("#root");constroot=ReactDOM.createRoot(domContainer);constcoolshapes=window.coolshapes;constCoolshape=coolshapes.Coolshape;root.render(<Coolshape/>);</script></body></html>
https://unpkg.com/coolshapes-react/dist/umd/coolshapes.jsGrab it fromFigma Community
Crafted byrealvjy. You are always welcome to share your feedback on twitter or any other social media platform.
Noisy Gradients Plugin - Some of the gradients generated usingNoisy Gradients Figma plugin
If you want to contribute, create apull request.
Coffee fuels design & coding ☕️
About
100+ abstract shapes with gradient for design & dev project
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Languages
- TypeScript99.6%
- JavaScript0.4%