Show HN: Patternify, a CSS Pattern Generator

http://www.patternify.com/

by sgdesign • 15 years ago

74 24 15 years ago

sgdesign6• 15 years ago

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!

sunetos• 15 years ago

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.

sgdesign6• 15 years ago

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.

vinhboy• 15 years ago

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

moggie• 15 years ago

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.

Tyrant505• 15 years ago

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

melissamiranda• 15 years ago

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.

sgdesign6• 15 years ago

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

ams6110• 15 years ago

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.

handsomeransoms• 15 years ago

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!

moeffju2• 15 years ago

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.

sgdesign6• 15 years ago

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.

moeffju2• 15 years ago

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?

alanfalcon• 15 years ago

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.

sgdesign6• 15 years ago

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

mrtron• 15 years ago

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).

dustingetz• 15 years ago

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

drivebyacct2• 15 years ago

'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?)

mryall• 15 years ago

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?

minikomi2• 15 years ago

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

minikomi2• 15 years ago

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

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

pbhjpbhj• 15 years ago

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

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

Show HN: Patternify, a CSS Pattern Generator

Related Stories