SVG

Для того, чтобы написать своё имя, я использовал этот online редактор - он автоматически выравнивает линии, нарисованные от руки при помощи мышки. Убрать внутренний отступ на холсте можно с помощью программы Inkscape.
jQuery:

$(document).ready(function() {
jQuery.extend(jQuery.easing, {
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1)
            return c / 2 * t * t + b;
        return -c / 2 * (--t * (t - 2) - 1) + b;
    }
});
function SVG(tag) {
    return document.createElementNS('http://www.w3.org/2000/svg', tag);
}

function drawSVGPaths(_Element, _timeMin, _timeMax, _timeDelay) {
    var paths = $(_Element).find('path');
    $.each(paths, function (i) {
        var totalLength = this.getTotalLength();
        $(this).css({
            'stroke-dashoffset': totalLength,
            'stroke-dasharray': totalLength + ' ' + totalLength
        });
        $(this).delay(_timeDelay * i).animate({ 'stroke-dashoffset': 0 }, {
            duration: Math.floor(Math.random() * _timeMax) + _timeMin,
            easing: 'easeInOutQuad'
        });
    });
}
function startSVGAnimation(Element) {
    drawSVGPaths(Element, 10000, 2000, 50);
}
startSVGAnimation($('svg'));	
});

HTML:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="550px" height="400px" viewBox="0 0 550 400" enable-background="new 0 0 550 400" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="код svg"/>
</svg>

Группа анимированных объектов

Если jQuery Easing Plugin уже подключен, то верхнюю часть кода нужно удалить. Можно не использовать Easing.

Анимация на CSS (не поддерживается некоторыми браузерами)

Текст постепенно пишется, а потом постепенно стирается:

.path {
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Только пишется:

.path {
  stroke-dasharray: 2500;
  stroke-dashoffset: 0;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Фильтр blur

В последних версиях IE не поддерживается фильтр blur. Размытость изображения можно реализовать с помощью SVG.

<svg class="blur">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" color-interpolation-filters="sRGB"></feGaussianBlur>
    </filter>
  </defs>
  <image xlink:href="image.jpg" width="100%" height="100%" filter="url(#blur)"></image></svg>

Двойной ободок у круга

CSS:

.circle {
  fill: none;
  stroke: black;
}

HTML:

<svg height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="40" stroke-width="1" />
  <circle class="circle" cx="50" cy="50" r="38" stroke-width="1" />
</svg>

Действие при наведении круг:

$('svg path#circle').on('hover', function(event) {
    // Действие при наведении
});

То же самое для canvas:

var circleCenter = [200, 300], radius = 50;

$(window).on('mousemove', function(e) {
    var mx = e.pageX, my = e.pageY;
    if (mx > circleCenter[0] - radius && mx < circleCenter[0] + radius && my > circleCenter[1] - radius && my < circleCenter[1] + radius) {
        // Действие при наведении
   } 
});