JSFiddle - React, Tailwind, and code Playground

by nhunzaker

HTML

<div class="trap">
    <canvas width="400" height="400"></canvas>
    <span id="label">Viget Labs</span>
</div>

SCSS

@mixin transform($value) {
    -webkit-transform: $value;
    -moz-transform: $value;
    transform: $value;
}

@mixin transition($value) {
    -webkit-transition: $value;
    -moz-transition: $value;
    transition: $value;
}

body {
    background: #d9d9d9;
    font-family: Helvetica;
    margin: 30px auto;
    text-align: center;
}

canvas {
    background: #fff;
}

.trap {
    position: relative;   
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

#label {
    color: #1496bb;
    font-size: 50px;
    left: -2px;
    line-height: 0.3;
    position: absolute;
    top: -2px;
    @include transition(1.25s all);
    white-space: nowrap;
}

#label:before {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 25px;
    color: #333;
    height: 25px;
    line-height: 25px;
    position: absolute;
    top: -35px;
    left: -35px;
    font-size: 12px;
    width: 25px;
}

.default:before {
    content: "0";    
}

.offset {
    @include transform(translate(80px, 215px));
    
    &:before {
        content: "1";
    }
}

.rotated {
    @include transform(translate(80px, 215px) rotate(45deg));
    
    &:before {
        content: "2";
    }
}

.complete {
    @include transform(translate(80px, 215px) rotate(45deg) translate(0, -15px));
    
    &:before {
        content: "3";
    }
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var content = 'Viget Labs';
var rotation = 45;
var x = 80;
var y = 220;

var RADIANS = Math.PI / 180;

// Set the font parameters
ctx.font = '50px Helvetica';
ctx.fillStyle = '#d9d9d9';

// use ctx.measureText to calculate the offset
var offset = ctx.measureText(content).width * 0.5;

// Overcompensate for the offset, rotate, then counter-compensate
// when painting text
ctx.translate(x + offset, y);
ctx.rotate(rotation * RADIANS);
ctx.fillText(content, -offset, 0);

// For CSS demo
(function animate(current) {
    var steps = ['offset', 'rotated', 'complete', 'default'];
    
    document.querySelector('#label').setAttribute('class', steps[current]);
    
    current += 1;
    
    if (!steps[current]) current = 0;
    
    setTimeout(animate.bind(this, current), 2000);
    
}(0));