Coolshapes Vue

A simple, fun project for the sake of creating some cool-looking abstract shapes with little grainy gradients crafted by @realvjy, ported to Vue.js by @xiaoluoboding. 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.

Table of Contents

• Coolshapes Vue
  • Table of Contents
  • Installation
  • How to use
    • Global component example
    • Component with shape category example
    • Generating random shapes
    • Props
      • notes
    • Categories
  • Contributing
  • Thanks to
  • License

Installation

pnpm install coolshapes-vue

or

bun add coolshapes-vue

How to use

There are two types of components available in Coolshapes, which you can use: Global component and Component for each category of shapes. and, you can pass additional props to adjust the shapes.

Global component example

<template>
  <Coolshape type="star" :index="0" :size="48" />
</template>

<script lang="ts" setup>
import { Coolshape } from 'coolshapes-vue'
</script>

Component with shape category example

You can import the component for specific category - Star,Ellipse... etc - and simply pass the index of the shape.

<template>
  <Star :index="0" :size="48" />
</template>

<script lang="ts" setup>
import { Star } from 'coolshapes-vue'
</script>

Generating random shapes

setting the random prop to true or leaving the index or type prop empty would replace the shape with a random shape every time it renders.

<template>
  <!-- // renders a random shape from any category -->
  <Coolshape random />
  <!-- // renders a shape from the category star -->
  <Coolshape type="star" random />
</template>

<script lang="ts" setup>
import { Coolshape } from 'coolshapes-vue'
</script>

Props

| 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 shape category, 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 |

notes

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.

Categories

There are a total of 115 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.

Contributing

If you want to contribute, create a pull request.

Thanks to

coolshapes-react

License

MIT @xiaoluoboding