@bitjson/qr-code

A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element. Open source →

Custom Fade In Ripple Custom Fade Out

Other presets: (pull requests welcome!)

RadialRippleIn RadialRipple MaterializeIn FadeInTopDown FadeInCenterOut

The QR code above is rendered by the following pure HTML:

<qr-code
  id="qr1"
  contents="https://blog.bitjson.com/cashtokens-v2/"
  module-color="#1c7d43"
  position-ring-color="#13532d"
  position-center-color="#70c559"
  style="
    width: 200px;
    height: 200px;
    margin: 2em auto;
    background-color: #fff;
  "
>
  <img src="src/assets/bch.svg" slot="icon" />
</qr-code>

<script>
  document.getElementById('qr1').addEventListener('codeRendered', () => {
    document.getElementById('qr1').animateQRCode('MaterializeIn');
  });
</script>
    

Design your own custom animations! Just pass a function to the qr-code's animateQRCode method.

Animate in, animate on user interactions — like a URL hit or a detected payment, and animate out when the QR interaction is complete. For example, here's the entire definition for the Custom Fade Out used above:

document.getElementById('qr1').animateQRCode((targets, _x, _y, _count, entity) => ({
  targets,
  from: entity === 'module' ? Math.random() * 200 : 200,
  duration: 500,
  easing: 'cubic-bezier(.5,0,1,1)',
  web: { opacity: [1, 0], scale: [1, 1.1, 0.5] }
}));