A tangram tribute powered by d3.js transitions

A tangram tribute powered by d3.js transitions.markdown

A tangram tribute powered by d3.js transitions

I used d3.js transitions to animate Tangram polygons.

A Pen by Riccardo Scalco on CodePen.

License.

index.html

<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

script.js

var delta = 4500;
var tangram = d3.select("div")
    .append("svg")
    .append("g")
    .attr("transform","translate(65,-200) scale(0.8)")
    .style("fill","#645452");
tangram.append("path")
    .attr("id","f1")
    .attr("d","M 237,569.36218 477,569.36218 357,689.36218 z");
tangram.append("path")
    .attr("id","f2")
    .attr("d","M 237,809.36218 237,569.36218 357,689.36218 z");
tangram.append("path")
    .attr("id","f3")
    .attr("d","M 477,569.36218 477,689.36218 417,749.36218 417,629.36218 z");
tangram.append("path")
    .attr("id","f4")
    .attr("d","M 417,629.36218 417,749.36218 357,689.36218 z");
tangram.append("path")
    .attr("id","f5")
    .attr("d","M 357,689.36218 417,749.36218 357,809.36219 297,749.36218 z");
tangram.append("path")
    .attr("id","f6")
    .attr("d","M 357,809.36218 477,809.36218 477,689.36218 z");
tangram.append("path")
    .attr("id","f7")
    .attr("d","M 357,809.36218 237,809.36218 297,749.36218 z");
    

var tr = tangram.transition().duration(1000).delay(delta);
tr.style("fill","#FF4848");
tr.select("#f1").attr("d","M 242.66809,591.03103 412.37372,760.7367 242.66809,760.7367 z");
tr.select("#f2").attr("d","M 412.37372,930.4423 242.66809,760.7367 412.37372,760.7367 z");
tr.select("#f3").attr("d","M 582.07934,845.5895 497.22653,930.4423 412.37372,930.4423 497.22653,845.5895 z");
tr.select("#f4").attr("d","M 331.91833,440.28698 331.91833,560.28694 271.91833,500.28694 z");
tr.select("#f5").attr("d","M 271.92066,500.28365 331.92066,560.28365 271.92066,620.28366 211.92066,560.28365 z");
tr.select("#f6").attr("d","M 412.37372,930.4423 327.52091,845.5895 242.6681,930.4423 z");
tr.select("#f7").attr("d","M 211.9245,560.28213 211.9245,440.28208 271.9245,500.28212 z");

var tr = tangram.transition().duration(1000).delay(2 * delta);
tr.style("fill","#2966B8");
tr.select("#f1").attr("d","M 282,606.36218 522,606.36218 402,726.36218 z");
tr.select("#f2").attr("d","M 402,726.36218 162,726.36218 282,606.36218 z");
tr.select("#f3").attr("d","M 381.85281,726.65655 297,811.50937 212.14719,811.50937 297,726.65655 z");
tr.select("#f4").attr("d","M 297,896.36218 212.14719,811.50937 297,811.50937 z");
tr.select("#f5").attr("d","M 522,521.50935 522,606.36217 437.14718,606.36218 437.14719,521.50935 z");
tr.select("#f6").attr("d","M 522,521.36218 437.14719,436.50937 352.29438,521.36218 z");
tr.select("#f7").attr("d","M 282,881.36218 366.85281,966.21499 282,966.21499 z");

var tr = tangram.transition().duration(1000).delay(3 * delta);
tr.style("fill","#B6BA18");
tr.select("#f1").attr("d","M 229.35281,682.84688 469.35281,682.84688 349.35281,802.84688 z");
tr.select("#f2").attr("d","M 589.35281,802.84688 349.35281,802.84688 469.35281,682.84688 z");
tr.select("#f3").attr("d","M 409.35281,862.84688 529.35281,862.84688 589.35281,802.84688 469.35281,802.84688 z");
tr.select("#f4").attr("d","M 312.8375,536.93578 281.77922,652.84688 239.35281,579.36219 z");
tr.select("#f5").attr("d","M 239.35281,579.36218 281.77922,652.84687 208.29453,695.27328 165.86812,621.78858 z");
tr.select("#f6").attr("d","M 314.35281,767.84688 229.5,682.99407 144.64719,767.84688 z");
tr.select("#f7").attr("d","M 165.86812,621.78859 196.9264,505.87749 239.35281,579.36219 z");

var tr = tangram.transition().duration(1000).delay(4 * delta);
tr.style("fill","#1FCB4A");
tr.select("#f1").attr("d","M 390.85281,644.36218 630.85281,644.36218 510.85281,524.36218 z");
tr.select("#f2").attr("d","M 271.14718,814.06781 440.85281,644.36218 271.14718,644.36218 z");
tr.select("#f3").attr("d","M 270.85281,764.36218 186,849.215 101.14719,849.215 186,764.36218 z");
tr.select("#f4").attr("d","M 270.85281,644.36218 390.85281,644.36218 330.85281,584.36218 z");
tr.select("#f5").attr("d","M 330.85281,584.36218 390.85281,644.36218 450.85283,584.36218 390.85281,524.36218 z");
tr.select("#f6").attr("d","M 150.85281,764.36218 270.85281,764.36218 270.85281,644.36218 z");
tr.select("#f7").attr("d","M 350.85281,854.3622 230.85281,854.3622 290.85281,794.36218 z");

var tr = tangram.transition().duration(1000).delay(5 * delta);
tr.style("fill","#5757FF");
tr.select("#f1").attr("d","M 309.9264,697.93577 549.9264,697.93577 429.9264,817.93577 z");
tr.select("#f2").attr("d","M 309.9264,697.93577 479.63203,867.6414 309.9264,867.6414 z");
tr.select("#f3").attr("d","M 284.9264,483.08296 284.9264,603.08296 344.9264,663.08296 344.9264,543.08296 z");
tr.select("#f4").attr("d","M 200.07359,567.93577 284.9264,483.08296 284.9264,567.93577 z");
tr.select("#f5").attr("d","M 344.9264,662.93577 284.9264,602.93577 224.92639,662.93577 284.9264,722.93577 z");
tr.select("#f6").attr("d","M 309.9264,697.93577 225.07359,782.78858 309.9264,867.64139 z");
tr.select("#f7").attr("d","M 224.9264,662.93577 224.9264,782.93577 284.9264,722.93577 z");

var tr = tangram.transition().duration(1000).delay(6 * delta);
tr.style("fill","#FF62B0");
tr.select("#f1").attr("d","M 406.35281,806.78858 576.05844,637.08295 406.35281,637.08295 z");
tr.select("#f2").attr("d","M 236.64718,806.78858 406.35281,637.08295 406.35281,806.78858 z");
tr.select("#f3").attr("d","M 406.35281,806.78858 526.35281,806.78858 586.35281,746.78858 466.35281,746.78858 z");
tr.select("#f4").attr("d","M 176.64718,626.78858 176.64718,746.78858 236.64718,686.78858 z");
tr.select("#f5").attr("d","M 236.64718,686.78857 296.64718,746.78857 236.64718,806.78858 176.64718,746.78857 z");
tr.select("#f6").attr("d","M 121.64718,571.93578 206.5,656.78858 291.3528,571.93578 z");
tr.select("#f7").attr("d","M 236.64718,686.78858 356.64718,686.78858 296.64718,746.78858 z");

var tr = tangram.transition().duration(1000).delay(7 * delta);
tr.style("fill","#03EBA6");
tr.select("#f1").attr("d","M 395.05372,660.82383 225.34809,830.52946 225.34809,660.82383 z");
tr.select("#f2").attr("d","M 480.05372,745.82383 310.34809,576.1182 480.05372,576.1182 z");
tr.select("#f3").attr("d","M 77.09348,542.04773 142.1144,642.90545 225.05372,660.82383 160.0328,559.96611 z");
tr.select("#f4").attr("d","M 140.49528,745.67664 225.34809,660.82383 225.34809,745.67664 z");
tr.select("#f5").attr("d","M 564.90652,590.82383 564.90652,675.67665 480.05372,675.67666 480.05372,590.82383 z");
tr.select("#f6").attr("d","M 480.05372,745.82383 395.20091,660.97102 310.3481,745.82383 z");
tr.select("#f7").attr("d","M 480.05372,745.82383 564.90652,830.67664 480.05372,830.67664 z");

var tr = tangram.transition().duration(1000).delay(8 * delta);
tr.style("fill","#9D9D00");
tr.select("#f1").attr("d","M 497.6472,493.65655 667.3528,663.36218 497.6472,663.36218 z");
tr.select("#f2").attr("d","M 327.6472,833.06781 157.94157,663.36218 327.6472,663.36218 z");
tr.select("#f3").attr("d","M 412.79438,748.0678 497.6472,663.21499 497.6472,578.36218 412.79438,663.21499 z");
tr.select("#f4").attr("d","M 367.50001,578.50937 282.6472,663.36218 367.50001,663.36218 z");
tr.select("#f5").attr("d","M 412.6472,663.36218 412.6472,748.215 327.79438,748.21501 327.79439,663.36218 z");
tr.select("#f6").attr("d","M 242.35283,748.21501 157.50002,663.36218 72.647198,748.21499 z");
tr.select("#f7").attr("d","M 126.91113,780.06647 242.6472,748.36218 200.63131,822.08236 z");

var tr = tangram.transition().duration(1000).delay(9 * delta);
tr.style("fill","#3923D6");
tr.select("#f1").attr("d","M 230.72265,728.6566 400.42825,558.95092 400.42825,728.6566 z");
tr.select("#f2").attr("d","M 230.72265,898.3622 400.42825,728.6566 230.72265,728.6566 z");
tr.select("#f3").attr("d","M 265.72265,458.36218 385.72265,458.36218 445.72265,518.36218 325.72265,518.36218 z");
tr.select("#f4").attr("d","M 350.72265,898.3622 350.72265,778.3622 410.72265,838.3622 z");
tr.select("#f5").attr("d","M 485.27735,518.46688 485.27735,603.3197 400.42455,603.31971 400.42455,518.46688 z");
tr.select("#f6").attr("d","M 230.72265,898.3622 350.72265,898.3622 350.72265,778.3622 z");
tr.select("#f7").attr("d","M 400.42575,808.3466 400.42575,688.3466 460.42575,748.3466 z");

var tr = tangram.transition().duration(1000).delay(10 * delta);
tr.style("fill","#62D0FF");
tr.select("#f1").attr("d","M 235.7208,501.87733 405.4264,671.58296 235.7208,671.58296 z");
tr.select("#f2").attr("d","M 405.4264,841.28859 235.7208,671.58296 405.4264,671.58296 z");
tr.select("#f3").attr("d","M 585.4264,901.2886 465.4264,901.2886 405.4264,841.28859 525.4264,841.28859 z");
tr.select("#f4").attr("d","M 150.57359,536.28859 235.4264,451.43578 235.4264,536.28859 z");
tr.select("#f5").attr("d","M 320.5748,756.43702 380.5748,816.43702 320.5748,876.437 260.5748,816.43702 z");
tr.select("#f6").attr("d","M 465.4264,901.2886 380.5736,816.43578 295.7208,901.2886 z");
tr.select("#f7").attr("d","M 235.7208,601.58296 235.7208,721.58296 175.7208,661.58296 z");

var tr = tangram.transition().duration(1000).delay(11 * delta);
tr.style("fill","#59955C");
tr.select("#f1").attr("d","M 185,703.82707 425,703.82707 305,823.82707 z");
tr.select("#f2").attr("d","M 545,823.82707 305,823.82707 425,703.82707 z");
tr.select("#f3").attr("d","M 354.70562,618.97425 269.85281,703.82707 185,703.82707 269.85281,618.97425 z");
tr.select("#f4").attr("d","M 495,927.75011 435,823.82707 516.96152,845.78859 z");
tr.select("#f5").attr("d","M 354.85282,533.97424 354.85282,618.82706 270,618.82707 270.00001,533.97424 z");
tr.select("#f6").attr("d","M 355,533.82707 270.14719,448.97426 185.29438,533.82707 z");
tr.select("#f7").attr("d","M 220.14719,908.67988 305,823.82707 305,908.67988 z");

var tr = tangram.transition().duration(1000).delay(12  * delta);
tr.style("fill","#FF62B0");
tr.select("#f1").attr("d","M 250.29443,744.77255 420.00006,575.06692 250.29444,575.06692 z");
tr.select("#f2").attr("d","M 250.29443,575.06693 250.29443,815.0669 130.29443,695.06693 z");
tr.select("#f3").attr("d","M 331.41738,695.06691 416.27019,779.91981 501.123,779.91981 416.27019,695.06691 z");
tr.select("#f4").attr("d","M 200.87468,764.82038 285.7275,849.6732 200.87469,849.6732 z");
tr.select("#f5").attr("d","M 504.85288,571.05117 504.85288,655.90399 420.00006,655.90399 420.00007,571.05117 z");
tr.select("#f6").attr("d","M 300.00006,695.06691 420.00006,695.06691 420.00006,575.06692 z");
tr.select("#f7").attr("d","M 504.85288,571.05117 589.70557,655.90407 504.85288,655.90407 z");

var tr = tangram.transition().duration(1000).delay(13  * delta);
tr.style("fill","#1FCB4A");
tr.select("#f1").attr("d","M 327.75574,567.03918 327.75574,807.03919 447.75574,687.03919 z");
tr.select("#f2").attr("d","M 327.75574,567.03918 327.75574,807.03918 207.75574,687.03918 z");
tr.select("#f3").attr("d","M 382.77029,753.06281 351.71193,868.97394 394.13833,942.4586 425.19669,826.54749 z");
tr.select("#f4").attr("d","M 256.88959,640.52386 140.9785,609.46559 214.46319,567.03918 z");
tr.select("#f5").attr("d","M 567.02151,686.95453 507.0215,746.95454 447.02148,686.95454 507.0215,626.95454 z");
tr.select("#f6").attr("d","M 380.53705,620.18879 440.53705,516.26574 336.61401,456.26574 z");
tr.select("#f7").attr("d","M 152.9665,795.34613 256.88959,735.34627 234.92811,817.30768 z");

var tr = tangram.transition().duration(1000).delay(14 * delta);
tr.style("fill","#62D0FF");
tr.select("#f1").attr("d","M 354.41187,534.36215 354.41187,774.3622 474.4119,654.36216 z");
tr.select("#f2").attr("d","M 354.41187,534.36215 354.41187,774.3622 234.41187,654.36215 z");
tr.select("#f3").attr("d","M 389.58808,739.186 509.5881,739.1859 569.5881,799.1859 449.5881,799.186 z");
tr.select("#f4").attr("d","M 174.41837,714.3487 174.41837,594.34869 234.41836,654.34869 z");
tr.select("#f5").attr("d","M 294.41188,594.36214 234.41187,654.36215 174.41187,594.36215 234.41187,534.36214 z");
tr.select("#f6").attr("d","M 559.2937,739.186 474.4409,654.33315 389.58808,739.186 z");
tr.select("#f7").attr("d","M 414.41193,834.3622 294.41196,834.3621 354.41187,774.3622 z");

var tr = tangram.transition().duration(1000).delay(15 * delta);
tr.style("fill","#03EBA6");
tr.select("#f1").attr("d","M 393.85215,588.08659 393.85212,828.08659 513.85211,708.08656 z");
tr.select("#f2").attr("d","M 344.13991,877.79099 513.84554,708.08533 513.84551,877.79099 z");
tr.select("#f3").attr("d","M 224.14393,672.93695 308.99932,588.08659 393.85212,588.08914 308.99673,672.93951 z");
tr.select("#f4").attr("d","M 284.14635,492.93337 284.14635,612.93337 224.14636,552.93337 z");
tr.select("#f5").attr("d","M 284.14789,612.93559 224.14789,672.9356 164.14789,612.9356 224.14789,552.93559 z");
tr.select("#f6").attr("d","M 393.85212,588.08659 308.99931,672.93941 393.85211,757.79222 z");
tr.select("#f7").attr("d","M 164.15046,612.93398 164.15061,492.93398 224.15052,552.93388 z");

var tr = tangram.transition().duration(1000).delay(16 * delta);
tr.style("fill","#B6BA18");
tr.select("#f1").attr("d","M 345.31598,618.55491 441.2499,838.54729 503.2792,680.58411 z");
tr.select("#f2").attr("d","M 413.15153,774.11305 189.75779,686.39053 345.31596,618.55494 z");
tr.select("#f3").attr("d","M 542.7061,866.16299 556.16,746.91955 503.2652,680.57097 489.8112,799.8144 z");
tr.select("#f4").attr("d","M 369.29025,885.8098 413.15153,774.11305 447.0693,851.89209 z");
tr.select("#f5").attr("d","M 345.31596,618.55491 267.53688,652.47272 233.61909,574.69365 311.39815,540.77584 z");
tr.select("#f6").attr("d","M 311.39815,540.77584 199.70129,496.91457 155.84001,608.61142 z");
tr.select("#f7").attr("d","M 237.7248,796.38673 189.75793,686.39046 268.73941,717.40501 z");

var tr = tangram.transition().duration(1000).delay(17 * delta);
tr.style("fill","#2966B8");
tr.select("#f1").attr("d","M 424.99922,670.65898 255.29372,840.36447 255.29359,670.65898 z");
tr.select("#f2").attr("d","M 424.99922,670.65898 184.99914,670.65887 304.99923,550.65885 z");
tr.select("#f3").attr("d","M 364.99723,610.65697 365.00089,490.65684 425.00266,430.65872 424.99918,550.65881 z");
tr.select("#f4").attr("d","M 281.86842,933.7896 281.86836,813.78967 221.86842,873.78958 z");
tr.select("#f5").attr("d","M 484.99911,610.65887 424.99922,670.65898 364.99913,610.65887 424.9991,550.65889 z");
tr.select("#f6").attr("d","M 425.00084,430.65689 425.00085,550.65689 545.0009,550.65693 z");
tr.select("#f7").attr("d","M 340.14656,992.0675 255.29362,907.21478 255.29363,992.0675 z");

var tr = tangram.transition().duration(1000).delay(18  * delta);
tr.style("fill","#03EBA6");
tr.select("#f1").attr("d","M 352.00001,653.93498 182.29452,823.64048 182.29439,653.93498 z");
tr.select("#f2").attr("d","M 521.7056,823.64068 352.00001,653.93498 521.7058,653.93498 z");
tr.select("#f3").attr("d","M 182.2917,653.93498 97.4414,738.79038 97.444,823.64318 182.29439,738.78788 z");
tr.select("#f4").attr("d","M 606.5586,738.78768 521.7058,653.93498 521.7058,738.78768 z");
tr.select("#f5").attr("d","M 412.0026,713.93508 352.00268,773.93518 292.00261,713.93508 352.00256,653.93498 z");
tr.select("#f6").attr("d","M 436.8533,653.93398 352.00049,569.08118 267.14761,653.93388 z");
tr.select("#f7").attr("d","M 521.7057,738.78768 606.5586,823.64048 606.5586,738.78768 z");

var tr = tangram.transition().duration(1000).delay(19  * delta);
tr.style("fill","#645452");
tr.select("#f1").attr("d","M 237,569.36218 477,569.36218 357,689.36218 z");
tr.select("#f2").attr("d","M 237,809.36218 237,569.36218 357,689.36218 z");
tr.select("#f3").attr("d","M 477,569.36218 477,689.36218 417,749.36218 417,629.36218 z");
tr.select("#f4").attr("d","M 417,629.36218 417,749.36218 357,689.36218 z");
tr.select("#f5").attr("d","M 357,689.36218 417,749.36218 357,809.36219 297,749.36218 z");
tr.select("#f6").attr("d","M 357,809.36218 477,809.36218 477,689.36218 z");
tr.select("#f7").attr("d","M 357,809.36218 237,809.36218 297,749.36218 z");

style.css

body {
  background-color: #ddd;
}

#box {
    margin: 0 auto;
    width: 700px;
    height: 700px;
}
svg {
    width: 700px;
    height: 700px;
}
path {
    stroke: #fff;
    stroke-width: 1px;
}
#f1 {
    opacity: 1;
}
#f2 {
    opacity: 0.9;
}
#f3 {
    opacity: 0.8;
}
#f4 {
    opacity: 0.7;
}
#f5 {
    opacity: 0.6;
}
#f6 {
    opacity: 0.5;
}
#f7 {
    opacity: 0.4;
}