Play with Raphael.js

Developer
Tingyu
Size
2,612 Kb
Views
56,672
  1. Play with Raphael.js Previews
  2. Play with Raphael.js HTML Codes
  3. Play with Raphael.js CSS Codes
  4. Play with Raphael.js JS Codes

How do I make an play with raphael.js?

What is a play with raphael.js? How do you make a play with raphael.js? This script and codes were developed by Tingyu on 13 September 2022, Tuesday.

Play with Raphael.js Previews
IQ Test

Play with Raphael.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Play with Raphael.js</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="diagram"></div>
<div class="get"> <div class="arc"> <span class="text">jQuery</span> <input type="hidden" class="percent" value="95" /> <input type="hidden" class="color" value="#97BE0D" /> </div> <div class="arc"> <span class="text">CSS3</span> <input type="hidden" class="percent" value="90" /> <input type="hidden" class="color" value="#D84F5F" /> </div> <div class="arc"> <span class="text">HTML5</span> <input type="hidden" class="percent" value="80" /> <input type="hidden" class="color" value="#88B8E6" /> </div> <div class="arc"> <span class="text">PHP</span> <input type="hidden" class="percent" value="53" /> <input type="hidden" class="color" value="#BEDBE9" /> </div> <div class="arc"> <span class="text">MySQL</span> <input type="hidden" class="percent" value="45" /> <input type="hidden" class="color" value="#EDEBEE" /> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Play with Raphael.js - Script Codes CSS Codes

.get { display:none;
}
#diagram { float:left; width:600px; height:600px;
}

Play with Raphael.js - Script Codes JS Codes

var o = {	init: function(){	this.diagram();	},	random: function(l, u){	return Math.floor((Math.random()*(u-l+1))+l);	},	diagram: function(){	var r = Raphael('diagram', 600, 600),	rad = 73,	defaultText = 'Skills',	speed = 250;	r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });	var title = r.text(300, 300, defaultText).attr({	font: '20px Arial',	fill: '#fff'	}).toFront();	r.customAttributes.arc = function(value, color, rad){	var v = 3.6*value,	alpha = v == 360 ? 359.99 : v,	random = o.random(91, 240),	a = (random-alpha) * Math.PI/180,	b = random * Math.PI/180,	sx = 300 + rad * Math.cos(b),	sy = 300 - rad * Math.sin(b),	x = 300 + rad * Math.cos(a),	y = 300 - rad * Math.sin(a),	path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];	return { path: path, stroke: color }	}	$('.get').find('.arc').each(function(i){	var t = $(this),	color = t.find('.color').val(),	value = t.find('.percent').val(),	text = t.find('.text').text();	rad += 30;	var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });	z.mouseover(function(){ this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic'); if(Raphael.type != 'VML') //solves IE problem	this.toFront();	title.stop().animate({ opacity: 0 }, speed, '>', function(){	this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, speed, '<');	}); }).mouseout(function(){	this.stop().animate({ 'stroke-width': 26, opacity: 1 }, speed*4, 'elastic');	title.stop().animate({ opacity: 0 }, speed, '>', function(){	title.attr({ text: defaultText }).animate({ opacity: 1 }, speed, '<');	}); });	});	}
}
$(function(){ o.init(); });
Play with Raphael.js - Script Codes
Play with Raphael.js - Script Codes
Home Page Home
Developer Tingyu
Username TingChe
Uploaded September 13, 2022
Rating 3
Size 2,612 Kb
Views 56,672
Do you need developer help for Play with Raphael.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tingyu (TingChe) Script Codes
Name
Implement Flip effect with css3
Responsive mansory layout
Chart with Chart.js
Translate Overlay hover effect
For animated drop down menu
Customize radio buttons width CSS3
A Pen by Tingyu
Using MixItUp plugin
Mixitup and jPages
Play around velocity js
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!