8 ms·

Show HN: qrframe – generate beautiful qr codes with javascript code

401 points by zhengkyl 2y ago

I originally built a QR code generator as a resume project using Rust and I realized a web interface would make customization way easier. This still generates the "data" using that rust library via wasm, but the rendering is all editable javascript to make an SVG or paint on an HTML canvas. I was especially inspired by https://qrbtf.com https://qrbtf.com which had some unique style options I had never seen before, which I ended up copying, and then I made some more.

zhengkyl 2y ago
Did anyone else just watch the Veritasium video
- andrei-akopian 2y ago
  I always notice these patterns on HN. Always gives me dejavu and that feeling you get when you suddenly start encountering some new topic or word in suspiciously large amounts. Some big sciency/techy outlet puts something interesting out, and suddenly related topics start popping up everywhere else. I am guilty of a few of these myself.
  - ryankrage77 2y ago
    https://en.wikipedia.org/wiki/Frequency_illusion https://en.wikipedia.org/wiki/Frequency_illusion
    - aembleton 2y ago
      It might also be that more QR code stuff gets upvoted as people have it in their minds after watching the video.
- throw0101b 2y ago
  > the Veritasium video https://www.youtube.com/watch?v=w5ebcowAJD8 https://www.youtube.com/watch?v=w5ebcowAJD8
- jillesvangurp 2y ago
  I did not. But now I have. And thank you for that. Also, this library is amazing. I might use it.
- leptons 2y ago
  I won't. "Veritasium" lost me with his long-wire video.
leesalminen 2y ago
Wow, super cool! I love the unique styling. Haven’t seen that before. I (well, GPT-4) built freeqrgenerator.app specifically for my wife because she kept using the malicious sites that inject a redirect that inevitably die and stop working. Thinking I can retire mine and use yours instead on the domain.
- zhengkyl 2y ago
  Yeah, there are a lot of annoying sites like that. Your site is cool, it's streamlined and has a easy to remember name and you made it (with a little help) which is great. It's hard to find, but here are two other generator sites that are free and nice to use. https://qr.grid.ws/ https://qr.grid.ws/ only has a text box and a download button https://qrcode.antfu.me/ https://qrcode.antfu.me/ has a lot of options
  - bobtheborg 2y ago
    If you google "github qr code generator", the top result has a live demo that I've used quite a bit: https://www.nayuki.io/page/qr-code-generator-library#live-demo-javascript https://www.nayuki.io/page/qr-code-generator-library#live-de...
dylan604 2y ago
These are probably some of the more interesting looks I've seen. My poor phone looked like it was having a conniption fit trying to lock onto just one.
kristopolous 2y ago
I should look more into the half-tone. I'm assuming it works off of the error tolerance margins but I actually have no idea.
- gus_massa 2y ago
  That's the cat! The other examples are nice, but the cat is amazing!
suriya-ganesh 2y ago
The author also has a rust based qr library that looks equally awesome https://github.com/zhengkyl/fuqr https://github.com/zhengkyl/fuqr
spankalee 2y ago
I tried to use the qrframe package, but it doesn't seem to be published to npm https://www.npmjs.com/package/qrframe https://www.npmjs.com/package/qrframe
bscphil 2y ago
This looks super cool but I could only get 10/21 to scan with the classic zxing scanner (>100M downloads), and 3 of those took a bunch of playing with camera angles and distance, so I'd recommend against using anything too fancy for real world barcodes.
- keepamovin 2y ago
  [flagged]
  - notpushkin 2y ago
    Ah, yes. The classic “works on my device” argument. Edit: from testing with zbarimg on my laptop: Basic, Camo, Neon (inverted), Glass, Blocks, Alien all seem to work reliably. Not sure what the problem is with some others, but maybe they’ll also work with some tweaking (Mondrian seems simple enough! maybe contrast issues?) wl-paste -t image/png | zbarimg - # macOS: pngpaste | zbarimg - Edit 2: for codes that will definitely be scanned using a camera [1], some styles can work because phone camera isn’t perfect. E.g. if you slightly blur Dots, it works with zbarimg, which also means it would work if you slightly move around your phone. [1]: Screenshots are used sometimes! E.g. for importing TOTP codes into a password manager, etc.
    - keepamovin 2y ago
      Precisely the OP. More importantly it's sad and bad when a obvious negative comment is at the top of a front-page Show HN, that misrepresents and then deigns to provide recommendations against this nascent beautiful project that needs our support. Effectively shutting down the experience and enjoyment for incoming audience, and for the creator. That is a very bad thing and should not be tolerated. Speak up against it.
      - notpushkin 2y ago
        OP is being respectful and merely points out an issue: the codes generated don’t work with some devices. If you want a code that works with everything, you can’t do too much customization. It’s a very okay thing to point out and there isn’t much negativity in it. I agree that we should support projects like this, but being dismissive of real issues is not the way.
cipherzero 2y ago
This is awesome. Does anyone know if there is a library for the amazing optical codes that apple uses in its device transfer? I know they have a custom patent for it so I don't know if its something anyone has tried to recreated...
- ustad 2y ago
  Do you have link for more info on optical codes?
