Hero Patterns

A collection of repeatable SVG background patterns

34 followers

A collection of repeatable SVG background patterns

34 followers

Visit website

Design inspiration websites

•

Design resources

Launch tags:Web App•Design Tools•Developer Tools

Launch Team

ArticosTest your messaging on your audience, right inside Claude or ChatGPT

Promoted

Tailwind CSS

Maker

Hello everyone, I am happy to introduce to you, Hero Patterns: A collection of repeatable SVG background patterns for you to use on your digital projects. With SVG quickly growing as the preferred method for using graphics on the web, there are still few resources available in this format. I created Hero Patterns so that you can easily incorporate high quality backgrounds in to your digital products. This is just the initial release. I plan to update it (hopefully) bi-weekly with new patterns. Eventually I would like to incorporate a way for other designers to contribute to it. I am happy to answer any questions you may have about Hero Patterns. Follow me on Twitter @steveschoger for updates. Special thanks to @adamwathan for helping me with all of the Javascript on the website.

Report

10yr ago

@steveschoger This can be very useful for web developers (those who are not professional designers). I counted 40 patters. Will you be releasing more in the near future?

Report

10yr ago

Tailwind CSS

Maker

@johnpagley I hope to do a bi-weekly release with 20 new patterns each time (no promises). Eventually I would like to invite contributors but in the meantime its a one man show. Follow me on Twitter for updates. Also, check out www.zondicons.com - another free resource that I am working on and constantly updating.

Report

10yr ago

@steveschoger Free patterns and icons...thanks! I'll be adding this to my web design resource collection.

Report

10yr ago

@steveschoger This looks great, but changing the colors doesn't seem to do anything for me. Also when I try to use the pattern, I can't enter the hex codes that I want to use.

Report

10yr ago

Tailwind CSS

Maker

@_dev_noise Thanks for your comment, Michael. What browser are you on. I will have a look at the issue. In the meantime, you can simply change the color in the CSS code that you get for each pattern.

Report

10yr ago

@steveschoger I'm using Firefox on OS X.

Report

10yr ago

@steveschoger @_dev_noise I get this issue on Chrome on OSX too (typing/pasting hex doesn't apply change to patterns), but other than that really nice tool :)

Report

10yr ago

Reminds me of Subtle Patterns – in a good way. Right away used a pattern for my current project. Smart with the Base64 encoding 👍 http://subtlepatterns.com/

Report

10yr ago