Vuepress-plugin-geopattern NPM

VuePress Plugin GeoPattern

This component generate a beautiful random geometric pattern & random color background images from a string you given.

This plugin is a adapter of geopattern for VuePress

yarn add vuepress-plugin-geopattern -S
or
npm i vuepress-plugin-geopattern -S

...
module.exports = {
  ...,
  plugins: {
    ['geopattern']
  },
  ...
}
...

Only background image, you must give the height of the element

<GeoPattern style="height: 160px;" />

If you don't provide a seed, the pattern's seed is random.

In VuePress you can use global computed properties such as use this.$page.title as a seed, generate a geopattern by the page title.

Each page title is different, so you got difference geopattern.

<GeoPattern
  style="height: 160px;"
  seed="$page.title"
  :colorHexs="['F', '4', 'A']"
/>

In the case, you can let the slot element control the pattern's height

<geo-pattern>
  <div style="padding: 64px; font-size: 2rem; color: white;">
    All Posts
  </div>
</geo-pattern>

colorHexs is a new props for this component, I believe that three hexadecimal color value0-F can generate beautiful colors in random way.

Props	Description	Type	Default
seed	Will be used as the seed for generation	String	`vuepress-plugin-geopattern`
colorHexs	Given array elements is hexadecimal color value 0-F	Array	`['3', '9', 'C' ]`
baseColor	Controls the relative background color of the generated image.	String	`933c3c`

<GeoPattern /> component provide a custom slot, you can write some element on the generated pattern.

vuepress-plugin-hero-pattern - Hero Patterns is a set of repeatable, seemless SVG background patterns

5 years ago

5 years ago

5 years ago