Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active October 4, 2020 20:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/cc59aafc7d0cb022dfeff2a14f9a5931 to your computer and use it in GitHub Desktop.
Save aaizemberg/cc59aafc7d0cb022dfeff2a14f9a5931 to your computer and use it in GitHub Desktop.
Download ZIP
mosaico
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>mosaico - estrella de 8 puntas</title>
<style>
svg rect {
stroke: none;
fill: white;
}
svg rect:hover {
stroke: white;
fill: steelblue;
}
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
var s = 60, n = 10, w = n*s*1.4, h = n*s*1.4;
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h).style("background","teal");
function prototile(svg, x, y, s) {
svg.append("rect")
.attr("transform","translate(" + (s/2+((s*1.5)*x)) + " " + (s/2+((s*1.5)*y)) + ")" )
.attr("width", s)
.attr("height", s);
svg.append("rect")
.attr("transform","translate(" + (s + (s*1.5)*x) + " "+(s/4+(s*1.5) *y)+") rotate(45)" )
.attr("width", s)
.attr("height", s);
}
for (y = 0; y < n-1; y++) {
for (x = 0; x < n-1; x++) {
prototile(svg, x, y, s);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment