Skip to content

Instantly share code, notes, and snippets.

@ArthurYidi

ArthurYidi/index.html

Last active October 7, 2015 04:47
Show Gist options
  • Save ArthurYidi/3107931 to your computer and use it in GitHub Desktop.
Save ArthurYidi/3107931 to your computer and use it in GitHub Desktop.
Download ZIP
steam logo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Sketch</title>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
</head>
<body>
<div id="canvas"></div>
<script src="logo.js"></script>
</body>
</html>
Raw
logo.js
/*global Raphael:false */
(function () {
"use strict";
var size = 250,
center = size / 2;
var canvas = new Raphael('canvas', size, size);
var text = canvas.set();
text.push(
canvas.path("M37.58,36.11c-5.53,0-7.56-2.31-7.56-7.96V12.98c0-0.23-0.11-0.34-0.34-0.34h-1.52 c-1.3,0-2.03-0.79-2.03-1.92c0-1.13,0.73-1.92,2.03-1.92h1.52c0.23,0,0.34-0.11,0.34-0.34V2.54c0-1.58,1.02-2.54,2.37-2.54 s2.37,0.96,2.37,2.54v5.92c0,0.23,0.11,0.34,0.34,0.34h3.56c1.29,0,2.03,0.79,2.03,1.92c0,1.13-0.73,1.92-2.03,1.92H35.1 c-0.22,0-0.34,0.11-0.34,0.34v15.01c0,2.88,0.73,3.72,3.61,3.72c1.47,0,2.31,0.9,2.31,2.2c0,1.3-0.85,2.2-2.54,2.2H37.58z"),
canvas.path("M46.66,29.11c-0.56-1.69-0.9-3.61-0.9-6.83s0.28-5.13,0.84-6.83c1.52-4.68,5.42-7.28,10.55-7.28 c5.3,0,9.14,2.6,10.61,7.22c0.62,1.81,0.9,3.89,0.9,6.54c0,1.07-0.73,1.8-1.86,1.8H50.95c-0.23,0-0.34,0.11-0.34,0.34 c0,1.3,0.11,2.2,0.45,3.27c1.02,3.1,3.5,4.68,6.83,4.68c2.65,0,4.46-0.79,6.49-2.31c0.56-0.45,1.07-0.68,1.64-0.68 c1.13,0,1.97,0.85,1.97,1.97c0,0.68-0.28,1.24-0.73,1.69c-2.31,2.14-5.53,3.72-9.7,3.72C51.97,36.45,48.19,33.85,46.66,29.11z M63.48,19.97c0.23,0,0.34-0.11,0.34-0.34c0-1.24-0.11-2.2-0.39-3.05c-0.9-2.71-3.16-4.23-6.21-4.23c-3.05,0-5.3,1.52-6.21,4.23 c-0.28,0.85-0.39,1.81-0.39,3.05c0,0.23,0.11,0.34,0.34,0.34H63.48z"),
canvas.path("M97.3,33.85c0,1.3-1.01,2.26-2.43,2.26c-0.85,0-1.52-0.4-2.09-1.19l-1.07-1.69h-0.06 c-1.8,2.03-4.34,3.22-8.29,3.22c-6.04,0-9.53-2.99-9.53-8.12c0-5.58,3.83-8.35,10.55-8.35h6.15c0.23,0,0.34-0.11,0.34-0.34v-1.3 c0-3.78-1.75-5.92-6.49-5.92c-2.09,0-4.23,0.68-5.53,1.35c-0.45,0.23-0.96,0.4-1.35,0.4c-1.24,0-2.03-0.79-2.03-2.03 c0-0.73,0.34-1.47,1.13-1.92c1.69-1.13,4.51-2.03,8.24-2.03c7.22,0,10.61,3.44,10.61,10.1v9.7c0,1.41,0.11,1.97,0.51,2.76l0.96,1.75 C97.13,32.89,97.3,33.4,97.3,33.85z M90.87,27.08v-2.99c0-0.23-0.11-0.34-0.34-0.34h-5.42c-4.63,0-6.71,1.35-6.71,4.4 c0,2.82,2.03,4.23,5.64,4.23C88.22,32.38,90.87,30.41,90.87,27.08z"),
canvas.path("M104.08,11.06c0-1.58,1.02-2.54,2.37-2.54c1.35,0,2.37,0.96,2.37,2.54v0.79h0.06 c1.47-2.2,3.89-3.67,7.56-3.67c3.72,0,6.43,1.58,7.9,4.23h0.05c1.81-2.54,4.51-4.23,8.75-4.23c6.09,0,9.65,3.84,9.65,10.15v15.23 c0,1.58-1.02,2.54-2.37,2.54c-1.35,0-2.37-0.96-2.37-2.54v-14.1c0-4.34-1.97-6.88-6.04-6.88c-3.67,0-6.21,2.6-6.21,6.6v14.38 c0,1.58-1.01,2.54-2.37,2.54s-2.37-0.96-2.37-2.54v-14.1c0-4.34-1.97-6.88-6.04-6.88c-3.67,0-6.21,2.6-6.21,6.6v14.38 c0,1.58-1.02,2.54-2.37,2.54c-1.36,0-2.37-0.96-2.37-2.54V11.06z"),
canvas.path("M1.13,33.45C0.4,32.95,0,32.27,0,31.48c0-1.13,0.9-2.14,2.2-2.14c0.45,0,0.9,0.11,1.58,0.51 c2.2,1.3,4.51,2.37,7.56,2.37c3.89,0,5.92-1.69,5.92-4.06c0-2.26-1.02-3.38-5.3-3.84l-2.82-0.28c-5.3-0.56-8.07-3.27-8.07-7.62 c0-5.13,3.67-8.24,9.99-8.24c3.16,0,5.98,0.79,8.07,1.97c0.96,0.51,1.41,1.13,1.41,1.97c0,1.13-0.9,2.03-2.03,2.03 c-0.45,0-0.96-0.11-1.69-0.45c-1.8-0.85-3.83-1.41-5.98-1.41c-3.39,0-5.13,1.52-5.13,3.72c0,2.14,1.24,3.27,5.3,3.67l2.82,0.28 c5.64,0.62,8.12,3.27,8.12,7.67c0,5.3-3.84,8.8-11,8.8C6.83,36.45,3.39,35.03,1.13,33.45z")
);
var box = text.getBBox();
text.attr({fill : "#272525", stroke : 0,
transform : Raphael.format("T{0},{1}",
center - (box.width / 2),
center - (box.height / 2))
});
var radius = (center - (box.width / 2)) - 35;
var angle,
//colors = ["#BCB5EB", "#DB41E0", "#F0CCBD", "#E6D820", "#72E8D4"],
colors = ["#BCB5EB", "#DB41E0", "#20D2E6", "#F2EF16", "#72E8D4"],
circles = [],
lines = [],
animate;
var f = function () {
var element = this;
element.line.attr({
path: Raphael.format("M{0},{1} L{2},{3} L{4},{5} z",
element.center().x,
element.center().y,
element.connect.center().x,
element.connect.center().y,
element.connect2.center().x,
element.connect2.center().y
)
});
};
var move = function (dx, dy, x, y) {
var angle = Raphael.angle(x, y, center, 0, center, center);
this.attr({transform: "r" + angle + " " + center + " " + center});
for (var i = 0; i < circles.length; i++) {
var circle = circles[i];
circle.update();
}
};
for (var i = 0; i < 5; i++) {
circles[i] = canvas.circle(center, radius, 6).attr(
{fill : "#272525", stroke : 0});
}
var rand = [1, 0, 1, 2, 0];
//rand = [4, 0, 4, 4, 3];
//rand = [3, 4, 3, 0, 3];
//rand = [4, 3, 2, 1, 0];
for (i = 0; i < 5; i++) {
circles[i].line = canvas.path().attr({
fill: Raphael.format("90-{0}-{1}",
Raphael.color(colors[i]),
"#FFF"
),
//fill: Raphael.format("135-#ccc-#fff:950-#fff",
//Raphael.color(colors[i]),
//"#FFF"
//),
opacity: 0.01,
stroke: 0
});
circles[i].connect2 = circles[rand[i]];
if (i < 4) {
circles[i].connect = circles[i + 1];
} else {
circles[i].connect = circles[i - 1];
}
}
Raphael.el.center = function () {
var box = this.getBBox();
return {
x: Math.floor(box.x + box.width / 2.0),
y: Math.floor(box.y + box.height / 2.0)
};
};
for (i = 0; i < circles.length; i++) {
angle = Math.floor((Math.random() * 360) + 1);
circles[i].attr({transform: "r" + angle + " " + center + " " + center});
circles[i].update = f;
circles[i].onAnimation(f);
circles[i].toFront();
text.toFront();
circles[i].animate(
{transform: "r" + angle * 3 + " " + center + " " + center},
2e3 + 8000,
"linear",
function () {
this.drag(move);
}
);
}
for (i = 0; i < circles.length; i++) {
circles[i].update();
circles[i].drag(move);
}
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment