<html>

<head>

<meta name="viewport" content="width=device-width" />

<meta charset="utf-8" />

<title>&lt;qr-code&gt; Web Component</title>

<meta

name="description"

content="The @bitjson/qr-code web component is a no-framework, no-dependencies, customizable, animate-able, SVG-based &lt;qr-code&gt; HTML element."

/>

<meta property="og:title" content="@bitjson/qr-code Web Component" />

<meta

property="og:description"

content="The @bitjson/qr-code web component is a no-framework, no-dependencies, customizable, animate-able, SVG-based &lt;qr-code&gt; HTML element."

/>

<meta

property="og:image"

content="https://qr.bitjson.com/.github/social.png"

/>

<meta property="og:url" content="https://qr.bitjson.com/" />

<meta name="twitter:card" content="summary" />

<meta name="twitter:site" content="@bitjson" />

<meta name="twitter:title" content="@bitjson/qr-code Web Component" />

<meta

name="twitter:description"

content="The @bitjson/qr-code web component is a no-framework, no-dependencies, customizable, animate-able, SVG-based &lt;qr-code&gt; HTML element."

/>

<meta

name="twitter:image"

content="https://qr.bitjson.com/.github/social.png"

/>

<link rel="icon" href="favicon.ico" />

<!-- The latest @bitjson/qr-code release: -->

<script src="https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js"></script>

<!-- Just used for styling the code-blocks below: -->

<link

rel="stylesheet"

href="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/github-dark.min.css"

/>

<script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>

</head>

<body

style="

text-align: center;

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

line-height: 1.5;

"

>

<h1 style="margin-top: 2em">@bitjson/qr-code</h1>

<p>

A no-framework, no-dependencies, customizable, animate-able, SVG-based

&lt;qr-code&gt; HTML element.

<a href="https://github.com/bitjson/qr-code">Open source &rarr;</a>

</p>

<div style="min-height: 200px; margin: 2em">

<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-left: auto;

margin-right: 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>

</div>

<p>

<button onclick="fadeIn()">Custom Fade In</button>

<button

onclick="document.getElementById('qr1').animateQRCode('RadialRipple');"

>

Ripple

</button>

<button onclick="fadeOut()">Custom Fade Out</button>

</p>

<script>

function fadeIn() {

document

.getElementById('qr1')

.animateQRCode((targets, _x, _y, _count, entity) => ({

targets,

from: entity === 'module' ? Math.random() * 200 : 200,

duration: 500,

easing: 'cubic-bezier(1,1,0,.5)',

web: {

opacity: [0, 1],

scale: [0.3, 1.13, 0.93, 1],

},

}));

}

function fadeOut() {

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],

},

}));

}

</script>

<p>Other presets: (pull requests welcome!)</p>

<p>

<button

onclick="document.getElementById('qr1').animateQRCode('RadialRippleIn');"

>

RadialRippleIn

</button>

<button

onclick="document.getElementById('qr1').animateQRCode('RadialRipple');"

>

RadialRipple

</button>

<button

onclick="document.getElementById('qr1').animateQRCode('MaterializeIn');"

>

MaterializeIn

</button>

<button

onclick="document.getElementById('qr1').animateQRCode('FadeInTopDown');"

>

FadeInTopDown

</button>

<button

onclick="document.getElementById('qr1').animateQRCode('FadeInCenterOut');"

>

FadeInCenterOut

</button>

</p>

<p style="max-width: 500px; margin-left: auto; margin-right: auto">

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

</p>

<pre

style="

text-align: left;

padding: 0 2em;

color: #c9d1d9;

background: #0d1117;

"

><code class="language-html">

&lt;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;

"

&gt;

&lt;img src="src/assets/bch.svg" slot="icon" /&gt;

&lt;/qr-code&gt;

&lt;script&gt;

document.getElementById('qr1').addEventListener('codeRendered', () => {

document.getElementById('qr1').animateQRCode('MaterializeIn');

});

&lt;/script&gt;

</code></pre>

<p style="max-width: 500px; margin-left: auto; margin-right: auto">

Design your own custom animations! Just pass a function to the

<code>qr-code</code>'s <code>animateQRCode</code> method.

</p>

<p style="max-width: 500px; margin-left: auto; margin-right: auto">

Animate in, animate on user interactions &mdash;

<strong>like a URL hit or a detected payment</strong>, and animate out

when the QR interaction is complete. For example, here's the entire

definition for the <code>Custom Fade Out</code> used above:

</p>

<pre

style="

text-align: left;

padding: 0 2em;

color: #c9d1d9;

background: #0d1117;

"

><code class="language-js">

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] }

}));

</code></pre>

<footer style="margin-bottom: 6em">

<p>Made by <a href="https://twitter.com/bitjson">@bitjson</a></p>

<small>

<p><a href="https://bitjson.com">bitjson.com</a></p>

</small>

</footer>

<script>

hljs.highlightAll();

</script>

</body>

</html>