Skip to content

Instantly share code, notes, and snippets.

@roundrobin
Last active August 29, 2015 14:01
Show Gist options
  • Save roundrobin/36269d2e2c79064652ed to your computer and use it in GitHub Desktop.
Save roundrobin/36269d2e2c79064652ed to your computer and use it in GitHub Desktop.
Rotation test
{"description":"Rotation test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/YjEMtGF.png"}
var svg = g;
console.log(svg);
var time = 4;
g.append("rect")
.attr({
width: 75 * time,
height: 85 * time,
fill: "#ddd",
rx: 10,
ry: 10
});
g.append("rect")
.attr({
id: "gg",
width: 50 * time,
height: 40 * time,
fill: "#474747",
x: (75*time/2) - 25 * time,
y: (42.5*time/2)
});
// <rect x="0" y="0" width="75" height="85" fill="#feb7b7" rx="10px" ry="10px" fill-opacity="0.3"></rect>
// <rect class="arrow" fill="red" width="50" height="40" x="14" y="22"></rect>
console.log(g.select('#gg'));
g.append("circle")
.attr({
r: 1,
cx: (75/2) * time,
cy: (85/2)*time,
fill: "#ff00ff"
});
g.select('#gg')
.transition()
.duration(1000)
.attr({
transform: "translate()rotate("+(90)+","+(25*time)+",0)"
});
Display the source blob
Display the rendered blob
Raw
{}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment