Skip to content

Instantly share code, notes, and snippets.

@tpogden

tpogden/README.md

Last active April 4, 2016 18:45
Show Gist options
  • Save tpogden/defb1aa0508345892cd090ff7985bc9b to your computer and use it in GitHub Desktop.
Save tpogden/defb1aa0508345892cd090ff7985bc9b to your computer and use it in GitHub Desktop.
Download ZIP
Otimes Icon
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>Otimes Icon</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {
text-align: center;
}
.path {
fill: none;
stroke: rgba(189,54,19,1);
stroke-linecap: round;
}
</style>
</head>
<body>
<script>
(function() {
var svgSize = 512;
var lineStart = 22/64;
var lineEnd = 42/64;
var strokeWidth = 3/64;
var circleWidth = 24/64;
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = svgSize - margin.left - margin.right; // was 944
height = svgSize - margin.top - margin.bottom;
var xScale = d3.scale.linear()
.range([0, width])
.domain([0, 1]);
var yScale = d3.scale.linear()
.range([height, 0])
.domain([0, 1]);
// Draw SVG
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var line1 = svg.append("line")
.attr("x1", xScale(lineStart))
.attr("y1", yScale(lineStart))
.attr("x2", xScale(lineEnd))
.attr("y2", yScale(lineEnd))
.style("stroke-width", xScale(strokeWidth))
.classed("path", true);
var line2 = svg.append("line")
.attr("x1", xScale(lineStart))
.attr("y1", yScale(lineEnd))
.attr("x2", xScale(lineEnd))
.attr("y2", yScale(lineStart))
.style("stroke-width", xScale(strokeWidth))
.classed("path", true);
var circle = svg.append("circle")
.attr("cx", xScale(1/2))
.attr("cy", yScale(1/2))
.attr("r", xScale(circleWidth))
.style("stroke-width", xScale(strokeWidth))
.classed("path", true);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment