JSFiddle - React, Tailwind, and code Playground

by kevindivdbyzero

HTML

<script language="JavaScript" type="text/javascript" src="http://www.voidblossom.com/javascript/lekton.font.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>

JavaScript

function mount( paper, subject, backing_style, allowZoom  )
{
    allowZoom = allowZoom || 1.0;
        backing_style = backing_style || { fill: 'white', stroke: 'black' };
    var bbox = subject.getBBox();
    
    var rect = paper.rect( bbox.x - ( bbox.width * ( allowZoom - 1.0 ) * 0.5 ),
                           bbox.y - ( bbox.height * ( allowZoom - 1.0 ) * 0.5 ),
                           bbox.width * allowZoom,
                           bbox.height * allowZoom,
                           5 ).attr( backing_style );
    
    return paper.set( rect, subject.toFront() );
}

var paper = Raphael( 0, 0, 640, 480 );

var font = paper.getFont( "lekton" );

var start_font_size = 40;
var hover_font_size = 60;

var baseFontAttr = 
    {
        fill: 'red',
        stroke: 'none',
        'font-size': start_font_size,
        'font-family': "'Lekton',sans-serif",
        'text-anchor': 'middle'
    };

var path = paper.print( 125, 50, "THIS USES PRINT", font, 40, 'start' ).attr( baseFontAttr );

var text = paper.text( 300, 150, "THIS USES TEXT" ).attr( baseFontAttr );

var path_fixture = mount( paper, path, null, 1.8 );

path_fixture.hover( function()
            {
                var bbox = path.getBBox();
                var scale = hover_font_size / start_font_size;
                path.animate( { transform: "S" + scale + "," + scale + " " + ( bbox.x + bbox.width / 2 ) + "," + ( bbox.y + bbox.height / 2 ) }, 3000, "<>" );
            },
            function()
            {
                path.animate( { transform: "" }, 3000, "<>" );
            } );

var text_fixture = mount( paper, text, null, 1.8 );
text_fixture.hover( function()
            {
                var bbox = path.getBBox();
                var scale = hover_font_size / start_font_size;
                text.animate( { 'font-size': hover_font_size }, 3000, "<>" );
            },
            function()
            {
                text.animate( { 'font-size': start_font_size }, 3000, "<>" );
      ...