Logo Windi CSS

@windicss/plugin-heropatterns

Streamlined integration between windicss and heropatterns. This plugin is modified based on tailwind-heropatterns to adapt to Windi CSS.

Installation

Add this plugin to your project:

npm install --save-dev @windicss/plugin-heropatterns

Usage

The heropatterns plugin exposes some options to configure the generated classes. Here is the example for adding it to your project plugins

require('@windicss/plugin-heropatterns')({
  // the list of patterns you want to generate a class for
  // the names must be in kebab-case
  // an empty array will generate all 87 patterns
  patterns: ['polka-dots', 'signal'],

  // The foreground colors of the pattern
  colors: {
    'default': '#9C92AC',
    'blue-dark': '#000044', // also works with rgb(0,0,205)
  },

  // The foreground opacity
  opacity: {
    default: '0.4',
    100: '1.0',
  },
})

This configuration would create the following classes:

.bg-hero-polka-dots-100 {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='1.0' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-hero-signal-100 {
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%239C92AC' fill-opacity='1.0' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-hero-polka-dots-blue-dark-100 {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000044' fill-opacity='1.0' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-hero-signal-blue-dark-100 {
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%23000044' fill-opacity='1.0' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-hero-polka-dots {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-hero-signal {
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.bg-hero-polka-dots-blue-dark {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000044' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-hero-signal-blue-dark {
  background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='...' fill='%23000044' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

As you can see when you use the default key for colors or opacity it is omitted in the class name.

So the following configuration:

require('@windicss/plugin-heropatterns')({
  patterns: ['polka-dots', 'signal'],
  colors: {
    default: '#9C92AC',
  },
  opacity: {
    default: '0.4',
  },
})

Will generate only the following classes

.bg-hero-polka-dots {
  /**/
}
.bg-hero-signal {
  /**/
}

Defaults

The default configuration is the following. And it will generate all the patterns with the default color of heropatterns.com

config = {
  patterns: [],
  colors: {
    default: '#9C92AC',
  },
  opacity: {
    default: 0.4,
  },
}

Pattern names list

  1. anchors-away
  2. architect
  3. autumn
  4. aztec
  5. bamboo
  6. bank-note
  7. bathroom-floor
  8. bevel-circle
  9. boxes
  10. brick-wall
  11. bubbles
  12. cage
  13. charlie-brown
  14. church-on-sunday
  15. circles-squares
  16. circuit-board
  17. connections
  18. cork-screw
  19. current
  20. curtain
  21. cutout
  22. death-star
  23. diagonal-lines
  24. diagonal-stripes
  25. dominos
  26. endless-clouds
  27. eyes
  28. falling-triangles
  29. fancy-rectangles
  30. flipped-diamonds
  31. floating-cogs
  32. floor-tile
  33. formal-invitation
  34. four-point-stars
  35. glamorous
  36. graph-paper
  37. groovy
  38. happy-intersection
  39. heavy-rain
  40. hexagons
  41. hideout
  42. houndstooth
  43. i-like-food
  44. intersecting-circles
  45. jigsaw
  46. jupiter
  47. kiwi
  48. leaf
  49. lines-in-motion
  50. lips
  51. lisbon
  52. melt
  53. moroccan
  54. morphing-diamonds
  55. overcast
  56. overlapping-circles
  57. overlapping-diamonds
  58. overlapping-hexagons
  59. parkay-floor
  60. piano-man
  61. pie-factory
  62. pixel-dots
  63. plus
  64. polka-dots
  65. rails
  66. rain
  67. random-shapes
  68. rounded-plus-connected
  69. signal
  70. skulls
  71. slanted-stars
  72. squares
  73. squares-in-squares
  74. stamp-collection
  75. steel-beams
  76. stripes
  77. temple
  78. texture
  79. tic-tac-toe
  80. tiny-checkers
  81. topography
  82. volcano-lamp
  83. wallpaper
  84. wiggle
  85. x-equals
  86. yyy
  87. zig-zag
Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.