SVG Badge Generator

index.html

<svg width="167" height="177" viewBox="0 0 167 177" xmlns="http://www.w3.org/2000/svg" id="shield">
  
  <path id="border" d="M83.2.9L.6 30l13 108.3 69.7 38.3 70.1-38.8 13.1-108.3L83.2.9z" fill="url(#pattern0)" />
  <path id="right" d="M158.2 35.7L83.1 10.1v157.4l62.9-34.9 12.2-96.9z" fill="url(#pattern3)" />
  <path id="left" d="M9.8 36.2L21 133.1l62 34.4V10.1L9.8 36.2z" fill="url(#pattern1)" />
  
  <text id="firstLetter" fill="url(#pattern2)" transform="rotate(-15.009 53.647 79.167)">
    <tspan x="30.144" y="105.167">J</tspan>
  </text>
  <text id="lastLetter" fill="url(#pattern4)" transform="rotate(8.681 121.284 79.735)">
    <tspan x="97.773" y="105.735">P</tspan>
  </text>
  
  <defs>
    <pattern id="pattern0" x="0" y="0" width="50%" height="50%">
    </pattern>
    <pattern id="pattern1" x="0" y="0" width="50%" height="50%">
    </pattern>
    <pattern id="pattern2" x="0" y="0" width="50%" height="50%">
    </pattern>
    <pattern id="pattern3" x="0" y="0" width="50%" height="50%">
    </pattern>
    <pattern id="pattern4" x="0" y="0" width="50%" height="50%">
    </pattern>
  </defs>
</svg>

script.js

/** Ready, Set, Go! **/
WebFont.load({
  google: {
    families: ['Droid Sans', 'Droid Serif']
  }
});

(function($) {
  
  $(function() {
    recolor();
    
    svg.click( function() { 
      recolor(); 
      window.clearInterval(interval); 
    });


    var interval = window.setInterval(function(){ recolor(); }, 2500);
  });
  
  
})(jQuery);

let palette;
let palettes = [];
const svg = Snap('#shield');
const paths = Snap.selectAll('path, text');

const recolor = function () {
   $.getJSON('https://www.colourlovers.com/api/palettes/random?jsonCallback=?', function(result) {
      palette = result[0];
      palettes.push(palette);
     
    //  $('body').css('background-image', 'url(' + palette.imageUrl + ')');
      var boxShadow = '';
      var alternate = !$('body').hasClass('alternate') ? true : false;
      $('body').toggleClass('alternate');
     
      palette.colors.forEach(function(color, i) {
        var last = palette.colors.length;
        
        if(alternate) {
          var px = (i * 100/last) + (100/last) + 'px';
          if(last == i + 1) {
              boxShadow += 'inset ' + px +' -' + px + ' 0 ' + px + ' #' + color;
            $('body').css('background','#' + color);
          } else {
              boxShadow += 'inset ' + px +' -' + px + ' 0 ' + px + ' #' + color + ',';
          }
        } else {
           var px = (i * 100/last) + (100/last) + 'px';
          if(last == i + 1) {
              boxShadow += 'inset -' + px +' ' + px + ' 0 ' + px + ' #' + color;
            $('body').css('background','#' + color);
          } else {
              boxShadow += 'inset -' + px +' ' + px + ' 0 ' + px + ' #' + color + ',';
          }
        }
      });
     
      $('body').css('box-shadow', boxShadow);
        paths.forEach( function( path, i ) {
          
          var color = (typeof palette.colors[i] != 'undefined') ? '#' + palette.colors[i] : '#' + palette.colors[0];
          var pattern = GeoPattern.generate(palette.title + color, { color: color });
          
          var patternSVG = Snap.parse(pattern.toSvg());
          if(!$('#pattern' + i).length) {
            $('#shield defs').prepend('<pattern width="100%" height="100%" id="pattern'+ i +'"></pattern>');
          }
          $('#pattern' + i).empty();
          
          nodes = Array.prototype.slice.call(patternSVG.node.childNodes,0); 
          nodes.forEach( function(piece) {
             svg.select('#pattern' + i).append(piece);
          });
          
          path.animate( { opacity: 1 }, 500);
          if(path.type === 'text') {
            path.attr('fill', color);
          }
          path.toggleClass('serif');
      });
     
  }); 
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://codepen.io/ericnkatz/pen/414fd9c31f6d09874bf8f8ebe4a53d95"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>

style.scss

@import "compass/css3";

body {
  background:#fff;
  background-repeat:repeat-y;
  margin:0;
  padding:0;
  height:100%;
  transition:300ms;
}
html {
  height:100%;
}
#shield > path, #shield > text {
  opacity:0;
  transition:500ms;
  moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  font-size:3.7em;
  font-weight:normal;
}

#firstLetter tspan {
  text-shadow:-2px 2px 0px rgba(0,0,0,0.5);
}
#lastLetter tspan {
  text-shadow:2px 2px 0px rgba(0,0,0,0.5);
}
text {
  font-family: 'Droid Serif';
  &.serif {
    font-family: 'Droid Serif';
  }
}
#shield {
  margin:0 auto;
  width:100%;
  height:90vh;
  padding-top:5vh;
  display:block;
  cursor:pointer;
}

svg-badge-generator.markdown

SVG Badge Generator

this was sitting in private but i dont know why so i just tweaked api to https and made public - enjoy

A Pen by l1kw1d on CodePen.

License.