Polygon test

For Bella Italia

by will

HTML

<script src="http://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.easing.js"></script>
<div class="book-a-table" data-texture="http://www.sxc.hu/assets/182984/1829832845/green-wooden-texture-1175322-m.jpg">

    <h1>This is the title</h1>
    <p>This is a bit of copy that I've written to fill the space</p>

</div>

SCSS

.book-a-table {
    -webkit-box-sizing: border-box;
    position: relative;
    margin: 40px;
    padding: 60px;
    width: 342px;
    height: 420px;
    color: #FFF;
    background: url(http://www.sxc.hu/assets/182984/1829832845/green-wooden-texture-1175322-m.jpg);
    
    > * {
        position: relative;
        z-index: 1;
    }
}

.polygon-background {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
}

JavaScript

$(function(){
   
    $('[data-texture]').polygon();
    
});

(function($){

    $.fn.polygon = function(){
        
        this.each(function(){
            
            var $this = $(this),
                texture = $this.data('texture');
            
            $this.css({
                background:    'none'
            });
            
            var $polygon = $('<div/>', {
                'class':    'polygon-background'
            }).appendTo($this);
            
            var draw = SVG($polygon[0]);
            
            var pattern = draw.pattern(300, 200, function(add){
                
                add.image(texture, 300, 200);
                
            });
            
           var coordinates = getRandomInt(0,20) + ',' + getRandomInt(0,20) + ' ' + getRandomInt($polygon.width()-20,$polygon.width()) + ',' + getRandomInt(0,20) + ' ' + getRandomInt($polygon.width() - 20, $polygon.width()) + ','+getRandomInt($polygon.height()-20,$polygon.height())+ ' ' + getRandomInt(0,20) + ',' + getRandomInt($polygon.height()-20,$polygon.height());
            
            var polygon = draw.polygon(coordinates).fill(pattern);
            
            $this.on('mouseenter mouseleave', function(e){
                
                if( e.type == 'mouseenter' ){
                    
                    polygon.animate(1000, SVG.easing.elastic).scale(.95);
                    
                }else{

                    polygon.animate(1000, SVG.easing.elastic).scale(1);                    
                    
                }
                
            });
            
        });
        
        return this;
        
    };
    
})(jQuery);

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

/* create and svg canvas
var draw = SVG('canvas');

var pattern = draw

var circle = draw
                .polygon('50,60 400,50 380,500 54,495')
                .fill(pattern);

var shadow = draw
             ...