Friday, April 14

SVGs: Cut shapes out of other shapes. Transparencies


Introduction

While making a SVG graphic of an "id card" I realized I needed the top part of the card to have a transparent hole in it. Searching the internet mainly shows the "fill=odd" trick, and drawing the objects with paths. Which is ok if you want to cut a square out of a circle, or a circle out of a star. If you want to cut a rectangle with rounded corners, creating a path becomes much harder.





and then came Mask

I am not sure which article, or which blogger I first read about masks on. My initial thoughts were that it followed the same lines as the "fill=odd" trick. Then I saw a code example, and it all became clear. Mask is exactly what I was looking for.



Example

Before I used mask, I had a rectangle with rounded corners, with the fill color set to the same as the background color.




Using the mask feature, we define the mask in the DEF section, and anything colored #FFFFFF is shown, anything #000000 is transparent.

Monday, April 10

JavaScript: Draggable DOM Element


Introduction

I wanted to create a completly Vanilla JavaScript draggable DOM element tool. This will be used in a future project idea. You can watch the time lapse of this being created:


dragItem.js   (JavaScript Source Code)

(function() {
  'use strict';
  
  var inDrag = false
    , dragElement = null
    , dragOffsetX = 0
    , dragOffsetY = 0
    , body = document.getElementsByTagName('body')[0];
    ;
  
  function dragHandler( event ) {
    if (event.button != 0) return;
    dragElement = event.target;
    var canDrag = dragElement.getAttribute('drag')
      ;
    while (!canDrag && dragElement.parentElement) {
      dragElement = dragElement.parentElement;
      canDrag = dragElement.getAttribute('drag');
    }
    if (!canDrag) return dragElement = false;
    dragOffsetX = event.clientX - dragElement.offsetLeft;
    dragOffsetY = event.clientY - dragElement.offsetTop;
    body.appendChild(dragElement);
    body.style.userSelect = 'none';
    inDrag = true;
  }
  
  function dragMove( event ) {
    if (!inDrag) return false;
    dragElement.style.left = event.clientX-dragOffsetX+'.px';
    dragElement.style.top = event.clientY-dragOffsetY+'.px';
  }
  
  function dragStop() {
    if (!inDrag) return;
    if (event.button != 0) return;
    inDrag = false;
    if ( (dragElement.offsetTop + dragElement.offsetHeight)<20) dragElement.style.top = 20 - dragElement.offsetHeight+'.px';
    if ( (dragElement.offsetLeft + dragElement.offsetWidth)<20) dragElement.style.left = 20 - dragElement.offsetWidth+'.px';
    if ( (dragElement.offsetTop+20)>window.innerHeight) dragElement.style.top = window.innerHeight - 20+'.px';
    if ( (dragElement.offsetLeft+20)>window.innerWidth) dragElement.style.left = window.innerWidth - 20+'.px';
    dragElement.zIndex = '10';
    body.style.userSelect = '';
    dragElement = null;
  }
  
  function init() {
    var dragableItems = document.querySelectorAll('[drag]')
      ;
    for (let itemID=0; itemID<dragableItems.length; itemID++) {
      let item = dragableItems[itemID];
      item.className+=' dragable';
    }
    window.addEventListener('mousedown', dragHandler );
    window.addEventListener('mouseup', dragStop );
    window.addEventListener('mousemove', dragMove );
  }
  
  window.addEventListener('load', init);
})();


index.html   (HTML Source Code)




Check out the CodePen

See the Pen Draggable DOM Element by Failed Sleep (@FailedSleep) on CodePen.