D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Restuta
Full window
Github gist
Half as Russian http://cmx.io/#1b7f32cd476d819bc8ae
<!DOCTYPE html> <meta charset="utf-8"> <link rel="stylesheet" href="https://cmx.io/v/0.1/cmx.css"/> <script src="https://cmx.io/v/0.1/cmx.js"></script> <body> <scene id="scene1"> <label t="translate(0,346)"> <tspan x="0" y="0em">Half as Russian</tspan> </label> <actor t="translate(85,60)" pose="-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|-1,59"> <bubble pose="0,0|-20,10|-81,49|22,44|-17,87|-64,102"> <tspan x="0" y="0em">Russian is weird!</tspan> </bubble> </actor> <actor t="translate(191,49) rotate(1)" pose="-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-40,91|-1,79|21,90"> <bubble pose="0,0|-20,10|-81,49|5,28|-34,71|-56,79"> <tspan x="0" y="0em">Why?</tspan> </bubble> </actor> </scene> <scene id="scene2"> <actor t="translate(90,109)" pose="-17,-32|-11,65|-17,47|-17,37|-17,31|-17,11|-22,-14|-27,-39|-12,-14|-7,-39|-24,27|-30,11|-3,31|16,25"> <bubble pose="0,0|-26,-14|-87,7|28,113|-11,156|-71,144"> <tspan x="0" y="-1em">See, those two guys?</tspan> <tspan x="0" y="1em">left one is only half as tall</tspan> <tspan x="0" y="2em">as right one.</tspan> <tspan x="3em" y="3em" fill="orange">and</tspan> <tspan x="0" y="4em">you can equally say that</tspan> <tspan x="0" y="5em">right one is half as tall</tspan> <tspan x="0" y="6em">as left one.</tspan> </bubble> </actor> <actor t="translate(182,-10) rotate(1)" pose="-11,9|-9,103|-11,83|-11,73|-11,89|-11,76|-13,66|-18,41|-10,65|-5,40|-23,63|-20,65|-4,71|0,64"> </actor> <actor t="translate(222,4) rotate(1)" pose="-11,9|-9,165|-11,130|-11,123|-11,84|-11,76|-18,53|-23,28|-3,49|2,24|-18,110|-25,87|-6,123|7,85"> </actor> </scene> <scene id="scene3"> <actor t="translate(143,48)" pose="-24,8|-18,105|-24,87|-24,77|-24,78|-24,58|-29,33|-34,8|-19,33|-14,8|-31,67|-31,47|-16,69|9,72"> <bubble pose="0,0|-20,10|-81,49|22,44|-17,87|-99,116"> <tspan x="0" y="0em">If I just translate this to</tspan> <tspan x="0" y="1em">Russian, here is how</tspan> <tspan x="0" y="2em">it will look.</tspan> </bubble> </actor> </scene> <scene id="scene4"> <actor t="translate(61,-11) rotate(1)" pose="-11,9|-9,110|-11,99|-11,82|-10,104|-10,91|-12,81|-20,60|-8,72|-3,61|-18,88|-22,84|-6,92|-1,87"> <bubble pose="0,0|-7,26|-23,76|43,83|4,126|-31,134"> <tspan x="0" y="0em" fill="orange">я вполовину</tspan> <tspan x="0" y="1em">меньше</tspan> </bubble> </actor> <actor t="translate(132,24) rotate(1)" pose="-11,9|-9,170|-11,135|-11,128|-12,96|-11,76|-18,53|-23,28|-3,49|2,24|-18,115|-25,92|-8,130|5,92"> <bubble pose="0,0|6,7|-10,57|43,26|4,69|-47,89"> <tspan x="0" y="0em">Я исходное</tspan> <tspan x="0" y="1em">значение</tspan> </bubble> </actor> <actor t="translate(207,24) rotate(1)" pose="-11,9|-7,238|-9,203|-13,121|-10,144|-11,96|-18,73|-33,25|-3,69|6,22|-16,183|-23,151|-4,196|9,158"> <bubble pose="-1,-72|2,4|-35,5|33,41|-4,44|-41,60" t="rotate(1)"> <tspan x="0" y="0em" fill="orange">я вполовину</tspan> <tspan x="0" y="1em">больше</tspan> </bubble> </actor> </scene> <scene id="scene5"> <actor t="translate(84,44)" pose="-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-18,59|-6,79|-1,59"> <bubble pose="0,0|-20,10|-81,49|16,93|-23,136|-63,144"> <tspan x="0" y="0em">See the point?</tspan> <tspan x="0" y="6em">Half the same...</tspan> </bubble> </actor> <actor t="translate(200,40) rotate(1)" pose="-11,9|-5,117|-11,99|-11,89|-11,79|-11,59|-16,34|-21,9|-6,34|-1,9|-18,79|-40,91|-1,79|21,90"> <bubble pose="0,0|-20,10|-81,49|46,61|7,104|-42,126"> <tspan x="0" y="0em">Nope, it's</tspan> <tspan x="0" y="1em">the same.</tspan> </bubble> </actor> </scene>
Modified
http://cmx.io/v/0.1/cmx.js
to a secure url
https://cmx.io/v/0.1/cmx.js