Skip to content

Instantly share code, notes, and snippets.

@phoebebright

phoebebright/index.html

Created August 30, 2012 15:46
Show Gist options
  • Save phoebebright/3531350 to your computer and use it in GitHub Desktop.
Save phoebebright/3531350 to your computer and use it in GitHub Desktop.
Download ZIP
SVG appears before transform
Raw
index.html
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body { text-align: center; margin: auto; }
p.source { font-style: italic; }
a { color: blue; }
svg {
display: block;
margin: auto;
}
rect {
fill: none;
stroke: #fff;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bucket {
float:left;
}
#bucket1, #bucket2, #bucket3 {
width: 240px;
height: 400px;
margin: 30px;
background: #bbb;
}
</style>
</head>
<body>
<div class="bucket">
<h3>
In Progress
</h3>
<div height="500px" width="240px" id="bucket1">
<svg>
<g>
<g transform="translate(115,0)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="71" width="56">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="28.5">
T-024
</text>
</g>
<g transform="translate(172,0)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="71" width="67">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="34">
T-015
</text>
</g>
<g transform="translate(0,21)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="34" width="57">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="17.5" x="29">
T-025
</text>
</g>
<g transform="translate(0,0)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="20" width="57">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="10.5" x="29">
T-052
</text>
</g>
<g transform="translate(0,98)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="41" width="57">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="21" x="29">
T-060
</text>
</g>
<g transform="translate(58,127)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="69" width="103">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="35" x="52">
T-062
</text>
</g>
<g transform="translate(162,72)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="124" width="77">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="62.5" x="39">
T-067
</text>
</g>
<g transform="translate(0,140)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Mike" height="56" width="57">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="28.5" x="29">
T-068
</text>
</g>
<g transform="translate(58,0)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Natasha" height="71" width="56">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="36" x="28.5">
T-095
</text>
</g>
<g transform="translate(58,72)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="54" width="103">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="27.5" x="52">
T-0103
</text>
</g>
<g transform="translate(0,56)" class="cell">
<rect style="fill: rgb(49, 130, 189);" class="cell Joe" height="41" width="57">
</rect>
<text style="opacity: 1;" text-anchor="middle" dy=".35em" y="21" x="29">
T-0145
</text>
</g>
</g>
</svg>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment