JSFiddle - React, Tailwind, and code Playground

by shaunxcode

HTML

<h1>How Low Can Your Brow Go?</h1>
<div id="brow"></div>

CSS

#brow {width: 500px; height: 500px; }
body { font-family: helvetica; }
h1 { font-size: 200%; }

JavaScript

var paper = Raphael('brow');

var startX = 60; 
var startY = 50;
var face = paper.circle(startX, startY, 50).attr('fill', 'white').drag(
    function(dx, dy) {
        var moveY = (this.cury + dy);
        if(moveY < startY) { 
            moveY = startY;
        }
        
        if(moveY > 347) { 
            moveY = 347;
        }
        
        console.log(moveY);
        this.attr({cy: moveY});
        this.drawBrows();
    },
    function(x, y) {
        this.cury = face.attr('cy');
    }, 
    function() {
        
    });

var browFactor = 0.05;
face.drawBrows = function() {
    if(this.leftBrow) { this.leftBrow.remove() }
    if(this.rightBrow) { this.rightBrow.remove() }
    if(this.leftEye) { this.leftEye.remove() }
    if(this.rightEye) { this.rightEye.remove() }
    if(this.mouth) { this.mouth.remove() }
    
    var x = this.attr('cx');
    var y = this.attr('cy');
    var diff = y - startY;

    this.leftEye = paper.circle(x - 23, y - 5, 8);
    this.rightEye = paper.circle(x + 23, y - 5, 8);
    this.mouth = paper.ellipse(x, y + 25, 30, 5);
    var bf = (diff * browFactor);
    this.leftBrow = paper.rect(x -35 , y -35 + bf, 20 + bf, 5 + bf).attr('fill', 'black');
    this.rightBrow = paper.rect(x + 15 - bf, y -35 + bf, 20 + bf, 5 + bf).attr('fill', 'black');
};
        
face.drawBrows();