OhMeadhbh 2y ago
hmm. i can't scan most of these QR codes (i got about 2 of them to scan.) so while i applaud the creative impulse (some of them look REALLY cool), i recommend people use QR codes that are easily scanned.
kdjdjdndnd 2y ago
While those look cool, most do not work at all on my phone
- keepamovin 2y ago
  Provide more details (OS, camera/app, distance, surface type), please! :)
vishnugupta 2y ago
The designs are cool enough that they could be printed on physical wall tiles, maybe as easter eggs or otherwise.
- keepamovin 2y ago
  They should be! These would go well in all kinds of interior places, and would not be out of place on expensive high-end art / photography books and periodicals.
thih9 2y ago
Looks great, very inspiring. Some of these, like examples/blocks.svg[1], are not immediately recognized as qr codes by humans. This could lead to interesting possibilities; e.g. art with qr code/codes seamlessly integrated into it - and perhaps noticed only after someone tries to take a picture. [1]: https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8f6115a82866018b763878/examples/blocks.svg https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8...
- sva_ 2y ago
  My phone's camera app is not able to recognize the alien[0] one either. Looks cool though. 0. https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8f6115a82866018b763878/examples/alien.svg https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8...
kypro 2y ago
I didn't expect these to look so awesome. Great work on the designs.
KolmogorovComp 2y ago
Neat! In my opinion those generated by generative AI with controlnet are even more impressive [0], albeit also reducing their likelihood of being correctly read by all. [0] https://stable-diffusion-art.com/qr-code/ https://stable-diffusion-art.com/qr-code/
- Jleagle 2y ago
  While I do agree, one can be done almost instantly in your browser, one takes hours of rendering.
  - Miraste 2y ago
    Even on a slower machine, it'll be minutes, not hours. A fast one with an optimized process can be seconds.
  - Uehreka 2y ago
    Libs like qrframe are great for automating QR code creation in a web app, the ControlNet stuff is great for if you just need to make one QR code for an event or want an animated QR code (stuff like this is usually several frames per minute if you’ve got a good GPU).
- mock-possum 2y ago
  Wow somebody likes anime girls
- hipjiveguy 2y ago
  People have to be able to recognize that it is a QR code visually - these are too graphical to realize their true purpose, imho
sirolimus 2y ago
This is cool
chfritz 2y ago
> These QR codes are not reliably scannable! Isn't the whole point of QR codes to reliably transfer information from the physical world into the digital one without specialized equipment or software? They look pretty, sure, but so did DataGlyphs (https://www.microglyphs.com/english/html/dataglyphs.shtml https://www.microglyphs.com/english/html/dataglyphs.shtml) and those could be scanned reliably, just not by your average phone.
fitsumbelay 2y ago
thanks for this. awesome post

401 points by zhengkyl 2y ago

zhengkyl 2y ago

Did anyone else just watch the Veritasium video

andrei-akopian 2y ago
I always notice these patterns on HN. Always gives me dejavu and that feeling you get when you suddenly start encountering some new topic or word in suspiciously large amounts. Some big sciency/techy outlet puts something interesting out, and suddenly related topics start popping up everywhere else. I am guilty of a few of these myself.
- ryankrage77 2y ago
  https://en.wikipedia.org/wiki/Frequency_illusion https://en.wikipedia.org/wiki/Frequency_illusion
  - aembleton 2y ago
    It might also be that more QR code stuff gets upvoted as people have it in their minds after watching the video.
throw0101b 2y ago
> the Veritasium video https://www.youtube.com/watch?v=w5ebcowAJD8 https://www.youtube.com/watch?v=w5ebcowAJD8
jillesvangurp 2y ago
I did not. But now I have. And thank you for that. Also, this library is amazing. I might use it.
leptons 2y ago
I won't. "Veritasium" lost me with his long-wire video.

leesalminen 2y ago

Wow, super cool! I love the unique styling. Haven’t seen that before. I (well, GPT-4) built freeqrgenerator.app specifically for my wife because she kept using the malicious sites that inject a redirect that inevitably die and stop working. Thinking I can retire mine and use yours instead on the domain.

zhengkyl 2y ago
Yeah, there are a lot of annoying sites like that. Your site is cool, it's streamlined and has a easy to remember name and you made it (with a little help) which is great. It's hard to find, but here are two other generator sites that are free and nice to use. https://qr.grid.ws/ https://qr.grid.ws/ only has a text box and a download button https://qrcode.antfu.me/ https://qrcode.antfu.me/ has a lot of options
- bobtheborg 2y ago
  If you google "github qr code generator", the top result has a live demo that I've used quite a bit: https://www.nayuki.io/page/qr-code-generator-library#live-demo-javascript https://www.nayuki.io/page/qr-code-generator-library#live-de...

dylan604 2y ago

These are probably some of the more interesting looks I've seen. My poor phone looked like it was having a conniption fit trying to lock onto just one.

kristopolous 2y ago

I should look more into the half-tone. I'm assuming it works off of the error tolerance margins but I actually have no idea.

gus_massa 2y ago
That's the cat! The other examples are nice, but the cat is amazing!

suriya-ganesh 2y ago

The author also has a rust based qr library that looks equally awesome https://github.com/zhengkyl/fuqr https://github.com/zhengkyl/fuqr

spankalee 2y ago

I tried to use the qrframe package, but it doesn't seem to be published to npm https://www.npmjs.com/package/qrframe https://www.npmjs.com/package/qrframe

bscphil 2y ago

This looks super cool but I could only get 10/21 to scan with the classic zxing scanner (>100M downloads), and 3 of those took a bunch of playing with camera angles and distance, so I'd recommend against using anything too fancy for real world barcodes.

keepamovin 2y ago
[flagged]
- notpushkin 2y ago
  Ah, yes. The classic “works on my device” argument. Edit: from testing with zbarimg on my laptop: Basic, Camo, Neon (inverted), Glass, Blocks, Alien all seem to work reliably. Not sure what the problem is with some others, but maybe they’ll also work with some tweaking (Mondrian seems simple enough! maybe contrast issues?) wl-paste -t image/png | zbarimg - # macOS: pngpaste | zbarimg - Edit 2: for codes that will definitely be scanned using a camera [1], some styles can work because phone camera isn’t perfect. E.g. if you slightly blur Dots, it works with zbarimg, which also means it would work if you slightly move around your phone. [1]: Screenshots are used sometimes! E.g. for importing TOTP codes into a password manager, etc.
  - keepamovin 2y ago
    Precisely the OP. More importantly it's sad and bad when a obvious negative comment is at the top of a front-page Show HN, that misrepresents and then deigns to provide recommendations against this nascent beautiful project that needs our support. Effectively shutting down the experience and enjoyment for incoming audience, and for the creator. That is a very bad thing and should not be tolerated. Speak up against it.
    - notpushkin 2y ago
      OP is being respectful and merely points out an issue: the codes generated don’t work with some devices. If you want a code that works with everything, you can’t do too much customization. It’s a very okay thing to point out and there isn’t much negativity in it. I agree that we should support projects like this, but being dismissive of real issues is not the way.

cipherzero 2y ago

This is awesome. Does anyone know if there is a library for the amazing optical codes that apple uses in its device transfer? I know they have a custom patent for it so I don't know if its something anyone has tried to recreated...

ustad 2y ago
Do you have link for more info on optical codes?

OhMeadhbh 2y ago

hmm. i can't scan most of these QR codes (i got about 2 of them to scan.) so while i applaud the creative impulse (some of them look REALLY cool), i recommend people use QR codes that are easily scanned.

kdjdjdndnd 2y ago

While those look cool, most do not work at all on my phone

keepamovin 2y ago
Provide more details (OS, camera/app, distance, surface type), please! :)

vishnugupta 2y ago

The designs are cool enough that they could be printed on physical wall tiles, maybe as easter eggs or otherwise.

keepamovin 2y ago
They should be! These would go well in all kinds of interior places, and would not be out of place on expensive high-end art / photography books and periodicals.

thih9 2y ago

Looks great, very inspiring. Some of these, like examples/blocks.svg[1], are not immediately recognized as qr codes by humans. This could lead to interesting possibilities; e.g. art with qr code/codes seamlessly integrated into it - and perhaps noticed only after someone tries to take a picture. [1]: https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8f6115a82866018b763878/examples/blocks.svg https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8...

sva_ 2y ago
My phone's camera app is not able to recognize the alien[0] one either. Looks cool though. 0. https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8f6115a82866018b763878/examples/alien.svg https://github.com/zhengkyl/qrframe/blob/b7705844b71764bcea8...

kypro 2y ago

I didn't expect these to look so awesome. Great work on the designs.

KolmogorovComp 2y ago

Neat! In my opinion those generated by generative AI with controlnet are even more impressive [0], albeit also reducing their likelihood of being correctly read by all. [0] https://stable-diffusion-art.com/qr-code/ https://stable-diffusion-art.com/qr-code/

Jleagle 2y ago
While I do agree, one can be done almost instantly in your browser, one takes hours of rendering.
- Miraste 2y ago
  Even on a slower machine, it'll be minutes, not hours. A fast one with an optimized process can be seconds.
- Uehreka 2y ago
  Libs like qrframe are great for automating QR code creation in a web app, the ControlNet stuff is great for if you just need to make one QR code for an event or want an animated QR code (stuff like this is usually several frames per minute if you’ve got a good GPU).
mock-possum 2y ago
Wow somebody likes anime girls
hipjiveguy 2y ago
People have to be able to recognize that it is a QR code visually - these are too graphical to realize their true purpose, imho

sirolimus 2y ago

This is cool

chfritz 2y ago

> These QR codes are not reliably scannable! Isn't the whole point of QR codes to reliably transfer information from the physical world into the digital one without specialized equipment or software? They look pretty, sure, but so did DataGlyphs (https://www.microglyphs.com/english/html/dataglyphs.shtml https://www.microglyphs.com/english/html/dataglyphs.shtml) and those could be scanned reliably, just not by your average phone.

fitsumbelay 2y ago

thanks for this. awesome post