<span class="corner">art: @abbysyukri</span>
<div class="wrap">
<div class="ttl"><span class="bold">STEPHEN</span><br>HAWKING</div>
<svg width="720px" height="720px" viewBox="0 0 720 720" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect fill="#9FCEE0" x="0" y="0" width="720" height="720"></rect>
<polygon id="Path-83" fill="#FFFFFF" points="359.057617 104.171875 355.647461 118.064453 380.901367 105.818359"></polygon>
<polygon id="Path-82" fill="#FFFFFF" points="248.413086 103.148438 224.412109 132.87793 213.927734 132.87793 206.337891 143.989258 209.054688 226.119141 345.625977 132.87793 354.999023 103.148438"></polygon>
<polygon id="Path-81" fill="#F2E5D3" points="206.206055 190.612305 252.407227 144.649414 252.407227 125.956055 299.168945 107.337891 307.619141 96.9658203 334.485352 88.7138672 342.092773 82.1982422 269.810547 102.818359 206.206055 157.634766"></polygon>
<polygon id="Path-80" fill="#5F3E87" points="350.292969 119.5625 248.064453 155.413086 216.894531 186.249023 213.202148 170.290039 252.15332 137.457031 326.571289 114.960938"></polygon>
<polygon id="Path-79" fill="#1B9262" points="387.723633 145.417969 349.429688 175.193359 314.517578 175.193359 321.589844 139.851562 306.124023 134.209961 267.974609 157.790039 267.974609 277.194336 319.007812 273.301758 408.555664 159.078125"></polygon>
<polygon id="Path-78" fill="#AF4B45" points="199.579102 241.021484 281.506836 269.503906 280.150391 196.186523 275.574219 193.37793 272.369141 169.50293 296.689453 153.085938 296.689453 142.204102 315.760742 137.710938 318.700195 129.84375 258.986328 151.352539 246.612305 151.317383 215.669922 180.527344 219.692383 196.186523"></polygon>
<polygon id="Path-77" fill="#E05A81" points="260.022461 159.766602 228.583008 174.003906 231.058594 253.581055 242.697266 280.453125 268.413086 267.240234 258.250977 217.78125 240.390625 193.972656"></polygon>
<polygon id="Path-76" fill="#B0BE43" points="315.949219 138.114258 368.568359 122.165039 342.258789 150.132812 333.007812 150.132812 313.15625 179.853516 302.144531 178.283203"></polygon>
<polygon id="Path-75" fill="#E05A81" points="305.668945 172.482422 289.542969 178.989258 275.879883 203.230469 301.151367 194.43457"></polygon>
<polygon id="Path-74" fill="#7D2B51" points="267.730469 214.732422 306.113281 197.115234 337.022461 150.224609 328.398438 150.224609 316.300781 168.116211 302.376465 173.166992 296.766602 191.507812 280.158203 195.248047"></polygon>
<polygon id="Path-73" fill="#7D2B51" points="211.518555 263.265625 223.732422 214.734375 245.429688 271.987305 275.231445 243.36084 324.430664 292.00293 333.052734 320.798828 291.421875 286.275391 276.601562 292.00293 304.868164 346.650391 297.015625 382.879883 241.676758 370.697266 241.676758 331.047852"></polygon>
<polygon id="Path-72" fill="#1B9262" points="215.542969 247.672852 231.992188 255.035156 230.558594 232.643555 223.767578 213.597656"></polygon>
<polygon id="Path-71" fill="#312D2E" points="239.84375 315.00293 272.368164 307.780273 291.647461 337.566406 291.647461 381.020508 305.451172 381.020508 313.496094 342.384766 327.450195 326.496094 298.348633 299.21875 308.923828 278.775391 291.647461 286.057617 298.348633 290.896484 293.230469 296.386719 281.745117 289.629883 239.84375 307.780273"></polygon>
<polygon id="Path-70" fill="#AF4B45" points="469.836914 473.267578 458.567383 468.416016 356.826172 498.686523 388.724609 580.480469"></polygon>
<polygon id="Path-69" fill="#312D2E" points="526.03418 552.269531 530.90625 552.269531 530.90625 626.792969 482.952148 586.268555"></polygon>
<polygon id="Path-68" fill="#5F3E87" points="409.322266 636.796875 515.414062 580.282227 529.496094 545.888672 460.501953 572.848633"></polygon>
<polygon id="Path-67" fill="#FFFFFF" points="388.46582 593.144531 448.192383 591.777344 453.699219 528.810547 427.807617 522.989258 377.65918 570.59375"></polygon>
<polygon id="Path-66" fill="#1B9262" points="443.43457 514.794922 436.998047 512.915039 377.318359 566.888672 385.298828 584.800781 420.730469 584.800781 420.730469 570.463867 434.378906 528.645508"></polygon>
<polygon id="Path-65" fill="#7D2B51" points="440.823242 513.963867 431.645508 525.243164 431.645508 571.303711 446.233398 592.263672 457.135742 590.706055 527.198242 551.113281 534.079102 536.647461"></polygon>
<polygon id="Path-64" fill="#E05A81" points="370.930664 403.743164 382.508789 432.146484 437.358398 417.944824 488.27832 456.15918 455.574219 477.74707 358.438477 467.644531 352.636719 398.048828"></polygon>
<polygon id="Path-63" fill="#5F3E87" points="181.53418 384.767578 191.602539 375.207031 246.512695 368.384766 303.431641 378.618164 366.233398 420.68457 393.177734 460.685547 432.94043 456.862305 465.301758 471.554688 423.871094 499.149414 357.766602 499.149414 269.135742 433.76709 246.512695 426.631836 225.428711 398.667969"></polygon>
<polygon id="Path-62" fill="#312D2E" points="246.848633 426.707031 264.457031 426.707031 314.8125 382.268555 331.302734 384.613281 334.973633 395.356445 367.848633 409.441406 364.594727 431.050781 396.422852 629.558594 274.572266 442.326172 264.457031 438.037109 255.494141 438.037109"></polygon>
<polygon id="Path-61" fill="#5F3E87" points="333.43457 408.750977 330.222656 415.645508 337.076172 425.719727 347.428711 424.033203 350.933594 412.679688 342.350586 406.19043"></polygon>
<polygon id="Path-60" fill="#FFFFFF" points="328.256836 325.90332 342.697266 325.90332 363.954102 345.123047 379.351562 345.123047 401.544922 313.932617 348.821289 319.585938 328.256836 315.365234"></polygon>
<polygon id="Path-59" fill="#D39694" points="362.212891 342.201172 376.817383 322.625977 342.179688 322.625977 328.93457 339.800781"></polygon>
<polygon id="Path-58" fill="#5F3E87" points="322.834961 322.824219 322.834961 331.954102 310.425781 348.270508 370.634766 348.270508 370.634766 343.295898 350.066406 334.269531 332.837891 334.269531 332.837891 331.954102"></polygon>
<polygon id="Path-57" fill="#7D2B51" points="312.142578 344.396484 370.348633 344.396484 370.348633 358.833984 324.24707 358.833984 324.446289 383.493164 315.021484 382.592773 302.234375 392.983398"></polygon>
<polygon id="Path-56" fill="#FFFFFF" points="311.430664 321.174805 316.678711 331.879883 309.15625 344.174805 298.498047 396.231445 307.681641 388.417969 315.40332 344.174805 323.341797 336.900391 323.341797 328.277344 313.167969 316.795898"></polygon>
<polygon id="Path-55" fill="#B0BE43" points="308.772461 312.695312 304.483398 328.839844 310.639648 332.775391 313.088867 316.96582"></polygon>
<polygon id="Path-53" fill="#FFFFFF" points="497.500977 259.980469 512.672852 304.477539 512.672852 328.128906 529.164062 369.675781 527.34375 376.443359 487.621094 320.264648 463.405273 309.301758 479.241211 334.067383 442.991211 337.400391 402.104492 250.149414 444.804688 246.766602 465.634277 276.083984 489.349609 264.974609 489.349609 258.298828"></polygon>
<polygon id="Path-54" fill="#F2E5D3" points="424.167969 256.527344 431.261719 254.416016 429.860352 247.637695 406.333984 247.637695 413.788086 256.527344"></polygon>
<polygon id="Path-52" fill="#B0BE43" points="520.576172 237.466797 496.553711 237.466797 496.553711 244.539062 520.576172 244.539062"></polygon>
<polygon id="Path-51" fill="#FFFFFF" points="519.078125 237.678711 519.078125 274.398438 509.044922 286.716797 523.241211 279.552734 526.083008 237.678711"></polygon>
<polygon id="Path-50" fill="#F2E5D3" points="443.759766 111.84082 475.698242 158.042969 472.737305 258.223633 497.513672 261.408203 500.289062 184.931641 475.698242 147.825195 479.467773 141.329102"></polygon>
<polygon id="Path-49" fill="#FFFFFF" points="423.724609 211.795898 492.367188 211.795898 476.050781 165.685547 460.09668 145.186523 437.550781 145.186523 448.15625 191.155273"></polygon>
<polygon id="Path-48" fill="#D39694" points="302.914062 271.603516 334.463867 246.177734 309.43457 220.246094 381.249023 159.169922 408.75293 158.299805 397.822266 201.574219 375.753906 212.662109 410.355469 261.087891 410.355469 295.501953 402.77832 314.537109 374.902344 324.02832 382.960938 314.537109 382.960938 293.121094 370.885742 302.735352 358.160156 302.735352 370.885742 290.671875 372.244141 279.709961 362.27832 281.383789 334.463867 302.735352"></polygon>
<polygon id="Path-47" fill="#B0BE43" points="407.625 159.511719 441.602539 179.709961 397.866211 201.521484 411.332031 228.282227 460.807617 213.415039 481.799805 222.958984 428.233398 246.633789 350.264648 259.951172 354.46875 240.99707 383.742188 239.303711 378.496094 231.751953 346.886719 224.62207 397.208008 201.43457 382.425781 169.899414"></polygon>
<polygon id="Path-46" fill="#B0BE43" points="441.774414 272.706055 432.53125 264.205078 419.862305 277.5 439.121094 317.59082 432.53125 325.505859 415.481445 325.505859 405.023438 340.623047 401.270508 313.96875 409.496094 293.072266 409.496094 265.941406 439.121094 260.057617"></polygon>
<polygon id="Path-45" fill="#F2E5D3" points="447.117188 283.488281 450.50293 292.293945 469.583984 303.899414 461.079102 292.293945 477.823242 296.338867 464.896484 285.424805"></polygon>
<polygon id="Path-44" fill="#D39694" points="417.897461 249.227539 427.813477 249.227539 429.208008 254.957031 438.9375 253.457031 447.614258 268.641602 445.054688 268.641602 454.832031 284.587891 469.739258 289.986328 483.529297 276.952148 483.529297 272.306641 493.845703 266.912109 492.05957 256.755859 484.854492 256.755859 484.854492 264.549805 466.716797 261.628906 447.614258 242.796875 417.897461 242.796875"></polygon>
<polygon id="Path-43" fill="#1B9262" points="456.390625 225.748047 477.481445 220.84668 495.183594 227.823242 491.231445 230.165039 493.182617 257.295898 467.881836 252.367188 441.827148 266.796875 437.240234 242.496094"></polygon>
<polygon id="Path-42" fill="#FFFFFF" points="464.080078 248.133789 484.316406 253.499023 481.395508 242.048828"></polygon>
<polygon id="Path-41" fill="#B0BE43" points="463.806641 238.646484 454.381836 247.131836 457.430664 252.773438 469.849609 247.131836 482.791992 247.131836 480.9375 238.646484"></polygon>
<polygon id="Path-40" fill="#5F3E87" points="432.65625 254.847656 437.862305 253.248047 448.381836 242.328125 478.832031 230.161133 469.598633 223.629883 455.744141 225.375 440.160156 236.787109 429.529297 234.001953"></polygon>
<polygon id="Path-39" fill="#B0BE43" points="474.198242 278.303711 480.316406 280.410156 471.099609 288.541992 463.56543 283.422852 461.941406 278.303711"></polygon>
<polygon id="Path-38" fill="#E05A81" points="462.092773 256.183594 457.766602 252.829102 447.166992 257.954102 447.166992 265.614258 468.058594 270.78418 470.435547 274.34668 462.092773 276.125 454.611328 272.427734 454.611328 276.125 462.092773 278.980469 474.314453 278.980469 477.876953 264.02832 456.001953 264.02832 453.22168 257.954102"></polygon>
<polygon id="Path-37" fill="#5F3E87" points="389.951172 251.229492 375.796875 251.229492 370.566406 243.128906 368.293945 248.761719 359.320312 248.761719 342.488281 255.979492 330.560547 274.983398"></polygon>
<polygon id="Path-36" fill="#B0BE43" points="383.075195 314.388672 375.833984 323.936523 341.367188 323.936523 333.067383 311.15625 348.186523 311.15625 348.186523 314.388672"></polygon>
<polygon id="Path-35" fill="#AF4B45" points="348.322266 253.785156 339.328125 267.145508 334.69043 299.874023 360.295898 280.027344 366.724609 280.027344 353.446289 291.989258 362.458008 300.232422 376.785156 301.091797 366.724609 311.899414 330.03125 311.899414 325.78125 290.849609 327.30957 280.027344 317.474609 278.742188 337.224609 255.808594"></polygon>
<polygon id="Path-34" fill="#B0BE43" points="349.692383 288.404297 360.602539 280.179688 371.05957 278.173828 366.957031 274.320312 357.341797 276.473633 351.390625 281.362305"></polygon>
<polygon id="Path-33" fill="#1B9262" points="351.736328 307.186523 367.65625 305.143555 369.59375 300.162109 360.665039 300.162109"></polygon>
<polygon id="Path-32" fill="#E05A81" points="393.891602 253.97168 393.891602 276.459961 370.889648 280.262695 370.889648 293.226562 412.124023 280.262695 410.625977 263.525391"></polygon>
<polygon id="Path-31" fill="#7D2B51" points="361.99707 267.774414 393.646484 262.724609 410.092773 276.129883 408.641602 262.724609 395.382812 254.97168"></polygon>
<polygon id="Path-30" fill="#5F3E87" points="393.707031 276.203125 393.707031 282.145508 364.464844 280.06543"></polygon>
<polygon id="Path-28" fill="#312D2E" points="408.726562 273.205078 397.087891 295.303711 410.50293 295.303711 415.920898 289.555664 415.920898 267.111328 437.388672 262.099609 443.761719 281.384766 461.597656 294.266602 441.433845 262.652443 439.766602 257.859375 408.893555 263.828125"></polygon>
<polygon id="Path-27" fill="#D39694" points="439.905273 256.732422 444.329102 248.207031 456.862305 239.537109 491.779297 229.448242 513.075195 229.448242 518.387695 239.537109 530.873047 239.537109 530.873047 233.307617 520.379883 233.307617 514.494141 225.966797 479.599609 227.492188 445.96875 241.349609 438.208008 250.163086"></polygon>
<polygon id="Path-26" fill="#7D2B51" points="447.270508 268.991211 464.602539 272.073242 473.245117 270.532227 478.511719 263.196289 465.944336 261.414062 447.270508 264.900391"></polygon>
<polygon id="Path-25" fill="#5F3E87" points="463.799805 271.524414 463.799805 266.018555 455.695312 266.018555 455.453125 270.254883"></polygon>
<polygon id="Path-24" fill="#1B9262" points="328.956055 293.114258 330.496094 303.551758 341.128906 322.666016 375.550781 322.666016 401.570312 313.332031 408.413086 294.683594 408.413086 267.075195 397.916016 256.949219 366.708984 267.075195 337.856445 273.001953 338.22168 267.87207 389.853516 251.03418 373.660156 225.296875 383.724609 227.364258 397.741211 245.845703 410.795898 245.174805 404.393555 229.792969 411.332031 228.130859 418.870117 243.151367 419.865234 254.956055 423.124023 256.93457 409.983398 260.955078 412.553711 291.326172 403.350586 316.453125 377.790039 325.324219 338.959961 325.324219 330.496094 316.453125 323.737305 291.326172"></polygon>
<polygon id="Path-29" fill="#312D2E" points="412.226562 259.904297 405.063477 250.712891 389.488281 250.712891 389.488281 253.145508 402.988281 253.145508 409.736328 261.421875"></polygon>
<polygon id="Path-23" fill="#B0BE43" points="314.820312 286.558594 314.820312 290.570312 329.514648 293.242188 330.942383 282.441406 338.400391 272.604492 338.400391 267.348633 330.942383 271.338867 324.189453 286.558594"></polygon>
<polygon id="Path-22" fill="#7D2B51" points="358.836914 296.755859 349.203125 288.62793 335.100586 299.482422 335.100586 305.750977 349.203125 308.311523 379.139648 291.303711 379.139648 286.96582 363.84082 292.591797"></polygon>
<polygon id="Path-21" fill="#E05A81" points="359.056641 296.433594 353.404297 291.577148 339.760742 302.157227 351.423828 302.157227"></polygon>
<polygon id="Path-20" fill="#FFFFFF" points="516.599609 414.030273 511.491211 433.134766 438.452148 414.030273 438.452148 348.023438 486.600586 346.702148 510.890625 360.978516 510.760742 386.280273 518.335938 389.918457 527.795898 408.736328 526.356445 414.030273 504.196289 404.274414 504.196289 414.030273"></polygon>
<polygon id="Path-19" fill="#1B9262" points="486.294922 386.229492 474.411133 391.610352 443.499023 395.429688 423.020508 405.983398 427.819336 425.708008 442.173828 434.611328 409.723633 444.662109 409.723633 452.273438 456.143555 448.173828 484.737305 458.603516 513.612305 439.461914 479.942383 420.9375 502.570312 413.545898 502.570312 387.876953"></polygon>
<polygon id="Path-16" fill="#B0BE43" points="442.169922 434.148438 479.364258 421.464844 524.541016 431.637695 506.957031 444.136719 454.220703 442.507812"></polygon>
<polygon id="Path-15" fill="#E05A81" points="490.140625 387.383789 504.331055 387.383789 504.331055 405.179688 463.865234 406.15625 490.140625 393.929688"></polygon>
<polygon id="Path-13" fill="#B0BE43" points="387.899414 383.919922 410.360352 393.505859 447.696289 388.818359 447.696289 393.505859 472.72168 392.105469 480.210938 388.818359 480.210938 393.505859 462.291992 400.060547 442.941406 395.213867 434.772949 400.060547 430.874023 425.369141 384.390625 438.164062 379.388672 424.75 395.412109 418.200195 380.337891 397.335938"></polygon>
<polygon id="Path-17" fill="#E05A81" points="381.294922 400.070312 395.460938 417.662109 405.716797 400.733398 382.175781 397.204102"></polygon>
<polygon id="Path-18" fill="#F2E5D3" points="395.927734 417.283203 407.775391 417.283203 409.244141 412.113281 400.865234 407.758789"></polygon>
<polygon id="Path-14" fill="#D39694" points="408.262695 416.237305 408.262695 407.530273 430.685547 407.834961 435.750977 403.328125 441.52832 406.176758 504.170898 404.952148 504.170898 413.363281 471.31543 413.363281 429.111328 425.595703"></polygon>
<polygon id="Path-12" fill="#312D2E" points="400.850586 407.569336 409.02832 412.316406 410.887695 408.666016 444.958008 388.117188 495.712891 379.897461 511.250977 386.208984 511.250977 377.600586 482.775391 370.860352 444.958008 377.600586 406.754883 398.271484"></polygon>
<polygon id="Path-11" fill="#AF4B45" points="405.116211 400.186523 410.716797 390.31543 448.232422 372.733398 463.583008 372.733398 486.916016 364.554688 511.199219 375.662109 511.199219 379.110352 499.967773 379.110352 483.890625 372.733398 463.583008 379.110352 448.232422 379.110352 413.208984 402.360352"></polygon>
<polygon id="Path-10" fill="#E05A81" points="415.251953 382.991211 448.388672 372.701172 414.452148 395.741211 409.392578 392.567383"></polygon>
<polygon id="Path-9" fill="#1B9262" points="474.203125 327.249023 476.231445 325.625977 463.056641 308.852539 463.056641 312.546875"></polygon>
<polygon id="Path-8" fill="#D39694" points="470.15332 331.115234 475.310547 325.99707 502.317383 347.923828 483.482422 346.466797"></polygon>
<polygon id="Path-7" fill="#F2E5D3" points="436.441406 311.553711 432.224609 326.739258 434.333008 332.797852 408.003906 355.729492 405.383789 368.40332 420.912598 381.230469 449.324219 372.688477 441.327148 365.422852 453.924805 342.195312"></polygon>
<polygon id="Path-6" fill="#B0BE43" points="463.307617 322.686523 451.926758 333.113281 445.224609 333.113281 431.026367 367.810547 455.857422 367.810547 468.283203 361.060547 463.307617 349.182617 468.283203 346.586914 457.356445 346.102539 474.918945 336.521484"></polygon>
<polygon id="Path-5" fill="#1B9262" points="428.959961 325.418945 416.383789 325.418945 411.46582 341.116211 414.868164 345.933594 461.115234 345.933594 457.020508 360.272461 436.290527 360.272461 444.530273 367.882812 430.786133 367.882812 417.835938 356.780273 402.871094 356.780273 378.62207 404.556641 355.570312 404.556641 335.041992 395.621094 331.089844 384.600586 324.453125 383.865234 324.051758 358.90332 351.717773 358.578125 346.708008 363.676758 384.213867 381.307617 416.383789 315.551758"></polygon>
<polygon id="Path-4" fill="#E05A81" points="451.912109 354.958984 456.155273 351.182617 444.493164 342.72168 423.709961 342.72168 414.576172 345.009766 406.660156 335.861328 404.357422 340.685547 410.099609 351.182617 417.994141 357.308594 433.541016 357.308594 441.458984 351.182617"></polygon>
<polygon id="Path-3" fill="#D39694" points="447.837891 332.875977 457.011719 346.525391 455.761719 352.03418 449.71875 351.863281 444.790039 348.268555 432.047852 348.268555 432.047852 353.425781 418.554688 353.425781 414.860352 345.079102 432.047852 332.875977"></polygon>
<polygon id="Path-2" fill="#312D2E" points="463.19043 342.748047 471.800781 338.152344 469.349609 333.59668 463.19043 338.172363"></polygon>
<polygon id="Path" fill="#312D2E" points="423.693359 348.433594 445.150391 348.433594 439.943359 341.322266 427.013672 341.322266"></polygon>
</g>
</svg>
</div>
body {
background-color: #9FCEE0;
color: #312D2E;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
width: 100vmin;
height: 100vmin;
margin: -50vmin 0 0 -50vmin;
}
svg {
width: 100%;
height: 100%;
}
polygon, .ttl {
opacity: 0;
transform: scale(0.8) rotate(-10deg);
transform-origin: 25% 25%;
animation: poly 1s cubic-bezier(.25,.7,.4,1) forwards;
}
polygon:nth-of-type(2n) {
transform-origin: 75% 75%;
animation-duration: 2.5s
}
.corner {
position: absolute;
z-index: 1;
right: 15px;
bottom: 15px;
opacity: .3;
}
.ttl {
position: absolute;
top: 61%;
left: 30%;
font-size: 2vmin;
text-align: right;
text-shadow: -1px 1px #9FCEE0, 1px 1px #9FCEE0, -1px -1px #9FCEE0, 1px -1px #9FCEE0;
animation-delay: 5s;
}
.bold {
font-size: 4vmin;
font-weight: 700;
}
@keyframes poly {
0% {transform: scale(0.8) rotate(-10deg); opacity: 0}
100% {transform: translate3d(0,0,0); opacity: 1}
}
@for $i from 1 through 83 {
polygon:nth-of-type(#{$i}) {
animation-delay: #{(83 - $i) * 50 + 500}ms
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.