Show HN: Super Snowflake Maker
supersnowflakemaker.comHi all! Just released Super Snowflake Maker!
Draw on the pie with freeform or polygon tools, change the number of sections, click on the large snowflake to see fold, and.... download!
Enjoy + Happy Holidays!
(tech: threejs/r3f, react, ts, useSpring, tailwind, canvas, svg, offscreen canvas, paperjs) I just wanted to say how delighted I am with your web app! This is fantastic idea, and the execution is top-notch. It is incredibly user-friendly and intuitive. It has all the essential features needed to create beautiful and unique snowflakes. This really helps and makes the process of creating snowflakes easy and enjoyable. Your app is a wonderful way to lift spirits and get into the holiday mood! Thank you for creating such a delightful tool. Wishing you and everyone a festive season! So glad you enjoy it! And yes, I love web apps too! Happy holidays + New Year! The eight year old and I hanging out on this. She is a huge fan. The moment she saw it, she said “I want to use this.” And now we’re both making snowflakes on our devices. I can’t name many apps that provide equal entertainment to my kid and I. You’ve done very well. As a bonus, the eight year old seems particularly motivated to learn JavaScript and start working on this kind of stuff herself. Nice work and excellent share. Thanks so much for this! Aw! Fills my heart with joy that she's inspired to code and you both enjoy it! This is really well made - thanks for sharing (and Merry Christmas)! Small thing: I didn't understand the difference between the white and black options at first. For some reason white was pre-selected so I got confused when nothing was cutting out while drawing for the first time. Maybe a label on hover would fix this while still keeping the clean look? A label on hover would be nice — or even persistent labels to the right of the circles. I also wonder if instead of black, a dashed outline with a transparent center would make more sense, since you're cutting. Regardless: This is lovely. Thanks! Yes, great idea. Definitely will want to make that clearer! Very cool! It’s really easy to make something that looks like I knew what I was doing, when I don’t at all! :) One missed opportunity that I see with sites that allow HN people to play with things and be creative (e.g. I’ve seen a bunch of sound loop makers do this): add a quick “share” link for us to show some creations. Not that I really want to share anything I did, but would love to see what others have made! For my own projects I created a bespoke data system that exports its values as URL parameters so you can always just share the current browser location. Ex: a 3d box STL generator Love this idea --- and a share link is a great place to start for it. Thanks for the suggestion! A few years ago I saw a talk at a Math conference about some mathematical models for how the shapes of snowflakes come to be. I don't recall the details, but I believe one of them was even able to generate non-hexagonal snowflakes which happen under some circumstances. I've been hoping to create a website around one of these models for some time now. Cool, I didn't know that could happen! I started with 12 sections (or 6 lobes/mirrored sections) then wanted to play around with more section numbers without having to redraw. I think 12 is for a more advanced paper snowflake maker although I think 8 can look cool too. Wonder what number in-nature non-hexagonal number was.
If you come across it, would love to include it! If you create a snowflake site, I would love to try it! Really cool once I understood what was going on, it took me a real good while to figure out what to do. I guess "Draw on the pie" didn't mean anything to me. Maybe add a short playable gif explainer showing a snowflake being made quickly. It's a little counter-intuitive for me to see results on the left when editing on right. Took me a bit to figure that out. I would suggest you swap the left and right of the site. Did you see the information 'i' button on the top right? It has some basic info along with keyboard shortcuts. If not, they may have added it later after reading some comments. 100%! Some onboarding could definitely help! While I asked: Possible to add export as an SVG? noting: That would make it useful for using a design on a CNC or lasercutter. That feature, as noted below is present --- click on the [>] button to go to a second page where these features are present. You can download as SVG! There is a screenshot JPG, fold + cut template PDF, and simple shape SVG download on the site. My apologies, I missed that --- edited my post above to reflect your explanation. Thanks for the Christmas fun! Was not going to click as thought it was like an actual snowflake maker (like you know each one is unique generator), glad I did. Could actually make a real one if I was feeling like making a mess ;) Cute! A couple thoughts: - shouldn't use 100% of a core just sitting there, might want to check for busy looping and / or put in a sleep here and there - if I disconnect a bit of paper it should go, rather than just sit there disconnected Great work so far though! Thank you for the amusement :) Loved this project! Lots of festive fun in seeing what shapes can be made when unfolded. Just noticed that in mobile Firefox the dotted line previewing the cut seems to have a lower update rate than the actual path recorded, meaning the actual shape is much less jagged than the preview. FF Update:
Gecko based Firefox isn’t as performant as WebKit/Chromium on desktop/mobile devices when it comes to some canvas operations (even on offscreen!). I was able to greatly improve performance on desktop by limiting how much I drew and played with UV coords instead. That unfortunately wasn’t enough for FF on Android. Had to turn off “live” snowflake rendering for android. It does feel snappy on draw you just don’t get the “live” snowflake preview till you close a drawn shape. On FF Android the snappy draw is worth the trade off. Thanks @Liftyee! Yeah Firefox seems to lag behind on the site compared to WebKit or Chromium browsers. Hopefully I can optimize it more for Firefox. Update: Think I have found a way to speed it up for Firefox (and everyone else too!). On holiday with the fam so might take a couple days before I push a fix. I'm optimistic though! I spent way to long playing with this. Very simple and intuitive. Nice work! I wish there was a better user experience when downloading an image a user creates on a website like this on iPhone - it’s really weird that you can’t save it to your camera roll. It goes into downloads and confuses everyone. That was really neat. Thank you! Why is it restricted to Safari on iOS? I’m using Orion, which is Webkit-based too. Hi Diti, are you talking about the inapp link to Safari? If so - it's the only reliable escape link for ios. It should work on other WebKit browsers as well but no reliable inapp escape link is available for the default browser on ios anymore. There use to be another ios workaround but they closed it. Basically downloads don't work on inapp browsers and I need some way to get you out of them. I'll take a look. Perhaps my inapp detection is throwing false positives. I also detect for SFSafariViewController because of the bad UX downloading experience there. Maybe it is catching your browser as well. Oh wow both Orion + Arc on iOS have the same UA as Safari and are testing positive for SFSafariViewController (an experimental test). I'll look into other ways to not confuse SFSVC with these browsers. Interestingly - downloads on Arc work really well but they are poorly done in Orion (open in a new window without clear option to download). I use inappdebugger.com for testing exit links, UA, downloads etc. I am curious: what about SFSVC interferes with the functionality of the site? Downloads are really clunky in SFSVC. You can do them, but it takes like 3 actions compared to iOS Safari. I've gotten lots of complaints on another site I have that does on-the-fly blob (Object URL) downloads that users don't understand it. Here's a snapshot: https://bsky.app/profile/shalanah.bsky.social/post/3las76tpl... Thanks for the response! Same problem with brave on ios! Cool app though Thanks for the tip! Added it to an issue: https://github.com/shalanah/inapp-spy/issues/37 It complains in Arc on iOS, too. It‘s such a bad joke that browsers on iOS are still only a wrapper around WebKit… I'll take a look, thanks for the heads-up! Hm, cool idea but ran into a glitch. Cutting 3 elongated ovals, end to end and forming a triangle, didn't remove the center piece. Hugged to death. well made!! classic HN hug of death Hmmm odd. Works on my machine (of course!). It's a static site hosted on S3 - I'd be surprised if it is experiencing an overload issue. Will need to investigate what's happening for some visitors. seems to be up now! Whew! :)