Black Mirror title animation
<svg viewBox="0 0 800 800">
<defs>
<text id="title" fill="#bfbfc8" font-size="60" font-weight="bold" letter-spacing="2" font-family="Familjen Grotesk">
BLACK MIRROR
</text>
<filter id="blur" width="1.0112729" height="1.1185185" x="-0.0056364482" y="-0.059259259" color-interpolation-filters="sRGB">
<feGaussianBlur id="feGaussianBlur119" stdDeviation="1 1" result="blur" />
</filter>
</defs>
<g id="title-text" filter="url(#blur)">
<use id="title-left" x="195.3" y="421.1" xlink:href="#title" />
<use id="title-middle" x="195.3" y="421.1" xlink:href="#title" />
<use id="title-right" x="195.3" y="421.1" xlink:href="#title" />
</g>
<g id="crack" opacity="0">
<path fill="none" stroke="#f2f2f2" stroke-width="0.0967312" d="m 754.07875,539.71842 c -3.69792,-1.31368 -15.15169,-6.14702 -21.19332,-8.79913" />
<path fill="none" stroke="#ffffff" stroke-width="0.18" d="m 770.76967,547.26354 -16.59358,-7.47881" />
<path fill="none" stroke="#f2f2f2" stroke-width="0.1" d="m 801.03572,561.39752 c -3.55723,-1.88939 -25.10819,-11.22235 -30.29136,-14.16331" />
<path fill="none" stroke="#ffffff" d="m 834.1236,576.56477 c 0.051,0.27936 -32.90392,-14.95139 -33.04074,-15.15741" />
<path fill="#545b60" d="m 420.01642,391.18253 -3.29962,-1.28008 0.22642,0.13143 1.66871,0.69304 z" />
<path fill="#434343" d="m 609.63735,471.06695 -1.70408,-0.83903 c -1.05163,0.044 -7.24953,-2.42305 -7.24953,-2.42305 l -15.62258,-8.60946 3.77589,0.54994 4.75,1.875 6.125,2.8125 4.43681,1.5625 c 2.43019,1.74948 3.82784,1.44385 5.45653,4.01363 z" />
<path fill="#181a19" d="m 566.41129,451.14811 18.67189,8.10237 4.14846,0.42375 -10.40267,-4.65338 -8.33762,-3.21998 -4.42744,-1.55256 z" />
<path fill="#5d6560" d="m 561.68103,454.10771 -1.04269,-2.55746 -6.7027,-5.45505 -3.31655,-1.73405 0.23783,-0.78915 12.51209,4.68565 2.12663,1.25154 -1.09957,-0.16163 -1.06269,0.20043 -1.15415,-0.80413 -2.17156,0.33527 -0.12009,0.92195 3.23758,2.25463 z" />
<path fill="none" stroke-width="0.1" d="m 691.4264,517.89975 c -3.55723,-1.88939 -17.25763,-9.75744 -22.4408,-12.6984" />
<path fill="none" stroke-width="0.18" d="m 707.10399,527.33945 c -3.4553,-2.13201 -10.9408,-6.65111 -16.12397,-9.59207" />
<path fill="none" stroke-width="0.1" d="m 735.82031,545.8878 c -3.55723,-1.88939 -23.54422,-15.59643 -28.72739,-18.53739" />
<path fill="none" stroke-width="0.2" d="m 765.45665,562.19213 c -4.98529,-1.67302 -24.45299,-13.25961 -29.63616,-16.20057" />
<path fill="#17171a" d="m 610.255,479.53412 4.10002,-0.10003 2.01033,-0.41946 -2.41564,-1.07902 -3.09475,0.59846 z" />
<path fill="#3a3a3b" d="m 610.84637,477.38456 4.48446,0.23088 c -2.42732,-1.34888 -4.12892,-3.0526 -5.28779,-5.36465 l -0.56734,-0.75521 z" />
<path fill="#4c4c4d" d="m 606.88289,480.96616 -0.0878,3.76817 -1.43642,1.25699 6.61909,1.29626 6.52021,1.65535 -0.16678,-1.5816 -3.30152,-0.65537 c 0,0 -3.23132,-1.49418 -2.88468,-1.54601 3.95287,-0.59105 -1.40234,-2.69105 -1.76797,-2.60668 z" />
<path fill="#616163" d="m 605.08109,479.31234 -2.51013,0.10801 -1.5732,0.22532 -1.75,2.73324 -0.25,0.83333 0.58333,1 c 0,0 0.33334,0.33333 -0.16666,0.41667 -0.5,0.0833 -3.16667,-0.91667 -3.16667,-0.91667 l 0.0833,-1.25 c 0,0 1.25,0.16667 1.41667,0.58333 0.16667,0.41667 0.83333,-3.56514 0.5,-2.89848 -0.33333,0.66667 -1.5,-1.85152 -1.25,-1.35152 0.25,0.5 -1.04443,-2.72943 -1.04443,-2.72943 1.29144,0.49519 4.02348,2.03484 5.29443,2.57953 z" />
<path fill="#191718" d="m 603.51229,486.45302 2.74626,-0.41791 -0.0597,-0.35821 0.95523,-0.65672 -1.55224,-0.95522 -2.44776,0.65672 0.53731,0.71641 z" />
<path fill="#111111" d="m 579.36303,476.82598 12.26098,4.53673 3.27492,1.11105 1.52028,1.11108 0.81882,-0.70185 -2.57307,-1.69594 -3.45017,-0.70185 -7.05605,-2.54824 z" />
<path fill="#2c2c2c" d="m 562.49922,453.78366 c 2.14897,1.84137 6.18477,5.26436 11.50349,8.83272 3.97132,2.66438 9.12807,5.26287 12.20895,8.1382 2.19395,2.04757 6.41582,3.06122 8.56729,4.28424 0.11102,0.8147 3.26698,1.95632 1.06438,1.42435 -0.76281,-0.18423 -7.36564,-1.08376 -8.07536,-1.19811 -0.62819,-0.10123 -3.57144,-2.28489 -3.70017,-2.27325 -2.01056,-0.58669 -10.54818,1.29347 -10.8679,1.26813 -0.39251,-0.42262 -2.55672,-1.04781 -1.05505,-0.8028 l 12.95848,-2.04652 c -5.08679,-4.28527 -16.7963,-11.34973 -23.93754,-17.79484 0.89718,-0.70946 3.17985,-2.20608 3.99219,-2.71418 0.4455,-0.27865 0.60049,0.0633 0.70077,0.0852 0.15378,0.0336 -1.40112,1.13371 -1.26825,1.178 0,0 -1.56768,1.02092 -2.09128,1.61882 z" />
<path fill="#1a1a1a" d="m 573.26671,474.67327 -18.47744,-7.39767 -2.04838,-0.79262 0.31442,-0.54952 -6.17293,-1.24955 0.35355,-1.14904 4.65344,1.55081 7.47184,1.7041 1.43026,1.63187 8.01859,3.33617 3.21921,1.32449 z" />
<path fill="#5d6560" d="m 547.184,463.38954 c 0.82992,-0.88807 6.88803,-4.52569 10.8194,-7.313 0.10989,-0.0779 3.00295,-2.29356 3.14422,-2.46558 l 0.68063,0.61322 c -1.99802,0.94513 -13.58743,9.10934 -13.90457,9.45426 z" />
<path fill="#9d9d9d" d="m 561.47498,452.32441 1.08099,0.0537 0.20171,0.47428 -0.39397,0.78153 -1.01917,-0.84016 0.24666,-0.13727 z" />
<path fill="#373737" d="m 547.19573,463.44411 -0.2334,1.12014 -1.72537,-1.04576 -3.31365,-1.13593 -2.00194,-0.73318 0.75,-0.6875 1.58686,0.79473 z" />
<path fill="#1f1e21" d="m 609.0893,479.85153 2.74111,1.59669 h 4.93402 l -1.82741,1.50277 6.15228,0.65745 -2.80203,-3.47514 z" />
<path fill="#5d5f63" d="m 609.0893,483.18208 1.04743,1.17311 0.2514,0.75421 4.14789,1.34074 4.23158,-0.62839 3.7708,-0.20958 c 0,0 2.6815,1.63408 3.35186,1.5921 0.67032,-0.0418 2.84904,0.0833 2.84904,0.0833 l -6.11707,-2.3883 -1.13127,-0.54464 -3.81263,-0.87985 -1.67593,-0.58652 -3.47756,0.20956 -1.67579,-0.33525 z" />
<path fill="#161616" d="m 626.16815,487.15399 1.87097,0.0645 4.8387,1.09678 11.73243,5.62997 -0.83871,0.32258 -11.73243,-4.98481 -2.64516,-0.45161 z" />
<path fill="#9d9d9d" d="m 546.4498,463.39979 0.53131,0.19924 -0.18264,0.66413 -0.23245,-0.5313 z" />
<path fill="#0d0d0d" d="m 550.95272,444.64707 0.042,-0.99407 -10.58143,-4.1947 z" />
<path fill="#1a1a1a" d="m 525.67718,433.0886 1.92649,1.94934 c -6.69931,-2.02265 -13.43444,-4.4995 -20.04353,-6.89958 l 1.43264,-0.0868 8.84619,2.83915 -11.31911,-6.85096 -0.0331,-0.8176 z m 2.56764,0.46472 -1.31215,1.78177 13.4441,4.10463 -3.16164,-1.69786 -6.22031,-2.68854 z" />
<path fill="#848994" d="m 470.99264,408.7437 c 1.78779,0.04 8.87224,2.42498 12.81,4.38662 2.15101,1.07155 23.20513,10.28489 23.20513,10.28489 0,0 -6.33673,-2.32674 -7.44721,-2.69492 -3.55436,-1.17844 -9.2704,-3.31716 -14.84155,-6.24244 -0.61669,-0.32381 1.30946,1.64226 1.3366,1.78267 0.0348,0.1801 -1.78985,-1.76393 -3.01449,-2.26809 -4.91523,-2.02347 -12.23846,-4.34268 -12.23846,-4.34268 l 2.41316,2.74542 -4.40421,-2.71674 -4.14113,-1.83634 -15.1543,-4.14548 c -2.08245,-1.37783 -2.27191,-2.16853 -4.20706,-3.74333 l 1.50787,0.53514 0.90477,1.26132 3.66387,1.21986 9.6949,1.93913 -0.35548,-3.79689 -4.88505,-3.45498 6.21409,3.35513 0.53727,3.86029 2.07695,1.54673 2.80848,0.58373 0.67708,1.52132 z" />
<path fill="#70747a" d="m 464.88994,416.81601 -13.56991,-4.49146 -3.19255,-1.04009 -3.45353,-1.23425 -3.10811,-0.64974 2.11819,-0.5757 0.64,-0.64945 0.55189,0.81582 1.45731,0.92625 2.09772,0.64154 c 4.27429,1.33189 8.40916,3.02438 12.55977,4.68932 l 2.51054,0.27409 3.71084,1.68675 z" />
<path fill="#70747a" d="m 444.97227,409.02635 0.0594,-1.48669 2.39384,0.062 -1.12684,-0.8737 -2.61297,-0.0544 -0.34598,0.94064 0.27275,1.19563 z" />
<path fill="#32393b" d="m 442.03408,404.11904 c 0.23214,0.42857 3.21283,1.8553 3.44497,2.28387 0.0848,0.48903 0.16247,-0.0361 1.51754,0.46745 -1.16202,-1.57033 -1.0207,-0.47891 -4.33349,-3.43254 -0.33677,-0.30129 -1.336,-0.49221 -1.54861,-0.77954 -0.63651,-0.28567 -0.39462,-0.46284 -1.02772,-0.75417 -0.70208,-0.55475 -0.91554,-1.18717 -1.61763,-1.74192 0.61965,1.57375 2.80362,2.54173 3.56494,3.95685 z" />
<path fill="#70747a" d="m 443.72613,407.32618 -3.41352,-1.86606 c -1.09232,-0.0607 -2.18465,-0.12137 -3.27697,-0.18206 l -0.72822,-1.68399 c -0.59218,-0.003 -1.27961,-0.43099 -1.80315,-0.12648 -0.43469,0.28753 -0.82379,0.70866 -1.37868,0.7158 -0.44265,0.0961 -0.92772,0.27389 -1.03932,-0.32813 -0.23874,-0.49159 -0.56187,-0.92341 -1.05536,-1.07451 -0.20716,-0.264 1.68245,2.84682 1.46917,3.135 0.0664,0.7437 0.84952,0.3945 1.32929,0.52362 1.71942,0.22517 0.6067,-0.8127 2.30174,-0.46069 1.01163,0.23656 2.03592,0.43586 3.06605,0.5599 0.54096,-0.0372 1.10381,-0.36025 1.61268,-0.0395 0.66695,0.27497 1.40122,0.43641 1.9624,0.91298 0.30876,0.34451 0.6059,0.33389 0.89131,-0.0347 l 0.0626,-0.0512 z" />
<path fill="#9da2a8" d="m 433.21642,404.10094 2.47487,0.44194 -0.0884,0.7955 -1.94454,-0.70711 z" />
<path fill="#5d686b" d="m 417.55091,392.32171 2.5,1.05769 -1.25,2.01923 z" />
<path fill="#636b74" d="m 427.71122,396.8845 0.16666,2.66667 1.5,0.58333 0.25,1.41667 1.41668,0.33333 -0.16667,-0.83333 c 0,0 -0.50001,0.33334 -0.50001,-0.41667 0,-0.75 0.83334,-0.91667 0.83334,-0.91667 l -2.58334,-0.91666 -0.33332,-1.41667 z" />
<path fill="#2e3438" d="m 409.92695,390.86826 8.26977,1.35636 -8.65368,-3.38928 z" />
<path fill="#505b67" d="m 417.83125,393.12184 8.29787,4.32624 1.70213,-0.35462 c 0,0 -0.0709,-0.85105 -0.35461,-0.85105 -0.28369,0 -9.64539,-3.12057 -9.64539,-3.12057 z" />
<path fill="#2f3339" d="m 384.50143,378.46181 7.15945,3.44714 0.26517,2.20971 c 0,0 -2.74004,0.44194 -3.18198,-0.0884 -0.44194,-0.53033 -4.68458,-3.0052 -4.86136,-3.44714 -0.17678,-0.44194 -1.23744,-1.32583 -1.23744,-1.32583 z" />
<path fill="#6b6f77" d="m 405.59536,388.42869 c 0.9555,0.11944 1.91101,0.23887 2.86651,0.35831 -0.44394,-0.24903 -1.27384,-0.55516 -1.47717,-0.76859 0.5871,0.0298 0.59927,-0.11825 0.0483,-0.24582 -2.42693,-0.86813 -4.88852,-1.65053 -7.23466,-2.72741 -2.53529,-1.08055 -5.07059,-2.16109 -7.60588,-3.24164 0.069,0.75378 0.20296,1.45975 1.04609,1.64359 0.67631,0.38042 1.52961,0.5898 1.687,1.4529 0.44481,0.88169 -2.09799,3.05646 -1.85568,4.00823 0.53773,0.28402 1.73229,0.0218 1.62495,0.84565 -0.11142,0.98575 0.79388,1.60752 1.23914,2.38861 l 4.67245,7.54173 c -0.18783,-0.73204 -0.0693,-1.59102 -0.59203,-2.19268 -0.93393,-1.37663 -2.44267,-4.44394 -3.31694,-5.8558 -0.46649,-1.03433 -0.77489,-2.16927 -1.55722,-3.02484 -0.25166,-0.40173 1.80086,-2.5317 2.31027,-2.83426 0.83753,0.29801 1.76401,0.54869 2.39182,1.21335 0.46282,1.6399 0.95496,3.2788 1.42953,4.9182 0.54608,-0.097 1.58234,0.51628 1.72253,-0.16891 0.28914,-1.08854 0.57829,-2.17707 0.86743,-3.26561 l 1.7336,-0.045 z" />
<path fill="#071016" d="m 394.98221,383.49067 0.93732,0.41285 1.23844,7.42316 6.14258,8.88504 -2.08194,-5.63751 2.90138,5.08579 2.96859,12.84324 0.90354,3.81134 -1.23177,-0.22408 c 0,0 -2.62408,-2.92457 -2.67992,-3.20469 0.54413,0.42899 -1.56194,-7.95901 -3.10836,-12.7176 -0.55712,-1.71433 -1.61374,-3.24367 -1.64336,-3.31786 -0.1121,-0.27979 -3.12267,-6.2516 -3.12267,-6.2516 l -0.6719,-2.07154 -0.50384,-0.22402 z" />
<path fill="#4a535a" d="m 405.52048,412.49389 13.8804,-1e-5 -10.49332,0.73055 0.0664,1.99241 4.11764,0.73055 -1.09819,-0.0464 -6.96534,-0.19923 z" />
<path fill="#3f3e41" d="m 455.87029,420.07986 17.63265,15.10204 8.37734,6.62582 -0.57143,0.81633 -7.317,-2.92426 2.28979,-0.81973 -4.81952,-3.86143 z" />
<path fill="#1a1b1e" d="m 521.5,455.80247 -16.26136,-5.01136 -1.53409,-0.71591 -0.20455,-1.125 3.78409,0.30682 1.22727,1.32954 4.19319,1.63637 2.55681,0.61363 z" />
<path fill="#363636" d="m 505.60366,449.09654 -2.56098,0.85366 -17.86585,-4.77744 -3.80183,-1.9878 0.16768,-1.60976 9.42683,4.22866 4.7561,1.58536 5.36585,0.24391 3.17074,0.97561 z" />
<path fill="#282a2b" d="m 479.67766,440.45608 1.68,2.16 1.52,1.12 -2.72,-0.8 -1.76,-1.28 -2.8,-1.12 -2.72,-0.24 1.84,-0.72 1.76,0.72 1.6,0.32 z" />
<path fill="#37393b" d="m 475.99935,440.88745 -26,-9.11254 h 3.76206 l 13.45981,4.84888 z" />
<path fill="#2b2e32" d="m 416.3364,420.30726 37.65344,11.13693 5.48008,3.0052 -5.63927,-1.1046 -23.46248,-6.8191 -8.37491,-2.32934 -8.13173,-3.00521 -1.06066,-2.47487 4.41942,-1.59099 2.65165,1.41421 z" />
<path fill="#818990" d="m 421.29478,416.89641 -4.2655,4.04573 6.16087,1.91565 c -0.40242,-0.23644 -4.11711,-0.8257 -5.49061,-1.17844 -0.45461,-0.11675 4.19134,1.5467 3.59828,1.43835 -0.53288,-0.0974 -4.02203,-1.35422 -4.26782,-1.47698 -1.07363,-0.53622 -2.43304,-1.51416 -2.90202,-1.70915 l -4.2905,-2.94922 v -1.47273 l 2.84823,1.74899 4.13661,-1.03439 -2.33739,2.14668 5.19267,-1.8514 -3.68672,2.20984 2.08461,0.45828 z" />
<path fill="#6d7c84" d="m 409.49423,414.40867 -3.73051,-2.14694 -2.49427,-1.49938 1.76503,5.37176 1.66923,5.21466 7.56207,0.31215 0.57471,-0.57472 0.51724,-0.51724 -0.51724,-0.68965 -1.66667,0.34482 -4.29615,-1.56243 -1.12415,-0.13035 -0.33971,-1.7165 -0.34483,-0.51724 h 2.58621 z" />
<path fill="#141416" d="m 374.71547,410.70271 19.45108,7.20487 1.33851,1.36709 -1.591,-0.7513 -7.27285,-2.89362 -3.32687,-0.82154 -11.26862,-4.40529 c 0,0 2.7749,0.40479 3.12845,0.40479 0.35356,0 -0.4587,-0.105 -0.4587,-0.105 z" />
<path fill="#323232" d="m 402.05324,421.63285 -2.6386,-0.16842 -2.30176,-1.29123 -1.62807,0.0561 -0.72982,0.33684 -1.57193,-1.17895 0.44912,-0.78596 1.46337,-2.62876 3.03339,0.74956 -1.90074,-0.29719 -0.96795,1.83957 0.61755,0.95438 h 1.29122 l 0.44913,-0.22456 0.22456,0.72983 3.03158,0.95438 3.2,0.67369 z" />
<path fill="#292c2e" fill-opacity="0.901314" d="m 396.85237,416.49325 c 0,0.17677 1.27373,0.96226 1.27373,0.96226 l 0.7745,0.0566 -0.68301,1.09335 1.07054,-0.9056 1.49793,0.71 c 2.87673,-0.10842 4.09136,-0.0716 3.41577,-0.23919 -0.98755,-0.24503 -4.91676,-0.92928 -5.30765,-1.16436 z" />
<path fill="#888a93" d="m 312.81059,396.19724 5.18418,0.66203 1.65424,0.77181 4.33153,1.02589 c 5.6291,1.87433 16.77263,3.38626 18.3365,3.54045 l 4.37449,1.21845 -0.91346,0.17783 c -5.28938,-1.30471 -11.14955,-2.52493 -16.54121,-3.22188 -2.94372,-0.97831 -5.99153,-1.43896 -9.03631,-1.96844 l -2.86766,-0.7723 z" />
<path fill="#484e50" d="m 318.20987,394.74382 1.75181,0.52172 -0.20577,0.61494 -1.80031,-0.094 z" />
<path fill="#6a7c81" d="m 291.3232,392.46387 7.42341,-2.27552 11.0524,0.64142 -8.40788,0.70767 7.898,0.0319 -6.18334,1.24021 8.89667,-0.11677 3.66846,1.0729 2.01892,1.26138 c 0,0 -0.61916,0.87661 -1.69801,0.84532 -0.33999,-0.01 0.011,-0.92424 -0.39887,-0.94854 -4.28806,-0.25415 -12.62583,-0.32162 -12.97591,-0.32162 -0.48972,0 -6.85608,-0.857 -6.85608,-0.857 l 2.44132,-0.77271 z" />
<path fill="#272727" d="m 249.59454,383.48977 17.27245,4.47412 3.01743,0.72843 -11.2374,-1.87292 -6.77898,-1.19804 -2.58562,-0.67488 z" />
<path fill="#333333" d="m 199.35755,373.88609 5.78947,0.19299 8.86327,2.26815 -7.4159,-0.82079 -3.2807,-0.86842 z" />
<path fill="#4d4d4d" d="m 590.20106,474.64928 0.26612,1.15306 2.92601,0.50855 1.81835,-0.0883 0.62083,-0.31043 -0.79824,0.0447 z" />
<path fill="#939294" d="m 609.54257,482.89213 1.59392,1.79317 6.907,-0.26566 -1.85958,-0.79696 -2.25805,0.0664 1.59392,-0.92979 z" />
<path fill="#646365" d="m 618.44197,488.893 3.01037,0.89968 c 0,0 1.55706,0.17299 2.80274,0.55358 1.24566,0.38063 2.73353,1.00346 2.87195,1.00346 0.1384,0 0.44826,-0.46247 0.44826,-0.46247 0,0 -0.55362,-0.65742 -0.79584,-0.69204 -0.2422,-0.034 -2.40023,-0.64323 -2.78082,-0.67788 -0.38062,-0.0341 -2.20028,-0.52104 -2.51169,-0.62454 -0.31142,-0.10378 -1.90311,-0.38056 -2.45675,-0.20753 -0.55356,0.17296 -0.58822,0.20753 -0.58822,0.20753 z" />
<path fill="#171717" d="m 632.04247,492.05341 -4.92,-0.80956 0.37367,-0.68511 z" />
<path fill="#0f0f0f" d="m 645.47997,495.41602 11.30487,4.23798 -11.93311,-5.55731 z" />
<path fill="#141414" d="m 667.97667,504.01732 -4.6,-1.55 1.4,-0.45 2.95,0.7 z" />
<path fill="#262628" d="m 667.32142,503.438 3.76213,2.24392 5.082,2.50822 3.23392,1.18792 2.50781,0.65993 2.2442,1.97995 4.8838,1.18817 1.71612,0.39589 -2.57396,-1.71613 -5.54405,-2.50781 -3.82809,-1.65015 -4.48783,-1.45182 c 0,0 -2.376,-1.71613 -2.64016,-1.7821 -0.26389,-0.0657 -2.37586,-0.72612 -2.37586,-0.72612 z" />
<path fill="#8b8b8c" d="m 596.87933,476.8574 0.28385,2.2 h 0.99354 4.18714 l -3.61938,-0.99354 z" />
<path fill="#5d6560" d="m 563.84199,452.00343 2.37155,-1.62017 2.98205,1.17403 -2.41851,-0.44613 -0.79835,-0.047 -1.78453,1.17403 z" />
<path fill="#5e5e5e" d="m 525.33033,434.07826 3.72021,1.724 -0.0907,-1.27033 z" />
<path fill="#818086" d="m 432.34873,425.84966 11.36419,4.51611 8.55985,1.43554 -13.68117,-4.49056 z" />
<path fill="#313b41" d="m 412.89237,408.57549 -0.19924,2.05882 1.32827,0.92979 -0.66414,-1.39468 z" />
<path fill="#737780" d="m 390.30174,389.255 2.05551,2.62237 c 0,0 -1.71357,-2.78458 -0.10712,-1.8207 0.81914,0.49149 2.67975,4.23625 3.29409,6.40799 0.59057,2.08768 1.12508,3.31923 1.12508,3.31923 l 1.1781,-0.74966 3.60192,4.12994 -3.49074,-6.22668 -1.85115,-1.83224 -3.28969,-5.45058 c 0,0 -3.24847,-4.88878 -4.10531,-5.53139 -0.85675,-0.64261 1.58931,5.13172 1.58931,5.13172 z" />
<path fill="#818990" d="m 438.89062,431.65775 21.75396,7.24303 10.09434,2.35849 -7.45283,-0.66038 -10.9434,-3.5849 -10.99924,-3.37511 z" />
<path fill="#3d4246" d="m 414.28705,421.65894 10.60393,6.57953 14.16954,4.61142 0.13157,-1.09611 -14.05951,-4.43899 z" />
<path fill="#747f84" d="m 402.0308,418.25626 4.72129,-0.80934 0.4032,2.29403 3.38123,0.8453 -3.66299,0.65746 -3.2873,0.75139 2.67444,-2.65833 z" />
<path fill="#7a7a87" d="m 393.81322,418.03147 -7.63122,-2.46547 3.07597,1.6906 1.47928,1.03316 0.86878,-0.4931 1.26796,0.42265 z" />
<path fill="#252c2e" d="m 353.995,411.94535 4.79006,0.0939 -2.6768,-0.8453 z" />
<path fill="#a4a4b1" d="m 346.58684,403.39838 25.53525,7.02073 -20.82737,-6.05802 z" />
<path fill="#585858" d="m 250.53904,384.66079 6.43371,1.4558 -5.25967,-2.16022 z" />
<path fill="#4b575b" d="m 296.73526,391.97213 5.51231,-0.46489 -5.4459,-1.12903 z" />
<path fill="#768183" d="m 318.95145,393.86659 1.16606,-0.0996 -0.66796,-0.31546 -0.66414,0.41508 z" />
<path fill="#bfbfc8" d="m 433.47748,389.33785 7.49495,0.57653 -3.39515,0.83277 -0.12812,0.38436 z" />
<path fill="#6b787c" d="m 427.35553,390.89909 2.21742,0.67038 c 0,0 3.97081,0.30939 3.24884,0.51565 -0.72193,0.20636 1.54707,0.41262 0.25783,0.56725 -1.28919,0.15475 -4.89895,-0.20625 -4.89895,-0.20625 l -0.87675,-0.15464 z" />
<path fill="#909399" d="m 429.0393,394.0061 7.7956,-0.46961 c 0,0 0.46961,1.50276 -0.18785,1.59669 -0.65746,0.0939 -5.44752,-0.46962 -5.44752,-0.46962 z" />
<path fill="#6f787e" d="m 429.21877,395.83528 5.84048,1.01996 -7.25989,-2.52175 -1.62881,0.70581 z" />
<path fill="#bfbfc8" d="m 409.32618,387.03106 -0.10796,0.33069 1.61533,0.35991 2.52371,0.59772 c 0,0 -0.23815,0.63226 0.0939,0.56584 0.33207,-0.0664 -4.12498,-1.85416 -4.12498,-1.85416 z" />
<path fill="#bfbfc8" d="m 420.06968,391.00057 0.6105,0.98619 4.79006,1.40885 0.93923,0.8453 1.87845,0.14089 z" />
<path fill="#393c42" d="m 401.56653,382.67984 -0.091,-2.68686 0.93024,0.72177 c 0,0 1.55042,0.46716 1.86052,0.46716 0.30829,0 2.69404,-0.41306 2.69404,-0.41306 l -2.32304,1.82964 z" />
<path fill="#bfbfc8" d="m 402.75518,383.50667 6.46463,2.12231 c 0,0 0.57239,-2.45104 0.11972,-2.9206 -0.12417,-0.12881 -0.43297,0.7206 -0.72211,0.80957 -1.34318,0.41308 -2.55466,0.55431 -2.55466,0.55431 l -0.25889,-0.87975 0.77575,-2.1186 -1.91205,1.49857 -2.2737,0.20942 z" />
<path fill="#232529" d="m 400.87153,380.28337 -11.95442,-4.25046 -2.52371,0.26565 -10.49332,-4.91459 1.9924,2.39088 22.31492,8.36809 z" />
<path fill="#58585d" d="m 376.91216,371.55856 1.50276,1.87845 -0.56354,0.56354 -1.22099,-1.221 z" />
<path fill="#58585d" d="m 375.31547,371.18287 -7.4199,-2.34807 0.8453,-0.79835 z" />
<path fill="#58585d" d="m 357.37622,364.13866 7.23205,2.44199 -8.07736,-1.50277 -32.49728,-11.08288 0.46245,-2.26941 z" />
<path fill="#9a9a9d" d="m 337.46458,358.31544 3.75691,-0.14088 12.39781,4.93095 -2.72376,-0.3757 z" />
<path fill="#4b4b4d" d="m 335.65353,355.17909 c 0.79697,0 10.3605,1.32826 10.3605,1.32826 l 6.11004,2.52372 0.26565,-1.4611 -6.907,-2.92219 z" />
<path fill="#1c1c1d" d="m 302.29499,346.47605 14.74937,6.36905 2.07832,1.13972 -6.90539,-1.87715 z" />
<path fill="#4b4b4d" d="m 320.32524,352.59714 c 0,0 -1.59393,1.46109 -0.66414,1.59392 0.92979,0.13283 5.4459,2.52371 5.4459,2.52371 l -7.70395,-2.65654 -1.59393,-0.39848 3.18785,-0.66413 z" />
<path fill="#4b4b4d" d="m 320.34177,347.85661 -22.23795,-4.96141 20.77788,5.92399 6.10716,2.85087 z" />
<path fill="#4b4b4d" d="m 310.45763,350.77606 -8.05758,-4.24532 -2.54819,-2.91583 -6.00873,-2.89408 5.97321,5.91631 3.36643,2.37995 z" />
<path fill="#4b4b4d" d="m 302.33657,345.35677 -48.61774,-25.47678 c 15.5092,5.86637 32.95372,14.8152 47.09668,23.34591 z" />
<path fill="#232324" d="m 256.4223,326.6213 14.3453,4.78177 -6.37569,2.65654 0.26565,-2.39089 z" />
<path fill="#232324" d="m 168.95239,279.7704 56.94631,26.53643 -24.97145,-9.69637 z" />
<path fill="#232324" d="m 154.11139,275.48967 -43.42971,-18.64832 21.40372,7.73193 z" />
<path fill="#232324" d="M -87.13285,177.20197 50.465906,232.8932 89.817687,246.32914 -11.99461,206.88157 Z" />
<path fill="#1c1c1d" d="m -210.47832,123.88749 13.3016,12.25834 27.12484,5.99877 -29.733,-11.21508 z" />
<path fill="#bfbfc8" d="m 443.77804,392.00611 0.91285,1.6953 -1.17367,0.65204 z" />
<path fill="#bfbfc8" d="m 447.42946,392.39733 c -1.04327,0.13041 -2.21694,0.39122 -2.21694,0.39122 l 2.21694,1.04327 z" />
<path fill="#bfbfc8" d="m 444.03885,397.35283 2.60816,-0.13041 -3.91224,1.5649 z" />
<path fill="#90909f" d="m 445.60375,399.43936 -0.65204,2.47775 2.47775,2.21693 5.86835,2.47775 h 3.2602 l -7.43325,-2.99938 z" />
<path fill="#90909f" d="m 460.60065,408.30709 2.47775,0.39123 1.17367,0.78244 -0.91285,0.91286 z" />
<path fill="#90909f" d="m 460.73106,406.7422 -0.65204,2.73856 6.12917,2.21694 5.17292,1.21322 12.21632,4.71977 -3.66317,-2.16811 -12.6828,-4.80815 -5.73795,-1.6953 z" />
<path fill="#cbcbd2" d="m 464.6433,410.39362 3.3906,1.36928 6.87886,2.3315 5.7055,2.03717 -3.76906,-1.66196 -8.10989,-3.09759 z" />
<path fill="#cbcbd2" d="m 480.97936,412.14288 12.86362,5.53274 0.55327,0.82991 -7.4692,-3.45796 -3.08911,-1.56761 2.30531,2.95079 -3.22743,-2.67416 -2.2131,-1.01433 z" />
<path fill="#bfbfc8" d="m 434.77989,396.70079 2.99938,2.99938 1.43449,-1.17367 z" />
<path fill="#bfbfc8" d="m 418.45942,392.91661 4.42619,1.4754 0.55327,1.19876 z" />
<path fill="#bfbfc8" d="m 401.86121,386.0929 5.44052,1.01434 -0.18442,1.47539 z" />
<path fill="#8c8c9b" d="m 427.21959,393.00883 h 7.93026 l -7.4692,0.64548 -1.19876,-1.19876 z" />
<path fill="#9f9fad" d="m 409.77418,389.00672 4.27086,1.5975 3.52101,1.23888 -2.24953,-0.45643 c 0,0 -2.08653,-0.84765 -2.21694,-0.88025 -0.13041,-0.0326 -0.91285,-0.35863 -1.10847,-0.42383 -0.19561,-0.0652 -1.82571,-1.07587 -1.82571,-1.07587 0,0 -0.19561,-0.0978 -0.39122,0 z" />
<path fill="#8a8a9b" d="m 434.8271,401.16961 4.42619,1.89036 c 0,0 -1.24486,0 -1.42929,-0.0922 -0.18442,-0.0922 -3.31964,-1.84424 -3.31964,-1.84424 z" />
</g>
</svg> @font-face {
font-family: "Familjen Grotesk";
src: url("./FamiljenGrotesk-Bold.ttf");
font-weight: 700;
}
:root {
--crack-delay: 3s;
--crack-duration: 100ms;
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
background-color: #000;
}
svg {
max-width: 1000px;
max-height: 100%;
}
#title-text {
animation-name: scale, blur, quiver, shake;
animation-duration: 3s, 142ms, 100ms, 50ms;
animation-iteration-count: 1, 14, 10, 20;
animation-delay: 0s, 1s, 1s, 2s;
animation-direction: normal, alternate-reverse, alternate-reverse,
alternate-reverse;
animation-timing-function: linear, linear, ease-in, ease-in;
animation-fill-mode: forwards, none, forwards, forwards;
transform-origin: center;
}
#title-left {
--crack-clip: polygon(
7.76% 9.16%,
18.81% 39.67%,
27.09% 45.26%,
41.57% 66.95%,
43.11% 84.74%,
20.18% 84.74%,
-2.07% 85.26%,
-1.55% 11.69%
);
animation-name: crack-left;
animation-delay: var(--crack-delay);
animation-duration: var(--crack-duration);
animation-fill-mode: forwards;
}
#title-right {
--crack-clip: polygon(
70% 24.4%,
100.52% 23.9%,
100.52% 88.3%,
64.31% 87.8%,
43.96% 42.04%,
40.33% 27.3%
);
animation-name: crack-right;
animation-delay: var(--crack-delay);
animation-duration: var(--crack-duration);
animation-fill-mode: forwards;
}
#title-middle {
--crack-clip: polygon(
41.73% 23.68%,
48.4% 38.16%,
55.62% 59.29%,
65.64% 78.93%,
65.44% 86.84%,
43.28% 86.84%,
43.88% 69.39%,
38.63% 66.75%,
26.69% 46.24%,
21.12% 44.58%,
18.23% 43.47%,
14.06% 23.7%
);
animation-name: crack;
animation-delay: var(--crack-delay);
animation-duration: var(--crack-duration);
animation-fill-mode: forwards;
}
#crack {
animation-name: show;
animation-delay: var(--crack-delay);
animation-duration: var(--crack-duration);
animation-fill-mode: forwards;
}
@keyframes scale {
to {
scale: 1.05;
}
}
@keyframes blur {
to {
filter: blur(0.1em);
}
}
@keyframes quiver {
to {
translate: 0 -1px;
}
}
@keyframes shake {
to {
translate: 0 -5px;
}
}
@keyframes crack {
to {
clip-path: var(--crack-clip);
}
}
@keyframes crack-right {
to {
clip-path: var(--crack-clip);
translate: 1% -1%;
}
}
@keyframes crack-left {
to {
clip-path: var(--crack-clip);
translate: -0.45% 0.35%;
}
}
@keyframes show {
to {
opacity: 1;
}
} Description
This is a CSS animation of the title card for the TV series Black Mirror. It shows the title vibrate and wobble erratically, before cracking and splitting apart like a broken mirror.
Implementation Notes
The font used in the title is probably Proxima Nova Bold. I went for a free alternative called Familjen Grotesk.