unocss-preset-hero-patterns

🏁 UnoCSS preset that integrates Hero Patterns

Installation

pnpm add -D @julr/unocss-preset-heropatterns

Usage

import { defineConfig } from 'unocss'
import { presetHeroPatterns } from '@julr/unocss-preset-heropatterns'

export default defineConfig({
  presets: [
    presetHeroPatterns()
  ],
})

This preset add 2 rules

bg-hero-${patternName}-${color}

It works in a similar way to the tailwind/windicss plugin for heropatterns, it provides patternName with the color color as a background-image; color can be any valid unoCSS color pattern, so it is possible to directly control also the opacity with it; some examples:

<div class="bg-hero-rain-red-500"></div> <!-- this will render the rain pattern with color red-500 -->
<div class="bg-hero-rain-red-500/70"></div> <!-- this will render the rain pattern with color red-500 and 70% opacity -->
<div class="bg-hero-rain-[#fff]"></div> <!-- this will render the rain pattern with color #fff -->
<div class="bg-hero-rain-white-500 bg-dark-500"></div> <!-- it is also possible to combine it with a background color -->

bg-mask-hero-{patternName}

We use mask-image to display the patterns, so to change the color of the pattern, its opacity, or the background color, you can use the classes you are used to, for example :

<div class="bg-mask-hero-rain bg-red-500 opacity-70"></div>

List of patterns

• "jigsaw"
• "overcast"
• "formal-invitation"
• "topography"
• "texture"
• "jupiter"
• "architect"
• "cutout"
• "hideout"
• "graph-paper"
• "yyy"
• "squares"
• "falling-triangles"
• "piano-man"
• "pie-factory"
• "dominos"
• "hexagons"
• "charlie-brown"
• "autumn"
• "temple"
• "stamp-collection"
• "death-star"
• "church-on-sunday"
• "i-like-food"
• "overlapping-hexagons"
• "four-point-stars"
• "bamboo"
• "bathroom-floor"
• "cork-screw"
• "happy-intersection"
• "kiwi"
• "lips"
• "lisbon"
• "random-shapes"
• "steel-beams"
• "tiny-checkers"
• "x-equals"
• "anchors-away"
• "bevel-circle"
• "brick-wall"
• "fancy-rectangles"
• "heavy-rain"
• "overlapping-circles"
• "plus"
• "rounded-plus-connected"
• "volcano-lamp"
• "wiggle"
• "bubbles"
• "cage"
• "connections"
• "current"
• "diagonal-stripes"
• "flipped-diamonds"
• "floating-cogs"
• "glamorous"
• "houndstooth"
• "leaf"
• "lines-in-motion"
• "moroccan"
• "morphing-diamonds"
• "rails"
• "rain"
• "skulls"
• "squares-in-squares"
• "stripes"
• "tic-tac-toe"
• "zig-zag"
• "aztec"
• "bank-note"
• "boxes"
• "circles-squares"
• "circuit-board"
• "curtain"
• "diagonal-lines"
• "endless-clouds"
• "eyes"
• "floor-tile"
• "groovy"
• "intersecting-circles"
• "melt"
• "overlapping-diamonds"
• "parkay-floor"
• "pixel-dots"
• "polka-dots"
• "signal"
• "slanted-stars"
• "wallpaper"

License

MIT License © 2022 Julien Ripouteau