JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael.min.js"></script>
<div id='thePaper'></div>

CSS

div#thePaper {
    border: 1px solid black;
    height: 200px;
    width: 320px;
}

JavaScript

var paperHeight = 200;
var paper = Raphael('thePaper', 320, paperHeight );

Raphael.el.invert = function() {
    this.transform('s1,-1');
};

$('div#thePaper').find('svg').css(
    {
        '-webkit-transform': 'scaleY(-1)',
        '-moz-transform': 'scaleY(-1)',
        '-ms-transform': 'scaleY(-1)',
        '-o-transform': 'scaleY(-1)',
        'transform': 'scaleY(-1)',
        'filter': 'flipv'
    });

var circles = paper.set().push(
    paper.circle(10, 10, 5).attr({fill: 'red'}),
    paper.circle(20, 20, 5).attr({fill: 'blue'}),
    paper.circle(30, 30, 5).attr({fill: 'green'}),
    paper.circle(40, 40, 5).attr({fill: 'yellow'}),
    paper.circle(50, 50, 5).attr({fill: 'orange'})
)
    
paper.rect(200, 50, 15,25);
paper.text(200, 120, 'not so good');
paper.text(200, 100, 'this is better').invert();
    
function cMove(dx, dy, x,y) {
    this.attr('cx', x);
    this.attr('cy', paperHeight - y);
};
function mDown() {this.attr('opacity', 0.7);}
function mUp() {this.attr('opacity', 1);}

circles.forEach( function(c) {c.drag(cMove, mDown, mUp);});

var badCircle = paper.circle(100, 100, 5).attr({fill: 'black'})
                .drag(function(dx, dy, x,y) {
                    this.attr('cx', x);
                    this.attr('cy', y);
                }, mDown, mUp)