東京五輪の佐野ロゴをRaphaelで書いてみてた
思いついて書き込もうと思ったら、もうすでにいっぱいあったし
これでみんないつでも描けるね！ 東京五輪エンブレムのコードがオープンソースに - ねとらぼ
東京五輪エンブレム for iOS
東京五輪エンブレム for Android
東京五輪エンブレム for Ruby
せっかく作ったので
大きさや比率・座標位置は適当です。
bower install raphael
index.html
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="UTF-8">
<title></title>
<style>
#svg {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="svg"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script type="text/javascript">
window.onload = function () {
var stageW = 500, stageH = 500;
var paper = Raphael("svg", stageW, stageH);
paper.path("M0,0 L0,165, 165,0 Z").attr({fill: "#b49146", stroke: "#F33", "stroke-width": 0}); // left triangle
paper.path("M330,500 L500,500, 500,335 Z").attr({fill: "#b4b4b4", "stroke-width": 0}); // right triangle
paper.add([
{type: "circle", cx: 250, cy: 250, r: 265, fill: "#FFF", "stroke-width": 0}, // big circle
{type: "rect", x: 165, y: 0, width: 168, height: 500, fill: "#373737", "stroke-width": 0}, // bo
{type: "circle", cx: 416, cy: 84, r: 83, fill: "#e60014", "stroke-width": 0} // red circle
]);
};
</script>
</body>
</html>
ソース
ライセンスはMITです。
https://github.com/kotaroino/TokyoOlympicEmblem-for-javascript