Skip to content
don’t make it ugly
All resources

Asset libraryAssets

Hero Patterns

Repeatable SVG background patterns as a single line of CSS.

Open sourceFree
Visit website (opens in a new tab)
Preview of Hero Patterns

What it is

Hero Patterns by Steve Schoger offers dozens of subtle, repeatable SVG patterns (topography, circuit board, hexagons, diagonal lines) that you customise by colour and opacity and copy out as a CSS background-image. No files to host.

Why it’s here

Texture without a heavy image. At low opacity on a section background, these add depth that flat colour can't. High opacity looks like wallpaper.

Best for

  • section backgrounds
  • subtle texture
  • hero sections

Can my agent use this?

Agent good agent friendliness

Yes. Pick a pattern, set the colour and opacity, and paste the generated CSS to your agent.

Good: Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.

Access methods

  • Public website
  • Copy/paste

Related resources

  • Haikei
    Preview of Haikei

    Haikei

    Generate blobs, waves, gradients and patterns as SVG backgrounds.

    ToolFreelimited agent friendliness
  • Iconify
    Preview of Iconify

    Iconify

    One API and one component for two hundred thousand icons from every major set.

    Asset libraryFreeOpen sourceexcellent agent friendliness
  • Simple Icons
    Preview of Simple Icons

    Simple Icons

    SVG logos for thousands of brands, in one consistent style.

    Asset libraryFreeOpen sourceexcellent agent friendliness
  • SVGL
    Preview of SVGL

    SVGL

    A beautiful library of full-colour SVG logos with light and dark variants.

    Asset libraryFreeOpen sourceexcellent agent friendliness