Johnny Cash Busted!
<div class="form">
<img src="img/mugshot.webp" class="polaroid" width="340" height=270" alt="mugshot of johnny cash" />
<div class="item">
INMATE: <span class="typewriter">John R. Cash</span>
</div>
<div class="item">
DATE RECIEVED: <span class="typewriter"> Oct 10/65</span>
</div>
<div class="item">
OCCUPATION: <span class="typewriter">Musician</span>
</div>
<div class="item">
CHARGE: <span class="typewriter">Illegal Poss. Narcotics</span>
</div>
<div class="item print">
<span>FINGERPRINT</span>
<!--Fingerprint by Stephen Kelly from the Noun Project-->
<svg viewBox="0 0 75 75" class="plant" id="finger">
<path
id="path2"
d="m 48.015796,32.078472 c 0.54641,0.14641 0.869615,0.306217 1.19282,0.466025 -0.126795,-0.619615 -0.166987,-1.28923 -0.35718,-2.218653 0.806218,-0.0036 1.439231,0.09282 1.885641,0.06602 -0.263397,-0.656218 -0.826795,-1.832051 -1.340192,-2.921281 0.44641,-0.02679 0.756218,-0.09019 1.28923,-0.166987 -0.45,-0.779423 -0.85,-1.472244 -1.3,-2.251667 0.359808,0.02321 0.583013,0.0098 0.806218,-0.0036 0.39282,-0.919616 0.699038,-1.789231 -0.333975,-2.578461 0.0866,-0.05 0.173206,-0.1 0.296411,-0.286603 0.459807,0.19641 0.833012,0.44282 1.156217,0.602628 -0.190192,-0.929423 -0.480384,-2.032051 -0.720577,-3.048076 0.0866,-0.05 0.173205,-0.1 0.209808,-0.236603 0.323205,0.159808 0.64641,0.319616 1.106218,0.516026 -0.06699,-1.116026 -1.659808,-2.274871 0.122243,-3.188269 -0.2,-0.34641 -0.313398,-0.74282 -0.513398,-1.08923 0.0866,-0.05 0.136603,0.0366 0.223205,-0.0134 0.02321,-0.359807 0.183013,-0.683013 0.119616,-0.99282 -0.326795,-0.966026 -0.65359,-1.932051 -1.066988,-2.848076 -0.2,-0.346411 -0.74641,-0.492821 -1.24282,-0.552628 -0.136602,-0.0366 -0.369615,0.559807 -0.479423,0.969615 -0.791858,3.228461 -1.447114,6.493524 -2.375575,9.685383 -0.805256,3.005256 -2.306922,5.604294 -3.995191,8.080127 -1.565063,2.28923 -4.030127,3.019615 -6.74878,2.510769 -2.172243,-0.362435 -3.815063,-1.607883 -4.791858,-3.699742 -1.45359,-3.317691 -1.208142,-6.692562 -1.099296,-10.104036 0.04641,-0.719615 0.09282,-1.439231 0.0026,-2.195448 -0.269616,0.733012 -0.725833,1.34282 -0.945449,2.162435 -0.672243,2.235641 -1.431088,4.521281 -1.916729,6.880127 -0.851666,3.724871 -1.653332,7.536345 -2.318396,11.384421 -0.591858,3.574871 -0.960512,7.136345 -1.415767,10.747819 -0.501666,4.331089 -1.176538,8.762177 -1.454999,13.079869 -0.195448,3.461474 -1.297114,6.753332 -1.85237,10.191601 -0.169615,0.906217 -0.202628,1.849038 -0.422243,2.668653 -0.256218,0.956218 -0.649038,1.875833 -1.041858,2.795448 -0.136603,-0.0366 -0.273205,-0.07321 -0.409808,-0.109807 -0.0036,-0.806218 -0.05718,-1.699038 -0.02417,-2.641859 -0.173205,0.1 -0.383013,0.336603 -0.679423,0.623205 0.02321,-0.359807 -0.02679,-0.44641 0.09641,-0.633012 1.914102,-4.684679 2.512178,-9.648781 2.973652,-14.649485 0.358846,-2.978461 0.631089,-5.906922 0.989934,-8.885383 0.395449,-3.115063 0.654294,-6.266729 1.136345,-9.431793 0.931089,-5.387307 1.948781,-10.824613 3.103075,-16.225317 0.545448,-2.855256 1.364101,-5.637307 2.729165,-8.272948 0.319615,-0.64641 0.912435,-1.219615 1.332051,-1.69282 0.05,0.0866 0.186602,0.123205 0.236602,0.209807 -0.0232,0.359808 -0.133013,0.769616 -0.206218,1.042821 0.136603,0.0366 0.136603,0.0366 0.273205,0.0732 0.119616,-0.99282 0.325833,-2.035641 0.445449,-3.028461 0.990896,-5.883717 3.731793,-8.736345 9.968138,-9.334679 2.541858,-0.197372 5.037306,0.324871 6.956921,2.449742 0.723206,0.852628 1.779423,1.282051 2.589231,2.084679 1.856218,1.815064 2.709808,4.093525 3.043782,6.671986 0.727757,4.660511 0.376091,9.251408 -0.421985,13.869099 -0.678461,3.624872 -1.493525,7.21314 -1.898781,10.911216 -0.299038,2.482051 -0.01506,4.97391 -0.0909,7.442563 -0.06865,4.081089 -0.0507,8.112178 -0.565768,12.220062 -0.528461,3.884678 -0.387307,7.729165 -0.469357,11.587049 -0.09282,1.43923 -0.04904,2.915063 -1.421282,3.938268 -0.0866,0.05 -0.173205,0.1 -0.433012,0.25 0.984678,-4.494486 0.07391,-8.471985 -2.212694,-12.232497 0.0866,-0.05 0.173205,-0.1 0.259808,-0.15 0.69641,0.406218 1.429423,0.675833 2.125833,1.082051 0.466025,-1.192821 -0.380385,-1.858846 -0.780385,-2.551666 -0.45,-0.779423 -1.073205,-1.458846 -1.69641,-2.138269 0.679423,-0.623205 0.679423,-0.623205 2.951666,-0.08756 -0.9,-1.558846 -1.8,-3.117692 -2.75,-4.76314 1.102628,-0.290192 1.306218,0.862435 2.002628,1.268653 -0.226795,-0.79282 -0.490192,-1.449038 -0.75359,-2.105256 -0.0134,-0.223205 0.0098,-0.583012 0.08301,-0.856217 0.273205,0.07321 0.583013,0.0098 0.819615,0.219615 0.373205,0.24641 0.659808,0.54282 0.89641,0.752628 0.0866,-0.05 0.173205,-0.1 0.259808,-0.15 -0.3,-0.519615 -0.513397,-1.089231 -0.813397,-1.608846 -0.2,-0.34641 -0.536603,-0.729423 -0.65,-1.125833 -0.15,-0.259808 -0.0768,-0.533013 -0.140193,-0.84282 0.273205,0.07321 0.49641,0.05981 0.769615,0.133012 0.136603,0.0366 0.186603,0.123205 0.509808,0.283013 -0.313397,-0.74282 -0.440192,-1.362435 -0.790192,-1.968653 -0.413398,-0.916026 -0.463398,-1.002628 0.516025,-1.106218 0.0866,-0.05 0.223205,-0.0134 0.223205,-0.0134 -0.213397,-0.569616 -0.426795,-1.139231 -0.776795,-1.745449 -0.363397,-0.829423 -0.776795,-1.745448 -1.140192,-2.574871 -0.25,-0.433013 -0.586603,-0.816025 -0.08038,-1.33923 0.0866,-0.05 -0.02679,-0.446411 -0.126795,-0.619616 -1.619615,-1.605256 -3.152628,-3.260511 -5.817691,-2.876537 -0.842821,0.140193 -1.849038,-0.202628 -2.791859,-0.23564 -1.662435,-0.07942 -3.411473,-0.108846 -5.110512,-0.05167 -0.136602,-0.0366 -0.359807,-0.02321 -0.459807,-0.196411 0.669615,-0.04019 1.375833,-0.216987 2.045448,-0.257179 1.958846,-0.20718 3.831089,-0.36436 5.739935,-0.658142 2.132051,-0.30718 3.834679,0.441859 5.317691,2.010512 0.623205,0.679423 1.419615,1.258846 2.216026,1.838268 0.0866,-0.05 0.173205,-0.1 0.209807,-0.236602 -0.363397,-0.829423 -0.726795,-1.658846 -1.140192,-2.574871 0.966025,-0.326795 1.429423,0.675833 2.38564,0.932051 -0.7,-1.212436 -1.25,-2.165064 -1.9,-3.290897 0.706218,-0.176795 1.275834,-0.390192 1.982051,-0.566987 -0.4,-0.692821 -0.763397,-1.522243 -1.313397,-2.474871 z m -7.649742,-2.049743 c 0.333012,-0.423205 0.975833,-0.909807 1.38205,-1.606217 1.008846,-1.852628 2.017692,-3.705256 2.753332,-5.631089 1.041859,-2.795449 1.897115,-5.714102 2.529166,-8.619358 0.522243,-2.495448 -0.07154,-4.923909 -1.544744,-7.075575 -0.25,-0.433013 -0.983013,-0.702628 -0.959808,-1.062436 -0.05359,-0.89282 -0.636603,-0.902628 -1.133013,-0.962435 -0.49641,-0.05981 -0.956218,-0.256218 -1.53923,-0.266026 -1.935641,-0.152628 -3.931089,0.191155 -5.56314,1.36436 -1.545448,1.123205 -2.654294,2.802628 -3.080127,4.665063 -0.572243,2.408846 -1.007884,4.854294 -1.306922,7.336345 -0.202628,1.849038 -0.132051,3.771281 -0.148076,5.743525 0.02679,0.44641 0.240192,1.016025 0.40359,1.499038 0.226795,0.79282 0.590192,1.622243 0.320577,2.355255 -0.342821,1.006218 0.09378,1.562436 0.666987,2.155256 2.079423,1.801666 5.127499,1.081089 7.219358,0.104294 z"
/>
<path
id="path4"
d="m 45.104045,48.205992 c -0.84641,-0.666025 -1.64282,-1.245448 -2.489231,-1.911473 -1.219615,-0.912436 -2.572243,-1.055256 -3.984678,-0.701666 -1.102628,0.290192 -2.391859,0.457179 -3.317692,1.453589 -0.629423,0.709808 -1.48564,0.626795 -2.282051,0.04737 -1.406217,-1.03564 -2.995448,-1.388268 -4.707883,-1.554294 -0.223206,0.0134 -0.446411,0.02679 -0.583013,-0.0098 0,0 -0.05,-0.0866 -0.236603,-0.209808 1.289231,-0.166987 2.355256,-0.320577 3.584679,0.0088 0.409808,0.109808 0.733013,0.269615 1.14282,0.379423 1.516026,0.625833 2.928461,0.272243 4.414102,-0.354552 2.971281,-1.25359 5.476537,-1.314359 7.769358,1.056922 0.473205,0.419615 0.736602,1.075833 1.086602,1.682051 -0.136602,-0.0366 -0.223205,0.0134 -0.39641,0.113397 z"
/>
<path
id="path6"
d="m 29.366283,48.968911 c 0.0866,-0.05 0.0866,-0.05 0.173205,-0.1 2.591859,-0.110769 5.133717,-0.308141 7.688973,-0.282308 1.38923,0.0062 2.691858,0.06244 3.491858,1.448076 0.05,0.0866 0.1,0.173205 0.113398,0.39641 -3.931089,0.191154 -7.642563,-0.437307 -11.404036,-1.15237 -0.05,-0.0866 -0.1,-0.173205 -0.0634,-0.309808 z"
/>
<path
id="path8"
d="m 21.327534,52.797501 c 0.259807,-0.15 0.606217,-0.35 0.866025,-0.5 2.251666,-1.3 4.593524,-1.843782 7.175575,-1.371539 1.899038,0.28923 3.994487,0.118653 5.797115,1.040896 0.509807,0.283013 1.019615,0.566026 1.39282,0.812436 -0.0366,0.136603 -0.0366,0.136603 -0.07321,0.273205 -0.273205,-0.0732 -0.54641,-0.14641 -0.869615,-0.306218 -0.409808,-0.109807 -0.869616,-0.306217 -1.229423,-0.329423 -2.455256,0.147372 -4.837307,0.02154 -7.246153,-0.550704 -1.229423,-0.329423 -2.418653,0.01077 -3.594486,0.574167 -0.74282,0.313398 -1.449038,0.490193 -2.105256,0.75359 0.0366,-0.136602 -0.0634,-0.309808 -0.113397,-0.39641 z"
/>
<path
id="path10"
d="m 48.675775,25.94713 c 0.0134,0.223205 0.163397,0.483013 0.04019,0.669615 -0.58923,1.379423 -1.178461,2.758846 -1.817691,4.051666 -0.283013,0.509808 -0.939231,0.773205 -1.372243,1.023205 -0.0866,0.05 -0.359808,-0.02321 -0.409808,-0.109807 -0.05,-0.0866 -0.0634,-0.309808 0.05981,-0.496411 0.899038,-1.44282 1.848076,-2.799038 2.747114,-4.241858 0.159808,-0.323205 0.456218,-0.609808 0.616025,-0.933013 0,0 0,0 0.136603,0.0366 z"
/>
<path
id="path12"
d="m 48.796562,33.540667 c 1.205256,-2.312435 2.273909,-4.661474 3.479165,-6.973909 0.293783,1.908846 -2.189934,6.806922 -3.479165,6.973909 z"
/>
<path
id="path14"
d="m 50.198076,26.841154 c -0.622243,2.322243 -1.294486,4.557884 -3.30955,6.067692 -0.05,-0.0866 -0.136602,-0.0366 -0.186602,-0.123205 1.182051,-1.952628 2.314101,-3.991859 3.496152,-5.944487 z"
/>
<path
id="path16"
d="M 40.699551,7.012685 C 42.795,6.842108 43.64141,7.508133 43.761987,9.516979 42.815577,8.677748 41.782564,7.888518 40.699551,7.012685 Z"
/>
</svg>
<svg id="fingerprint" class="plant" viewBox="0 0 64 80">
<title>Fingerprint</title>
<g>
<path
d="M47.09,45.23a87.38,87.38,0,0,1-3.88,12.44c-.51.41-1,.8-1.56,1.15A84.47,84.47,0,0,0,46.11,45a14.5,14.5,0,0,0-28.23-6.64,51.58,51.58,0,0,1-3.75,11q-.29-.55-.57-1.12a52.56,52.56,0,0,0,3.34-10.11,15.5,15.5,0,0,1,30.18,7.1Zm-13.6-9.88a6.5,6.5,0,0,0-7.82,4.84,52.46,52.46,0,0,1-6.32,16.21l.7.64a52.52,52.52,0,0,0,6.59-16.62,5.5,5.5,0,0,1,10.71,2.52,66.54,66.54,0,0,1-7.28,18.8q.56.07,1.14.09a67.07,67.07,0,0,0,7.11-18.66A6.5,6.5,0,0,0,33.49,35.35Zm1.37-5.84a12.5,12.5,0,0,0-15,9.3A50.52,50.52,0,0,1,15.32,51.4q.3.48.62.94A50.47,50.47,0,0,0,20.81,39a11.5,11.5,0,1,1,22.39,5.27,77.43,77.43,0,0,1-5.8,16.63c.46-.16.92-.34,1.37-.54a79.9,79.9,0,0,0,5.4-15.86A12.5,12.5,0,0,0,34.86,29.51ZM32.8,38.27a3.5,3.5,0,0,0-4.21,2.61,54.37,54.37,0,0,1-7,17.44c.27.2.55.39.83.58A55.42,55.42,0,0,0,29.57,41.1a2.5,2.5,0,1,1,4.87,1.14A62,62,0,0,1,27,61.08l.92.26a63.43,63.43,0,0,0,7.45-18.86A3.5,3.5,0,0,0,32.8,38.27Zm-.69,2.92a.5.5,0,0,0-.6.37A57.82,57.82,0,0,1,24.19,59.9c.3.16.61.3.92.44a59.17,59.17,0,0,0,7.37-18.56A.5.5,0,0,0,32.11,41.19ZM40.36,4.1a17.76,17.76,0,0,0-4.16-1.7,39.27,39.27,0,0,0-8.31,0,17.72,17.72,0,0,0-4.22,1.7A38.31,38.31,0,0,1,40.36,4.1ZM34.18,32.43A9.5,9.5,0,0,0,22.75,39.5c-.7,3-2.18,9.24-5.49,14.63q.33.41.68.81c3.51-5.59,5.05-12.1,5.78-15.2a8.5,8.5,0,1,1,16.55,3.89,70.85,70.85,0,0,1-6.71,18.15q.62-.06,1.23-.17a72.88,72.88,0,0,0,6.46-17.75A9.5,9.5,0,0,0,34.18,32.43ZM39.44,10A32.42,32.42,0,0,1,50,14.61c-.32-.62-.65-1.23-1-1.81a33.52,33.52,0,0,0-34,0c-.35.58-.68,1.19-1,1.8A32.39,32.39,0,0,1,39.44,10Zm.69-2.92a35.66,35.66,0,0,1,6.33,2.14q-.77-.91-1.6-1.73a36.79,36.79,0,0,0-4.51-1.38A36.32,36.32,0,0,0,19.15,7.51q-.84.82-1.61,1.75A35.32,35.32,0,0,1,40.13,7.12ZM38.76,13A29.35,29.35,0,0,1,52.3,20.27c-.2-.66-.42-1.3-.66-1.93a30.49,30.49,0,0,0-39.28,0c-.23.63-.46,1.28-.66,1.93A29.46,29.46,0,0,1,38.76,13ZM36.24,23.67A18.49,18.49,0,0,0,14,37.44a58.23,58.23,0,0,1-2,6.84q.24.72.51,1.43a55.19,55.19,0,0,0,2.48-8,17.5,17.5,0,1,1,34.07,8,89.83,89.83,0,0,1-2.52,8.7,27.61,27.61,0,0,0,1.88-2.54c.64-2.09,1.17-4.09,1.61-5.93A18.5,18.5,0,0,0,36.24,23.67Zm.69-2.92a21.51,21.51,0,0,0-25.85,16c-.13.56-.3,1.22-.49,1.94.12.73.26,1.44.42,2.15.42-1.38.77-2.7,1-3.86a20.49,20.49,0,0,1,40.4,6,37.94,37.94,0,0,0,.91-3.85A21.51,21.51,0,0,0,36.92,20.75ZM54,30.86a24.5,24.5,0,0,0-44,0c0,.33,0,.66,0,1q0,.76,0,1.5a23.5,23.5,0,0,1,43.94,0q0-.74,0-1.48C54,31.52,54,31.19,54,30.86Zm-15.91-15A26.39,26.39,0,0,1,53.63,26.37c-.1-.71-.2-1.41-.34-2.09a27.5,27.5,0,0,0-42.58,0c-.13.69-.24,1.39-.34,2.1A26.51,26.51,0,0,1,38.07,15.88Z"
/>
</g>
</svg>
</div>
<div class="item signature">
<span>SIGNATURE</span>
<svg id="signature" viewBox="0 0 1200 800">
<path
d="m 130.49242,158.94131 c 2.27307,-9.63462 32.70832,-145.12595 29.24699,-146.85661 -18.43799,-9.21899 -66.092389,101.265 -62.227387,124.45452 1.613877,9.68369 21.689537,35.57477 32.980397,22.40209 13.3686,-15.59667 3.65761,-33.87612 -15.5567,-24.26863 -0.009,0.004 -69.138886,71.9501 -70.939232,74.05042 -39.3167179,45.86946 -41.2834108,25.30882 -35.469578,22.40179 38.568404,-19.2841 92.52958,61.74078 102.05282,78.40654 7.32553,12.81941 13.46712,25.03204 21.15725,37.33639 1.77612,2.84163 3.73372,12.68516 3.73372,9.33416 0,-15.51914 -4.40111,-39.33881 -9.33401,-54.1377 -4.57637,-13.72898 -0.40025,-108.63166 1.2445,-125.0771 6.43379,-64.33827 42.62196,-13.99729 30.49128,-1.8668 -4.31664,4.31676 -3.48329,27.50513 -14.93447,21.77952 -33.95219,-16.976 21.04112,-70.08444 29.24674,-86.496 5.24512,-10.49044 8.69908,-35.45692 16.80136,-43.55913 1.56837,-1.56823 -5.60286,17.44145 -8.08952,34.84738 -3.65028,25.55285 -16.52922,53.43723 -3.73348,79.02875 3.84989,7.69989 18.33864,-12.81163 19.91265,-8.08971 0.88304,2.64923 3.31894,38.37358 13.69006,28.00239 3.52138,-3.52138 7.1227,-23.81871 13.69002,-20.5351 9.34002,4.67002 3.21027,28.72372 9.33406,34.84734 9.10878,9.10921 24.64848,-7.08734 36.71412,4.97816 24.51751,24.51754 -1.2445,75.89122 -1.2445,106.40867"
id="name1"
/>
<path
d="m 376.29061,145.51995 c -0.14733,-18.18149 33.43099,-124.71943 11.82302,-131.92204 -30.58026,-10.19342 -66.6641,193.91496 -30.4915,205.97244 54.24507,18.08177 25.57135,-103.91963 66.58345,-103.91963 0.08,0 -11.60349,11.78614 -15.55705,23.64634 -4.09113,12.27393 -22.71493,50.7133 -12.44524,60.98277 6.28002,6.28005 30.34325,-55.38224 29.8691,-55.38224 -2.42804,0 -9.76787,54.51505 -6.22286,61.6051 6.7198,13.43931 33.60286,-49.10648 33.60286,-30.49123 0,9.54077 -11.70037,45.9866 -6.84481,43.55889 22.27652,-11.1382 43.88134,-68.94484 51.64853,-88.36265 3.30811,-8.27015 5.62693,-16.98702 6.84497,-25.51319 0.0368,-0.25873 -0.0217,-6.22266 0,-6.22266 0.0399,0 -3.2317,15.91771 -7.46711,28.62442 -4.2893,12.8674 -8.09361,29.25842 -11.82346,40.44765 -1.1125,3.33779 -1.43535,51.02643 -2.48887,51.02643 -1.16303,0 3.00349,-4.87032 3.11114,-4.97832 8.74907,-8.7488 11.96645,-23.16713 19.29066,-30.4912 1.23011,-1.23029 12.21697,14.82029 23.64639,20.53505 19.34737,9.67369 71.81715,-5.39874 84.00669,-15.55705"
id="name2"
/>
<path
id="pen"
d="M -2,11.22287 23.123077,74.03061 467.22266,371.40423 503.56089,311.69941 67.088441,23.78444"
/>
</svg>
</div>
</div>@font-face {
font-family: "Special Elite";
src: url("SpecialElite-Regular.ttf");
}
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--border-color: rgb(0 0 0 / 40%);
}
body {
min-height: 100dvh;
margin: 0;
color: rgb(53 53 53);
font-family: "Open Sans", Verdana, serif;
display: grid;
place-items: center;
}
.typewriter {
font-family: "Special Elite", Verdana, serif;
font-size: 18px;
}
.form {
--inline-margin: 0.25rem;
width: calc(100% - (var(--inline-margin) * 2));
max-width: 700px;
aspect-ratio: 1 / 1.05;
padding: 1rem;
margin: 1rem var(--inline-margin);
display: grid;
grid-gap: 0.5rem;
grid-template-columns: 1.5fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
background-image: url("img/paper-texture.jpg");
box-shadow: -1px 1px 6px rgb(0 0 0 / 25%), 0 0 8px rgb(0 0 0 / 5%);
}
.item {
padding: 4px;
border: var(--border-color) 2px solid;
}
.item span {
display: block;
}
.polaroid {
width: 90%;
padding: 0.75rem 0.75rem 2rem;
margin: 0.25rem;
background: hsl(0deg 0% 100%);
box-shadow: 1px 1px 3px hsl(0deg 0% 13%);
grid-column: 1;
grid-row: 1 / span 2;
transform: rotate(-3deg);
}
.item.signature {
grid-column: 2 / span 2;
}
.item.print {
position: relative;
}
#finger {
position: absolute;
width: 250px;
transform: translate(0, 40%);
}
#fingerprint {
position: absolute;
width: 110px;
animation: 3s linear forwards show;
opacity: 0;
transform: translate(70%, 15%) rotate(8deg);
}
#signature {
width: 340px;
fill: none;
stroke: black;
stroke-width: 4px;
}
#pen {
fill: black;
opacity: 0;
stroke-width: 5;
}
.name {
stroke-width: 5;
}
.plant {
animation: 3s linear forwards plant;
}
@media screen and (max-width: 600px) {
.form {
padding: 0.2rem;
grid-gap: 0.25rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto) 3fr 2fr;
}
.polaroid {
width: 92%;
margin: 0.1rem;
padding: 0.5rem 0.5rem 1.5rem;
transform: rotate(2deg);
grid-column: 1 / span 2;
grid-row: 1 / span 4;
}
.item:nth-of-type(1),
.item:nth-of-type(2),
.item:nth-of-type(3),
.item:nth-of-type(4) {
grid-column: 3;
span {
padding-block: 0.5rem;
}
}
#fingerprint {
width: 12%;
}
#finger {
width: 27%;
}
.item.print,
.item.signature {
grid-column: 1 / -1;
}
.item.print {
min-height: 140px;
}
#signature {
width: 40%;
}
}
@keyframes plant {
40% {
opacity: 1;
transform: translate(0);
}
50% {
opacity: 1;
transform: translate(0) scale(0.95) rotate(4deg);
}
69% {
opacity: 1;
transform: translate(0) scale(0.95) rotate(4deg);
}
70% {
opacity: 1;
transform: translate(0) scale(1) rotate(0);
}
90% {
opacity: 1;
transform: translate(0%, 10%);
}
100% {
opacity: 0;
}
}
@keyframes show {
70% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}let name1 = d3.select("#name1");
let name2 = d3.select("#name2");
let pen = d3.select("#pen");
initPath(name1); // set the stroke properties
initPath(name2);
setTimeout(showAutograph, 3000);
setTimeout(() => {
pen.style("visibility", "hidden");
}, 7000);
// make it one big long stroke dash
function initPath(path) {
let lineLen = path.node().getTotalLength();
path
.attr("stroke-dasharray", `${lineLen}, ${lineLen}`)
.attr("stroke-dashoffset", lineLen);
}
function showAutograph() {
illustratePath(name1, 2000, 0);
illustratePen(name1, 2000, 0);
illustratePath(name2, 2000, 2000);
illustratePen(name2, 2000, 2000);
}
// illustrate the stroke of the path from zero to end
function illustratePath(path, duration, delay) {
path
.transition()
.duration(duration)
.delay(delay)
.attr("stroke-dashoffset", 0);
}
// illustrate the stroke of the path from zero to end
function illustratePen(pathToFollow, duration, delay) {
pen.style("opacity", 1);
pen
.transition()
.duration(duration)
.delay(delay)
.attrTween("transform", translateAlong(pathToFollow.node()));
}
// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
let l = path.getTotalLength();
return function (d, i, a) {
return function (t) {
let p = path.getPointAtLength(t * l);
return `translate(${p.x},${p.y})`;
};
};
}Description
This is an animation of Johnny Cash’s arrest sheet being filled out.
Image Attribution
Fingerprint by Stephen Kelly from the Noun Project