JSFiddle - React, Tailwind, and code Playground

by Aleksandr Pavlovsky

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="draw"></div>

JavaScript

var paper = Raphael('draw', 600, 350);

var circle = paper.circle(50, 50, 40),
	rect = paper.rect(40, 40, 100, 50),
	line = paper.path('M0 0L150 100'),
	text = paper.text(100, 150, 'I\'m just a text'),
	path = paper.path('M 0 200 L 200 200 L 100 300 z'),
	image = paper.image('http://inspectelement.com/wp-content/uploads/2013/03/Q3cUg29.gif', 250, 0, 250, 200);

var filler = {
		fill: 'yellow',
		stroke: 'gray',
		'stroke-width': '3',
		'stroke-dasharray': '.',
};

// Setting attributes
circle.attr([filler, {'cursor': 'pointer'}]);

rect.attr([filler, {'fill': '180-#fff-#000'}]);

line.attr(filler);

path.attr({
	fill: 'orange',
	stroke: 'blue',
	'stroke-width': '4',
	'stroke-dasharray': '-',
	'stroke-linecap': 'round'
});

text.attr({
	font: 'arial',
	'font-size': 24
});
// Arrange
// rect.toBack();

// Apply the id for
circle.node.id = "circle";

$('#circle').on('click', function(){
	$(this).attr('fill', 'red');
	alert('I\'m a circle');
});

image.click(function(){
	this.animate({'transform': 't40 40s1.2r5'}, 800, 'bounce');
});