Show HN: Patternify, a CSS Pattern Generator | Hacker News Reader

Show HN: Patternify, a CSS Pattern Generator

patternify.com

74 pointssgdesign24 comments

Instead of doing it in the little box, you should make it change the entire background (instead of the orange). More visual that way.

I think having a checkbox that toggles between your suggestion and how it currently is would be optimal, but that's just because I prefer to focus on the smaller box.

I like the UI you suggest as an option. Good stuff. edit:option toggle.

Would be amazing to have a few sample patterns as a way to show how it works (what to paint). Would help newer designers figure out how to make good-looking patterns and provide a shortcut where others could just change the colors. It's often easier if you avoid beginning with a blank page.

Thanks for making it! I'm generating a pattern for my startup right now.

Yes, that's a great idea. I'll definitely add a couple sample patterns to it soon.

This is great! Had fun playing with it for 10 minutes. A UI note: a common behavior in pixel-based editors like this one is:

When you click on a blank pixel, fill it with color. As long as the mouse is held down, you're "drawing" and moving it to other blank pixels should color them as well.

Likewise, when you click on a colored pixel, erase it and stay in "erase" mode as long as the mouse button is held down.

Saves a lot of clicking, I think!

This reminds me of the old days of creating desktop "wallpapers" on my Mac 512K. Except this allows color!

I've found one fun way to generate patterns (for websites, for example)is to use Colourlovers ( http://www.colourlovers.com/patterns/most-loved/all-time/met... ) - you get access to both great colo(u)r palettes and also some nice patterns. There are also awful patterns, but I just ignore those. Finally, there's a great pattern editor, but it takes a bit of work to start creating good patterns with it.

I used to love all the little patterns that came on old Macs! I should try to recreate them with Patternify actually…

A small app I've been working on these last few days. It's a simple pattern generator, and you can export your pattern as a PNG, or as base64 code.

If you export it as code, you can paste it in your CSS straight away. You don't even need an image file anymore!

It's useful (especially the base64 part), but I didn't see any way to actually "generate" a pattern. Maybe call it a CSS Pattern Editor?

Also, it would be easier to use if painting didn't use mouseup. Using mouseover+mousedown would be nice for dragging the mouse to paint.

I get your point, but I think "generator" sounds cooler than "editor"… plus it's still a "generator" in the sense that you "generate" patterns yourself by clicking with your mouse :)

Great feedback about the mousedown though, I'll have to add that to my list.

Minor nitpick: When I click a pixel of a different color than my current color, I would expect to paint over the pixel, not clear it first. That would also make it much easier to play with different colors and "paint over" old pixels - half the clicks, twice the fun. Also, click & hold would be nicer than constantly clicking.

Yeah, I realized this too while using it. But then how would you delete a pixel? I would need to add an eraser tool, which means I need to rethink some of the UI, etc. So I decided to keep things simple for the MVP.

Clicking a pixel again (same color) would delete it, in lieu of an eraser tool. That would shift the burden of clicking twice to get your desired result to when you were deleting a pixel of different color.

OTOH – an eraser tool is really just a toggle button, isn't it?

But since there's no color palette or eyedropper, finding the same exact color is virtually impossible… so right now the way that you describe wouldn't really work.

And the eraser tool would be easy to implement technically, but I'm just not sure yet it's the best solution, or where to put it.

I'll probably end up doing something like holding shift while clicking will erase the pixel.

Make it so Shift + Click deletes. Problem solved.

Nice! I would have it default to a nice looking pattern first to show it in use. Then a clear button would be useful. And finally I agree the drawing is annoying - just have them draw over things with white that they don't want! (have that as a clickable color beside the color selection, maybe with a few others too).

Had a similar idea for iPhone/iPad pixel sketching... http://souseiji.net/pixelfinger

You can share them too: http://bit.ly/bIkGnu

Almost all the controls at the bottom worked on the iPad but clicks in the drawing area didn't. I found it impossible to draw any pixels on. Perhaps I misunderstood how it is supposed to work, or does you JS specifically require mouse events?

Try this one http://bit.ly/bIkGnu enjoy!

Could this be combined with the "ciccada" CSS background post idea?

http://news.ycombinator.com/item?id=2419347

Pretty cool, believe it or not I did something very similar as a kid back in 1983 or so, to build sprite patterns on my TI99/4A.

i almost missed the link to existing patterns: https://convore.com/patternify/share-your-patterns/

'Don't forget to add the .png extension to the file'

... what? Why is this not automatic?

(Oh, this is being generated client side maybe? thus it's a browser/html5 limitation I'm guessing?)

Reply on news.ycombinator.com