Practising SVG

Playing around with the different svg shapes and stuff

by Marcus Baptiste

HTML

<div class="svg-container">
    <svg class='svg-shape' width="50" height="50">
        <rect x="10" y="10" width="50" height="50" fill="blue" stroke="black" stroke-width="1" />
    </svg>
</div>

CSS

.svg-container {
    border: 1px solid black;
    height: 400px; width: 400px;
}

.svg-shape {

}

JavaScript

var svgElements = document.querySelectorAll(".svg-shape");

var randomPos = function(minPos, maxPos) {
    return Math.floor(Math.random() * (maxPos -minPos) + minPos);
};

var shyElement = function(ele) {
    var target = ele;
    var x = randomPos(1,400);
    var y = randomPos(1,400);
   
    
    var slideShape = function() {
        var targetPos = target.getBoundingClientRect();
        
        //calculate displacement
        
        //calculate displacement factor by percentage
        
        //calculate timing and call timeout relative to timing function
    
        
    };
};