bada55.io card

card.html

<article class="flip" itemscope="" itemtype="http://schema.org/Thing" data-bada55="{ color: '#bada55', name: 'badass', likeUrl: 'http://bada55.io/like/137' }">
    <div class="flip-card flipped">
        <header class="card-face face-front flip-trigger" style="background-color:#bada55">
            <div class="inner">
                <h1 class="card-title" itemprop="name">#bada55</h1>
                <h2 class="card-subtitle" itemprop="alternateName">badass</h2>
            </div>
        </header>
        <div class="card-face face-back" style="background-color:#bada55">
            
        </div>
    </div>
</article>

<script type="text/x-template" id="card-back-template">
<button class="btn-back flip-trigger" title="flip!">
                <svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
                </svg>
            </button>
            <div class="inner">

                                    <button class="btn-rate" title="rate that!" data-url="http://bada55.io/like/137">
                                    <svg class="rate-figure" x="0px" y="0px" width="54px" height="63px" viewBox="0 0 54 63" enable-background="new 0 0 54 63" xml:space="preserve">
                        <use xlink:href="" />
                    </svg>
                </button><br>
                <a class="color-link" href="/bada55" title="Color's page" itemprop="url">bada55.io/<b>bada55</b></a>
                <meta itemprop="image" content="http://bada55.io/color/bada55.png">
                <footer><!--
                    --><a href="https://twitter.com/intent/tweet?url=http://bada55.io/bada55&amp;text=The css color BADA55 alias BADASS on bada55.io is just awesome!&amp;hashtags=BADA55,BADA55,CSS" target="_blank" title="Share this color on Twitter">
                        <svg x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"></svg>
                    </a><!--
                    --><a href="https://www.facebook.com/sharer/sharer.php?u=http://bada55.io/bada55" target="_blank" title="Share this color on Facebook">
                        <svg x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"></svg>
                    </a><!--
                    --><a href="https://plus.google.com/share?url=http://bada55.io/bada55" target="_blank" title="Share this color on Google+">
                        <svg x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"></svg>
                    </a><!--
                --></footer>
            </div>
</script>

click.js

var cardBackTemplate = document.createElement('div');
cardBackTemplate.innerHTML = document.getElementById('card-back-template').innerHTML;

document.addEventListener('click', function(e){
  if (e.target.className.indexOf('flip') === -1) {
    return;
  }

  var card = e.target;
  var cardData = JSON.parse(card.getAttribute('data-bada55'));

  // modify cardBackTemplate

  // append
  card.appendChild(cardBackTemplate);
});

paths.svg