

Show HN: Patternify, a CSS Pattern Generator - sgdesign
http://www.patternify.com/

======
vinhboy
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
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.

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

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

------
handsomeransoms
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!

------
alanfalcon
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...](http://www.colourlovers.com/patterns/most-loved/all-time/meta) )
- 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.

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

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

~~~
sgdesign
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.

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

~~~
sgdesign
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.

~~~
moeffju
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?

~~~
sgdesign
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.

~~~
moe
Make it so Shift + Click deletes. Problem solved.

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

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

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

------
mryall
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?

~~~
minikomi
Try this one <http://bit.ly/bIkGnu> enjoy!

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

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

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

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

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

