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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 1000 1000" version = "1.1">
    <defs>
        <path id="" class="rate-background" d="M53,32.3c0.6-1.4,1-2.6,1-3.6c0-1.5-0.6-2.9-1.7-4s-2.5-1.7-4-1.7H32.7c0-1.7,0.7-4.1,2.1-7.1c1.4-3,2.1-5.4,2.1-7.2c0-2.9-0.5-5.1-1.4-6.5C34.6,0.7,32.7,0,29.8,0c-0.8,0.8-1.3,2-1.7,3.8c-0.4,1.8-0.8,3.6-1.4,5.6c-0.5,2-1.4,3.6-2.6,4.9c-0.7,0.7-1.8,2-3.4,4.1c-0.1,0.1-0.5,0.6-1,1.3c-0.6,0.7-1,1.4-1.4,1.8c-0.4,0.5-0.9,1.1-1.5,1.9c-0.7,0.8-1.2,1.4-1.8,2c-0.5,0.5-1.1,1.1-1.7,1.6c-0.6,0.5-1.2,0.9-1.8,1.2c-0.6,0.3-1.1,0.4-1.6,0.4H8.5H0v28.5h8.5v0.1h1.4c0.4,0,0.9,0,1.4,0.1c0.5,0.1,1,0.2,1.5,0.3c0.4,0.1,1,0.3,1.7,0.5c0.7,0.2,1.2,0.4,1.6,0.5c0.3,0.1,0.9,0.3,1.6,0.6c0.7,0.3,1.1,0.4,1.3,0.5c6.2,2.2,11.3,3.3,15.2,3.3h5.4c5.7,0,8.5-2.5,8.5-7.5c0-0.8-0.1-1.6-0.2-2.5c0.9-0.5,1.6-1.3,2.1-2.3c0.5-1.1,0.8-2.2,0.8-3.3s-0.3-2.1-0.8-3.1c1.6-1.5,2.4-3.3,2.4-5.3c0-0.7-0.1-1.6-0.4-2.5c-0.3-0.9-0.7-1.6-1.1-2.1C51.6,34.3,52.4,33.6,53,32.3z"></path>
        <path class="rate-rated" d="M53,32.3c0.6-1.4,1-2.6,1-3.6c0-1.5-0.6-2.9-1.7-4s-2.5-1.7-4-1.7H32.7c0-1.7,0.7-4.1,2.1-7.1c1.4-3,2.1-5.4,2.1-7.2c0-2.9-0.5-5.1-1.4-6.5C34.6,0.7,32.7,0,29.8,0c-0.8,0.8-1.3,2-1.7,3.8c-0.4,1.8-0.8,3.6-1.4,5.6c-0.5,2-1.4,3.6-2.6,4.9c-0.7,0.7-1.8,2-3.4,4.1c-0.1,0.1-0.5,0.6-1,1.3c-0.6,0.7-1,1.4-1.4,1.8c-0.4,0.5-0.9,1.1-1.5,1.9c-0.7,0.8-1.2,1.4-1.8,2c-0.5,0.5-1.1,1.1-1.7,1.6c-0.6,0.5-1.2,0.9-1.8,1.2c-0.6,0.3-1.1,0.4-1.6,0.4H8.5H0v28.5h8.5v0.1h1.4c0.4,0,0.9,0,1.4,0.1c0.5,0.1,1,0.2,1.5,0.3c0.4,0.1,1,0.3,1.7,0.5c0.7,0.2,1.2,0.4,1.6,0.5c0.3,0.1,0.9,0.3,1.6,0.6c0.7,0.3,1.1,0.4,1.3,0.5c6.2,2.2,11.3,3.3,15.2,3.3h5.4c5.7,0,8.5-2.5,8.5-7.5c0-0.8-0.1-1.6-0.2-2.5c0.9-0.5,1.6-1.3,2.1-2.3c0.5-1.1,0.8-2.2,0.8-3.3s-0.3-2.1-0.8-3.1c1.6-1.5,2.4-3.3,2.4-5.3c0-0.7-0.1-1.6-0.4-2.5c-0.3-0.9-0.7-1.6-1.1-2.1C51.6,34.3,52.4,33.6,53,32.3z M41.8,37.8L29.1,50.1c-0.3,0.3-0.6,0.4-1,0.4c-0.4,0-0.7-0.1-1-0.4L19.7,43c-0.3-0.3-0.4-0.6-0.4-1s0.1-0.7,0.4-1l2-1.9c0.3-0.3,0.6-0.4,1-0.4s0.7,0.1,1,0.4l4.4,4.2l9.7-9.4c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4l2,1.9c0.3,0.3,0.4,0.6,0.4,1S42.1,37.5,41.8,37.8z"></path>
        <path class="rate-stroke" d="M48.3,22.9H32.7c0-1.7,0.7-4.1,2.1-7.1c1.4-3,2.1-5.4,2.1-7.2c0-2.9-0.5-5.1-1.4-6.5C34.6,0.7,32.7,0,29.8,0c-0.8,0.8-1.3,2-1.7,3.8c-0.4,1.8-0.8,3.6-1.4,5.6c-0.5,2-1.4,3.6-2.6,4.9c-0.7,0.7-1.8,2-3.4,4.1c-0.1,0.1-0.5,0.6-1,1.3c-0.6,0.7-1,1.4-1.4,1.8c-0.4,0.5-0.9,1.1-1.5,1.9c-0.7,0.8-1.2,1.4-1.8,2c-0.5,0.5-1.1,1.1-1.7,1.6c-0.6,0.5-1.2,0.9-1.8,1.2c-0.6,0.3-1.1,0.4-1.6,0.4H8.5H0v28.5h8.5v0.1h1.4c0.4,0,0.9,0,1.4,0.1c0.5,0.1,1,0.2,1.5,0.3c0.4,0.1,1,0.3,1.7,0.5c0.7,0.2,1.2,0.4,1.6,0.5c0.3,0.1,0.9,0.3,1.6,0.6c0.7,0.3,1.1,0.4,1.3,0.5c6.2,2.2,11.3,3.3,15.2,3.3h5.4c5.7,0,8.5-2.5,8.5-7.5c0-0.8-0.1-1.6-0.2-2.5c0.9-0.5,1.6-1.3,2.1-2.3c0.5-1.1,0.8-2.2,0.8-3.3s-0.3-2.1-0.8-3.1c1.6-1.5,2.4-3.3,2.4-5.3c0-0.7-0.1-1.6-0.4-2.5c-0.3-0.9-0.7-1.6-1.1-2.1c0.9,0,1.7-0.7,2.4-2.1c0.6-1.4,1-2.6,1-3.6c0-1.5-0.6-2.9-1.7-4S49.8,22.9,48.3,22.9z M51.2,31.4c-0.4,0.8-0.6,0.9-0.6,0.9l-2.1,2l0.7,1.3c0.2,0.2,0.5,0.6,0.7,1.4c0.2,0.7,0.3,1.3,0.3,1.9c0,1.5-0.6,2.8-1.7,3.9l-1.1,1.1l0.8,1.4c0.4,0.7,0.5,1.3,0.5,2.1c0,0.8-0.2,1.6-0.6,2.4c-0.3,0.7-0.7,1.2-1.3,1.4l-1.3,0.7l0.2,1.4c0.1,0.8,0.2,1.5,0.2,2.2c0,2.7-0.8,5.5-6.5,5.5h-5.4c-3.6,0-8.5-1.1-14.4-3.1c-0.2-0.1-0.6-0.2-1.4-0.5l-1.6-0.6c-0.4-0.1-0.9-0.3-1.6-0.5c-0.8-0.2-1.4-0.4-1.8-0.5c-0.5-0.1-1-0.2-1.6-0.3c-0.4-0.1-0.8-0.1-1.1-0.1v-0.1H2V30.6h7.9c0.8,0,1.6-0.2,2.4-0.6c0.8-0.3,1.5-0.9,2.3-1.5c0.6-0.6,1.2-1.1,1.8-1.7c0.6-0.6,1.2-1.3,1.9-2.1c0.7-0.8,1.2-1.5,1.6-1.9c0.4-0.5,0.8-1.1,1.4-1.9c0.5-0.7,0.9-1.2,1-1.3c1.6-2,2.7-3.3,3.3-3.9c1.4-1.5,2.5-3.4,3.1-5.7c0.6-2,1-4,1.4-5.8c0.2-1,0.5-1.7,0.7-2.2c1.2,0.1,2.5,0.4,3,1.2c0.5,0.7,1.1,2.3,1.1,5.4c0,1-0.3,2.9-1.9,6.3c-1.6,3.3-2.3,5.9-2.3,8v2h17.6c1,0,1.8,0.4,2.5,1.1c0.8,0.8,1.1,1.6,1.1,2.6C52,29.4,51.7,30.3,51.2,31.4z"></path>
        <circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
    </defs>
</svg>