5 ms·

Show HN: Patternify, a CSS Pattern Generator

74 points by sgdesign 16y ago

sgdesign 16y 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 16y 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.
- sgdesign 16y 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 16y 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 16y 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 16y ago
  I like the UI you suggest as an option. Good stuff. edit:option toggle.
melissamiranda 16y 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.
- sgdesign 16y ago
  Yes, that's a great idea. I'll definitely add a couple sample patterns to it soon.
ams6110 16y 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 16y 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!
moeffju 16y 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.
- sgdesign 16y 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.
  - moeffju 16y 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?
    - sgdesign 16y ago
      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 16y ago
        Make it so Shift + Click deletes. Problem solved.
alanfalcon 16y 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/meta 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.
- sgdesign 16y ago
  I used to love all the little patterns that came on old Macs! I should try to recreate them with Patternify actually…
mrtron 16y 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 16y ago
i almost missed the link to existing patterns: https://convore.com/patternify/share-your-patterns/ https://convore.com/patternify/share-your-patterns/
drivebyacct2 16y 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?)
- deleted 16y ago
  [deleted]
mryall 16y 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?
- minikomi 16y ago
  Try this one http://bit.ly/bIkGnu http://bit.ly/bIkGnu enjoy!
minikomi 16y ago
Had a similar idea for iPhone/iPad pixel sketching... http://souseiji.net/pixelfinger http://souseiji.net/pixelfinger You can share them too: http://bit.ly/bIkGnu http://bit.ly/bIkGnu
pbhjpbhj 16y ago
Could this be combined with the "ciccada" CSS background post idea? http://news.ycombinator.com/item?id=2419347 http://news.ycombinator.com/item?id=2419347

74 points by sgdesign 16y 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 16y 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.

sgdesign 16y 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 16y 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 16y 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 16y ago
I like the UI you suggest as an option. Good stuff. edit:option toggle.

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

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

ams6110 16y 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 16y 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!

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

sgdesign 16y 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.
- moeffju 16y 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?
  - sgdesign 16y ago
    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 16y ago
      Make it so Shift + Click deletes. Problem solved.

alanfalcon 16y 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/meta 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.

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

mrtron 16y 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 16y ago

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

drivebyacct2 16y 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?)

deleted 16y ago
[deleted]

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

minikomi 16y ago
Try this one http://bit.ly/bIkGnu http://bit.ly/bIkGnu enjoy!

minikomi 16y ago

Had a similar idea for iPhone/iPad pixel sketching... http://souseiji.net/pixelfinger http://souseiji.net/pixelfinger You can share them too: http://bit.ly/bIkGnu http://bit.ly/bIkGnu

pbhjpbhj 16y ago

Could this be combined with the "ciccada" CSS background post idea? http://news.ycombinator.com/item?id=2419347 http://news.ycombinator.com/item?id=2419347