JSFiddle - React, Tailwind, and code Playground

by wellcaffeinated

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<div class="container">
    <div id="coffee"></div>
</div>

CSS

#coffee {
    width: 230px;
    height: 200px;
    padding: 1em 0;
    margin: auto;
    -ms-box-shadow: 0 0 5px #89570F inset;
    -moz-box-shadow: 0 0 5px #89570F inset;
    -webkit-box-shadow: 0 0 5px #89570F inset;
    box-shadow: 0 0 5px #89570F inset;
}

.container {
    overflow: hidden;
}

JavaScript

$(function(){
    
    var paper = Raphael('coffee', 400, 300)
        // path from: https://github.com/ekinertac/Tacir-Icons/blob/master/svg/coffee.svg
        ,path = 'M 423.555,221.188c 0.033-2.533, 0.049-5.076, 0.049-7.626c0.00-30.532-93.227-55.284-208.225-55.284 c-114.997,0.00-208.223,24.752-208.223,55.284C 7.156,378.385, 73.546,512.00, 215.379,512.00c 83.413,0.00, 140.723-46.225, 173.788-117.818 c 3.338,0.27, 6.699,0.457, 10.119,0.457c 58.297,0.00, 105.559-39.356, 105.559-87.904C 504.844,265.143, 470.153,230.321, 423.555,221.188z M 349.141,235.972c-36.689,8.652-84.195,13.417-133.762,13.417 c-49.565,0.00-97.07-4.765-133.76-13.417 c-35.822-8.448-50.376-18.136-54.252-22.411c 3.876-4.275, 18.431-13.961, 54.252-22.409c 36.688-8.653, 84.193-13.419, 133.76-13.419 c 49.565,0.00, 97.071,4.767, 133.762,13.419c 35.822,8.448, 50.377,18.134, 54.254,22.409C 399.518,217.836, 384.963,227.523, 349.141,235.972 z M 398.268,372.213c 12.537-33.865, 20.355-72.30, 23.60-113.514c 30.50,6.246, 48.42,28.615, 48.42,51.395 C 470.285,339.477, 448.723,368.814, 398.268,372.213z M 255.689,126.078C 283.881,83.461, 206.377,37.648, 259.908,0.00c-44.528,2.943-52.161,30.188-40.935,51.461 C 229.63,71.652, 255.649,85.732, 255.689,126.078z M 233.163,154.501c 12.646-35.708-59.269-64.515-19.554-105.806c-37.209,10.992-36.253,41.592-20.227,58.701 C 204.951,119.75, 225.905,125.482, 233.163,154.501z'
        ,icon = paper.path(path).attr({ stroke: '#89570F', 'stroke-width': '2', fill: '#89570F', 'fill-opacity': 0 })
        ;
    
    // zoom out
    paper.setViewBox(0, 0, 1200, 1200, true);
    
    // set dash length and offset to be the same, and larger than path
    $(icon.node).css({
        'stroke-dasharray': '9999px',
        'stroke-dashoffset': '9999px'
    });
    
    $('body').on('hover', function(e){
        e.preventDefault();
        
        // the path length
        var len = Raphael.getTotalLength(path)
            ,glow
            ;

        $(icon.node).animate({
            //...