Skip to content

Instantly share code, notes, and snippets.

@katsumitakano

katsumitakano/index.html

Created February 3, 2014 07:12
Show Gist options
  • Save katsumitakano/8779891 to your computer and use it in GitHub Desktop.
Save katsumitakano/8779891 to your computer and use it in GitHub Desktop.
Download ZIP
三次ベジェ曲線
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
width: 960px;
height: 500px;
}
</style>
</head>
<body>
<svg width="960" height="500">
<g transform="translate(10,10)">
<path stroke="black" fill="none" d="
M 0,0
C 250,100 100,300 300,300
"></path>
<!-- 以下は付加情報 -->
<circle cx="0" cy="0" r="5" fill="black"></circle>
<text x="0" y="0" dx="10" dy="10" fill="red">M0, 0</text>
<circle cx="250" cy="100" r="10" fill="blue"></circle>
<text x="250" y="100" dx="10" dy="10" fill="red">C250, 100</text>
<circle cx="100" cy="300" r="10" fill="blue"></circle>
<text x="100" y="300" dx="10" dy="10" fill="red">100, 300</text>
<circle cx="300" cy="300" r="5" fill="black"></circle>
<text x="300" y="300" dx="10" dy="10" fill="red">300, 300</text>
<line x1="0" y1="0" x2="250" y2="100" stroke="black" stroke-dasharray="5 5" opacity="0.2"></line>
<line x1="100" y1="300" x2="300" y2="300" stroke="black" stroke-dasharray="5 5" opacity="0.2"></line>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment