Sin City micro-action graphic novel
<main class="smooth">
<svg id="sinCity" viewBox="0 0 800 1200">
<defs id="defs17">
<mask id="blam1Mask">
<use fill="#fff" xlink:href="#blam" />
</mask>
<mask id="blam2Mask">
<use y="285" fill="#fff" xlink:href="#blam" />
</mask>
<mask id="blam3Mask">
<use y="570" fill="#fff" xlink:href="#blam" />
</mask>
<symbol id="blam">
<path
stroke="#000"
stroke-width="2.3"
d="M712.04 28.343h67.965v216.509H712.04zm-.288 224.822h67.91v49.781h-67.91zm-93.144 50.34l-55.236.068-16.754-52.361-.215 51.74H482.9V27.733h63.502l44.561 156.188 45.03-155.407 66.752.174 1.337 274.306h-66.259l.296-58.544-19.675 57.95M319.127 39.656l-9.352 8.455v256.16h66.048l.26-70.506 31.215.13.863 70.376h67.379V48.321l-8.827-9.821-8.565-9.562H330.796zm57.166 39.452h30.263v100.874h-30.263zM22.358 29.285V302.69H165.8l16.812-16.37.833-103.435-17.645-18.244 16.812-14.29.006-102.146-16.818-18.92zm59.924 50.166h35.96v61.52h-35.96zm-.09 109.291h35.841v68.226H82.192zM191.596 27.816v276.591h63.75v-.016h49.899v-49.694h-49.9V27.817z"
/>
</symbol>
</defs>
<path fill="#fff" d="M0 0h800v1200H0z" />
<use
id="blam1"
width="100%"
height="100%"
x="0"
y="0"
class="outline box1"
xlink:href="#blam"
/>
<use
id="blam2"
width="100%"
height="100%"
x="0"
y="285"
class="outline box2"
xlink:href="#blam"
/>
<use
id="blam3"
width="100%"
height="100%"
x="0"
y="570"
class="outline box3"
xlink:href="#blam"
/>
<path
id="grave"
d="M539.115 610.053l-84.318 44.692c6.632-14.13 12.847-16.154 26.368-17.43-19.31-20.582-23.272-18.429-46.48-8.491-3.345-14.902-21.133-8.015-35.372-7.734-8.797 14.555-24.074 16.348-14.94 30.619-13.922 13.804-22.056 30.525-19.616 51.102 0 0 21.658-25.506 26.578-15.592l-62.27 36.35 17.877 44.99c-1.797 3.543-5.347 1.716-5.347 1.716-5.367-8.22-4.204-15.936-2.796-24.157-1.363-.43-24.304 24.114-20.283 34.492-11.967 6.027-8.084 18.448-8.238 32.283 11.441 11.704 20.196 16.714 29.879 14.71 6.8 9.976 12.045 13.976 33.326 12.816l17.791 27.127c-1.087 2.057 1.67 13.058 1.67 13.058l104.604-49.572 23.28 37.161-21.409 12.73 4.325 9.83-20.66 11.72-9.988 7.402 4.512 5.917 14.175-.761L505 945l-125 75 69.506 23.88 215.04-21.657 117.448-136.565-.85-96.9L665 855l-15-30 5.611-10.26-3.724-3.873-8.938 4.618-20.262 12.068-7.447-8.047-18.531 8.644-26.458-32.777 69.122-36.05 37.696-18.598 2.53-17.697-24.861-21.49c3.508-22.638 4.77-20.569-5.056-39.187 5.794-9.92-2.679-23.36-4.573-34.808-15.525-2.125-27.81-12.899-42.038-5.945 6.4-.46-25.262-3.558-44.196 6.655 1.32.414 2.335 2.964 3.542 2.863 13.705-1.144 16.506 7.134 13.03 11.44l-14.85-13.361zm-18.206 50.165c6.314-.135 12.125 1.142 16.48 4.661l-50.14 26.757-8.637-16.643c6.752-4.877 26.162-14.433 42.297-14.775zm130.985 37.317c-4.972-3.681-7.385-7.674-12.957-10.323 4.768-6.362 18.168 5.653 12.957 10.323zm-61.234 9.499c2.995 22.212-30.254 42.324-49.31 54.671l-14.75-19.962 54.228-30.241zm-166.697.322l9.141 15.038-41.616 23.844c4.289-12.322 18.55-33.393 32.475-38.882zm40.533 66.444l14.537 21.49-37.904 14.953c-17.056 4.271-5.564-1.488-21.719-4.63l-5.477-4.214zM362.52 816.48c3.553 7.485 6.88 15.079 10.479 22.542-9.322-1.04-15.182-18.946-10.48-22.542z"
class="box3"
/>
<text id="insetText1a" x="564.994" y="214.765" class="text1">WORTH</text>
<text id="insetText1b" x="569.192" y="229.299" class="text1">DYING</text>
<text id="insetText1c" x="574.555" y="245.019" class="text1">FOR</text>
<path
id="bubble3"
d="M222.699 663.087h79.849v72.102h-79.849z"
class="bubble text3"
/>
<text id="insetText3a" x="238.765" y="679.043" class="text3">WORTH</text>
<text id="insetText3b" x="239.254" y="694.189" class="text3">GOING</text>
<text id="insetText3c" x="236.865" y="709.583" class="text3">
TO HELL
</text>
<text id="insetText3d" x="245.993" y="724.489" class="text3">FOR.</text>
<path id="blam4" d="M22.809 882.734H783.16v275.3H22.809z" class="box4" />
<path
id="bubble4"
d="M648.846 934.9a33.127 24.81 0 00-33.127 24.81 33.127 24.81 0 001.927 8.257l-30.325 16.932 36.415-9.054a33.127 24.81 0 0025.11 8.673 33.127 24.81 0 0033.128-24.808 33.127 24.81 0 00-33.128-24.81z"
class="bubble text4"
/>
<text id="insetText4" x="629.434" y="963.146" class="text4">AMEN.</text>
<path
id="shell"
d="M420.51 92.415c1.14-.01 2.522.257 3.41-.627.777-.746.054-2.148.838-2.744l11.886-8.72-7.802-10.858c-3.713 2.749-7.573 5.355-11.754 7.342-.985.644-2.07-.251-3.145-.112-.98-.043-2.687.703-2.333 1.818 2.078 5.175 6.374 8.981 8.9 13.901z"
class="box1"
/>
<g id="marv" class="box4">
<path
d="M21.587 1048.178l6.257-1.042s5.065-5.363 10.13-6.257c5.065-.894 37.84-5.959 37.84-5.959l22.94.298-7.701-3.56-8.387-1.803-22.942-2.384-30.688 5.661-6.853.298z"
/>
<path
d="M120.311 1098.002c-5.608-.195-10.884 1.838-15.949 3.926-7.578 2.273-15.247 4.345-22.769 6.743-4.817 2.953-9.53 6.158-14.413 8.955l-40.08 8.912c-1.986 1.49-3.972 2.98-5.958 4.468.259 1.546-.62 5.168 1.692 2.969 3.383-1.755 6.383-4.475 10.297-4.888 11.25-2.49 22.485-5.259 33.743-7.575 1.56.3-2.44 1.878-3.214 2.714-6.486 4.379-13.245 8.39-19.556 13.006-7.481 6.224-14.838 14.6-22.412 20.714l17.13-.187c.2-1.72-.9-6.107.188-7.373 7.135-4.43 14.185-9.046 21.375-13.36 16.294-5.068 32.537-10.352 48.864-15.284 10.018-1.628 20.025-3.419 30.048-4.946 1.703.238 3.75-.188 5.255.433 2.472 1.872-.606 2.079-2.193 2.732-7.548 2.717-15.233 5.116-22.694 8.033-6.033 3.282-12.307 6.164-18.186 9.7-5.994 4.264-12.29 8.135-18.081 12.658-2.132 1.845-4.263 5.69-6.394 7.534l22.124.073c-.175-2.21-.349-6.42-.523-8.63 6.393-5.04 12.676-10.23 19.603-14.535 3.678-2.376 7.096-5.244 11.368-6.494 5.216-2.27 10.765-3.703 16.253-5.094 4.27-.38 9.66-.937 13.93-1.316-.65-1.557-2.347-7.349-2.41-5.522-.016.453-1.06 2.109-1.932 2.599-6.267 3.974-10.72-8.19-2.601-7.72 1.482-.013 3.104.218 3.221.532.12.32-1.25-2.603-1.531-4.272-2.287 1.085-5.065 2.72-7.732 2.305-2.122.375-3.317-2.019-5-2.952-3.455-3.168-8.191-4.238-12.33-6.243-3.031-.873-5.922-2.72-9.133-2.615zm-.663 3.917c7.173 3.136 14.724 5.561 21.554 9.394 3.437.83 3.688 4.305-.06 3.47-6.299.125-12.64-.255-18.912.193-7.36 1.296-14.801 2.258-22.112 3.763-6.385 2.134-12.933 3.88-19.216 6.26-4.978 2.65-10.004 5.21-14.903 8.008-2.046.234-4.266.179-1.43-1.417 4.199-3.1 8.105-6.656 12.494-9.463l38.326-20.153 4.259-.054z"
/>
<path
d="M620 1160l-92.512-48.904-10.534-13.905-30.337-32.023-6.742-11.377 10.955-17.275-10.533-2.107-.422 3.37-12.117 12.41-2.682-1.266-6.48 2.607 1.713.522 5.884-2.31.447 1.118-1.564 1.415.67.447 12.216-7.523-8.79 10.503-.446 3.575-11.694-.298-.15-1.117-19.291-.224-.745 3.203 9.758 8.194 35.976 1.266 25.315 46.483L525 1160z"
/>
<path
id="chin"
d="M473.239 1079.915l6.426 10.64-5.689 13.377-10.428 14.327-2.74-2.74-.947 2.424-3.582 3.37-2.001-.421 3.265-4.424-1.474-1.58-9.06 8.006-3.265.948 2.95-3.582 6.425-4.213.21-4.214-12.324 9.902-1.264-1.054 5.056-7.795-8.005 8.638-1.58.421.42-2.106 2.529-3.16-1.685-4.32-3.793 2.213-3.054 4.108-2.529-2.318 6.847-6.004 6.32-3.37 2.424-5.162-2.74-.105-3.265 2.528s-1.79 4.213-2.212 4.424c-.421.21-7.479 4.95-7.479 4.95v-1.263l2.95-3.055.632-3.792 6.53-7.585-9.059 6.11-4.424 2.001s-1.896 1.58-.421-1.158c1.475-2.739 3.265-9.165 3.897-10.323.632-1.159 14.959-8.428 14.959-8.428s20.33-3.686 21.7-3.897c1.369-.21 9.48-2.317 9.48-2.317z"
/>
<path
d="M443.639 886.724l46.77 8.427-.632 2.95 13.483 1.895s-.842 5.478 1.686 4.214c2.528-1.264 9.691-1.896 10.955-1.053 1.264.842 10.323 4.845 14.537 4.634 4.213-.21 11.166-.632 11.166-.632l1.264-.842-18.961-19.383-3.582-3.37-93.962.421 6.742 5.056s10.955 29.916 11.376 30.97c.422 1.053 4.425 13.273 4.425 13.273l2.317 9.27s6.531 12.008 6.742 12.85c.21.843 1.474 7.374 1.474 7.374h-2.106l-30.97-24.649-2.317 33.076 11.166 6.11 57.515 1.686 4.424 53.301s19.593-1.264 19.593-2.95c0-1.685-1.475-54.776-1.475-54.776s3.582-2.317 4.214-4.213c.632-1.896-2.74-49.299-2.74-49.299l-8.637 1.264s-3.37-5.688-4.635-5.899c-1.264-.21-9.06-7.795-15.8-9.48-6.742-1.686-13.905-4.214-15.17-5.267-1.264-1.054-3.581-2.739-3.581-2.739s-.843-1.264-3.16-2.528c-2.318-1.264-12.64-6.32-13.484-6.742-.842-.421-.42-.21-1.896-.421-1.474-.21-6.741-2.528-6.741-2.528z"
/>
<path
d="M467.445 980.054l2.95 2.739-3.16 2.528-14.327 1.475-10.744-6.531 13.483-1.054 1.475 2.318 5.688 1.474 3.371-.632z"
/>
<path
d="M462.395 992.91c.595-.149 3.426-1.192 3.426-1.192v-1.191l3.128-.299-.745 1.937s-3.724 1.34-4.022 2.235c-.298.894-3.873 10.428-6.257 11.47-2.383 1.043-17.43 12.812-19.962 14.45-2.532 1.64-21.005 9.088-22.941 9.386-1.937.298-16.983 4.767-16.983 4.767l2.83-4.767-12.662 4.171 6.703-5.214 10.13-3.426s15.791-1.34 18.77-2.533c2.98-1.191 11.323-5.214 11.323-5.214l1.936-5.065-33.37 5.96 27.56-11.323s-.297-1.34-1.191-.894c-.894.447-31.88 9.684-31.88 9.684s.596-2.086 1.34-2.384c.745-.298 18.324-6.853 18.324-6.853l-15.195.894-11.918-12.067-2.085-5.81 4.469.299.447-4.917-10.28-2.979 2.384-1.639 11.322 4.916 4.618-.744-7.15-3.278-6.108-1.192 7.001-.595 17.132 2.532-12.067-3.128 1.192-1.788-9.385-4.022 10.577.298 7.597 1.34s1.192 1.043 1.788 1.043h9.385l1.043 1.937-11.322.447 5.512 1.788s-.447.297.15.297h7l1.64-2.681 2.234 2.681s-1.937.298-1.192 1.043c.745.745 3.278 1.788 3.278 1.788l-2.235.596-4.171-1.49-3.277 2.533 1.34 1.787 5.512-.149 6.257 6.555 7.449 4.767s4.022 1.043 4.916.596c.894-.447 7.895-4.171 7.895-4.171l-2.681-1.341 7.001-1.788 4.916-.596-1.936 1.937s-6.853 3.575-7.002 4.32c-.149.745-9.236 9.534-9.236 9.534l-1.639 1.192.298 1.043h2.384l6.257-5.959 4.32-4.618 4.32-3.873z"
/>
<path
d="M442.358 988.962s.484 1.192.67 1.155c.186-.038 2.793-.112 2.793-.112l.298 3.054-3.5-1.08-2.049-1.006s-.596-2.123-.298-2.272c.298-.149 2.086.26 2.086.26z"
/>
<path
d="M435.212 982.582s.737 4.003 1.264 4.214c.526.21 2.422 1.264 2.317.737-.105-.527-.948-4.003-.948-4.003z"
/>
<path d="M431.946 979.317l.737 2.106.948-1.79z" />
<path
d="M391.601 969.31l4.846 1.053 7.69.737s1.79 1.58 2.317 1.475c.527-.105 3.792 0 3.792 0l-1.37-1.159-5.688-2.107-4.634-.526-4.214-.948-.527-1.264z"
/>
<path
d="M319.53 921.106l9.833-1.192 17.876 19.366 8.343 18.77-16.685-19.068-14.003-14.599z"
/>
<g id="raisedGun">
<path
d="M163.205 1128.252l-1.33.628-34.89-98.358 3.33-1.142-14.211-38.91c1.308-.197-2.238.658-3.461.982L74.37 881.356l1.525.155"
/>
<path
id="trigger"
d="M153.004 900.907c0-.035-5.263-.69-6.228-2.267-2.13-3.478-5.686-16.094-5.686-16.094l-6.506-.022s5.877 14.601 6.227 19.007c.093 1.165-.573 1.96-1.188 2.703-.18.217-1.488.504-3.247.826-4.312.79-13.104 2.356-12.891 3.04.127.409 15.603-.529 15.884.05 1.155 2.378 3.243 5.68 3.243 5.68l17.667 56.437c12.755 7.54 14.858 24.2 16.378 37.638 3.826 9.485 9.134 18.689 11.64 28.535.962 3.246-2.438 14.529 2.819 9.482 2.467 8.959 3.314 18.907 5.115 28.277 6.024-8.24-4.334 3.635 3.171 5.826 11.772 13.61 22.9 27.842 35.088 41.051 1.589-6.083-8.861-18.954-12.041-27.266-4.683-4.675-7.154-18.333 1.062-8.092 9.25 14.256 15.549 30.898 27.74 42.935-.132-9.218-8.297-18.778-12.17-27.824-3.495-10.25-15.92-18.984-15.683-28.721 1.478-1.095.634-11.152 2.866-3.049.248 10.063 6.335 19.783 7.185 8.718 1.582 11.865 13.417 17.29 17.347 28.56 8.206 16.502 21.217 35.788 26.746 53.494 6.011.465 8.891-3.665 2.17-10.124-6.801-11.669-10.861-25.198-13.785-38.299-1.103-7.972.757-16.706-4.28-23.577-3.077-4.124-1.539-9.401-2.002-14.178 4.124-1.512 3.603 6.868 5.307 9.79 6.769 3.21-2.65-12.875.517-17.057.6-9.975 3.98-2.286 2.867 3.01.878 3.8 4.88 5.907 3.817 11.078 1.838 2.03 5.26 10.224 6.077 8.02.973-2.094-.49-12.754 1.165-8.441 8.863 20.65 17.96 41.26 27.659 61.503 1.706 3.72 6.965 6.9 4.325 11.283-2.827 5.1 7.659 5.691 10.382 6.616-5.401-10.567-15.513-23.798-18.328-35.557-4.022-10.916-7.81-22.227-7.44-34.007 2.947 4.386 7.645 7.998 7.597 13.706 6.59 12.426 11.59 25.812 20.62 36.763 2.395 3.918 6.186 7.47 7.758 11.603-.312 5.746-7.172 4.617 1.395 5.375l32.053-.272c-1.29-3.829-4.526-9.796-4.675-13.543 5.479-6.008 5.978-14.777 2.315-21.966.695-5.25 17.602-8.104 7.484-9.017-4.115-1.01-7.291 7.932-8.433 2.43-3.778-5.123-5.392-8.177 3.062-6.826 10.522-.982 2.309-7.576.113-13.835-8.696 1.824-7.617 6.099-4.134 12.399-6.144 1.412-6.445-6.854-9.465-10.517-7.22-15.822-12.88-32.358-19.49-48.46.811-4.916.837-10.163 4.814-13.752 4.498-3.335.228-7.788-.899-11.84l-8.83-22.078c-7.631-1.27-16.464-3.602-23.088 1.763-5.484 4.297-11.619-5.613-18.586-2.928-10.633 3.881-15.37-8.04-25.378-7.788-8.756 0-16.224 5.68-19.866 13.356-5.236 5.385-2.955 13.473-6.852 19.555-2.698 8.936-7.988 12.751-14.224 17.959 9.699-8.152 8.9-20.417 2.272-31.17-4.915-12.316-8.868-24.967-12.507-37.707-7.2.557-21.58 10.977-23.855 4.676-1.502-10.035 19.693-11.684 16.13-12.428-12.688-2.433-21.45 9.302-20.81 18.929-2.746.217-2.243-11.49-5.714-15.05 8.13 2.457 15.4-10.338 26.075-8.227 7.38-1.292 15.413 18.756 18.275 6.933-8.207-12.318-25.66-11.078-37.158-4.527-2.425-.097-5.763-1.444-8.059-.854-.302.078-9.646-29.439-9.646-29.439-.658-.623-11.283-32.207-11.283-32.207zm68.369 71.14c-10.415-1.892-7.211 4.768-4.742 10.967l12.959 38.334c3.426-5.06 7.901-7.816 1.864-10.925-2.008-9.68 19.274-9.22 13.908-22.049.787-10.395-17.227-10.887-23.99-16.326zm51.146 43.623c-.698 8.647-8.154 18.906-9.077 28.859-3.707-4.731 5.477-20.107 7.673-28.53zm29.806 4.874c-.067 7.261 2.51 21.817-4.18 23.729-1.038-4.354 1.652-9.404 2.114-14.038l2.066-9.691zm3.203 49.385c3.857 2.686 10.12 3.33 10.585 8.899.696 6.471 7.394 10.027 8.185 16.275-6.358-.959-6.314 2.433-4.039 7.34 2.43 7.873 3.605 16.3 8.901 22.912 4.97 9.138 12.164 17.225 15.25 27.252-4.61-.98-8.145-3.237-9.707-7.849-6.468-11.031-13.095-21.985-17.426-34.077-4.668-11.764-10.594-23.48-13.193-35.766l1.444-4.986zm-62.719 4.618c5.124 2.153 6.227 8.654 9.553 12.752 4.141 3.734-.022 7.863-3.917 5.843-2.319-5.467-7.021-10.891-6.877-16.79l1.241-1.805z"
/>
<path d="M75.94 888.563l-8.767-4.998" />
<path
stroke="#fff"
stroke-width="2.223"
d="M156.67 1110.313l28.74-11.051"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M140.317 1067.28l30.122-12.246"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M171.56 1058.02l-29.662 12.472"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M143.085 1073.926l30.65-12.77"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M143.81 1077.736l30.387-12.77"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M145.293 1081.807l30.387-12.772"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M146.94 1085.39l30.388-12.77"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M148.127 1089.275l30.387-12.773"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M150.06 1093.266l30.387-12.77"
/>
<path
stroke="#fff"
stroke-width="2.223"
d="M150.87 1096.95l30.387-12.77"
/>
<path
stroke="#fff"
stroke-width="2.283"
d="M151.94 1100.5l30.047-12.456"
/>
<path
stroke="#fff"
stroke-width="2.111"
d="M153.746 1104.48l30.387-12.77"
/>
<path
stroke="#fff"
stroke-width="1.111"
d="M154.671 1107.266l21.816-9.198"
/>
<ellipse
id="path4987"
cx="206.372"
cy="1117.946"
stroke="#fff"
stroke-width="2.242"
rx="2.001"
ry="2.512"
/>
<circle
cx="210.547"
cy="1131.651"
r="1.332"
stroke="#fff"
stroke-width="1.335"
/>
<ellipse
cx="162.328"
cy="993.58"
stroke="none"
stroke-width="2.242"
rx="1.825"
ry="1.788"
/>
<path
d="M345.303 1033.281l22.941 58.993c-5.473-1.641-8.83 1.17-13.854 3.277a2725.39 2725.39 0 01-18.621-46.479c-.203-7.443 3.386-14.245 9.534-15.79z"
/>
<path
stroke="#fff"
stroke-width=".9"
d="M212.17 1145.351c2.785 1.295 4.993 1.578 7.489 1.159 6.063-1.018 6.42-6.48 2.71-15.009.003-.365.434-.566.497-.189.423 2.533 6.26 16.095-2.85 16.328-3.255.383-5.838-.218-7.64-1.074-.444-.21 3.624.085 3.189-.073z"
/>
<path
stroke="#fff"
stroke-width="1.9"
d="M196.473 1128.884c3.198.3 4.819.459 6.193 2.955 2.432 6.388 5.267 10.203 10.358 14.738-1.237 4.495-.858 9.797.428 12.61"
/>
<path
fill="none"
stroke="#fff"
stroke-width="1.9"
d="M197.295 1129.479l-7.891-19.004-67.606-205.151c-3.743-2.109-7.665-4.157-10.034-6.724"
/>
<path
fill="none"
stroke="#fff"
stroke-width="3"
d="M111.892 898.954c-1.79-4.714-4.54-12.375-4.816-17.089"
/>
<path
fill="none"
stroke="#fff"
stroke-width="1.5"
d="M112.946 990.804c2.724-.492 5.74-1.454 7.679-.536 4.076 11.2 8.115 24.113 13.304 36.16-.026 2.691-3.47 3.522-5.715 4.465"
/>
<path
fill="none"
stroke="#fff"
stroke-width="1.5"
d="M161.958 1128.143l34.47.964"
/>
<path
fill="none"
stroke="#fff"
stroke-width="1.5"
d="M179.807 1128.405c-.2 4.97-3.764 11.021-6.925 12.332-2.203.801-4.098 2.175-5.149 3.537l6.77 13.868"
/>
<path
fill="none"
stroke="#fff"
stroke-width="1.5"
d="M182.305 1158.602c-7.958-16.133-4.886-14.815 6.215-29.692"
/>
<path
fill="#fff"
stroke="#fff"
stroke-width="3"
d="M169.375 1055.09l2.768 8.214"
/>
</g>
</g>
<g id="victim" class="box2">
<path
stroke="#000"
stroke-width="2.36"
d="M75.515 586.217c8.343-7.15 145.992-53.034 145.992-53.034L88.03 447.376l7.15-10.726-19.068 1.192-29.794-8.939c.411-3.476-4.21-6.952 3.277-10.428 12.394 3.31 28.27 2.525 40.52.298l-10.726-9.534-34.859-13.705c-2.26-4.776-2.201-9.063 3.873-10.726l31.582 9.236 15.493-3.575-.596-4.172a301.351 301.351 0 01-40.818-21.154c-.032-3.132-2.34-4.443 1.192-10.428 12.338 4.378 24.826 7.997 37.54 11.024 3.583.21 6.71-.266 7.152-4.767L71.344 345.48c2.401-10.358 5.972-8.342 11.322-8.938 23.008 8.509 42.247 18.349 64.356 28.9 0 0 10.726 3.278 13.11 2.086 10.547-7.81 11.522-5.373 12.246-16.97 8.244-16.13 14.768-22.267 23.988-7.486-3.049 4.552-5.571 8.406-5.123 11.583-17.55 19.295-8.491 25.637-1.616 44.753l23.538 11.62 41.712 16.685 65.846 25.92 15.195-3.873c34.04 2.28 50.82 17.595 69.759 15.22 4.308-.54.274-13.522 5.291-17.163 7.041-5.108 22.042-2.838 31.017-4.016 3.704-11.025 3.349-7.649 14.302-4.767 3.32-13.798-10.18-10.007-4.47-23.537 2.483-1.49 8.423-.387 7.45-4.47l-4.768-11.917c3.797-5.12 8.171-7.593 13.556-9.534 9.708 3.157 14.702 1.018 21.75 2.383l2.83-6.852-2.88-12.532 6.032 9.019c-.5-5.511-3.927-11.641 2.808-18.237l-.745 12.662 4.091-7.584 1.65 8.356c9.453-.816 10.535-2.002 16.456-3.602-.136-4.39-.436-11.99 4.003-13.758 1.29-.427-.806 10.814.724 10.721 4.173-.253 3.355-11.402 5.403-10.817 1.24.354 6.809-2.705 10.675-1.735 1.096.275.425 2.555 1.541 2.945 2.616.917 4.668-.783 7.263.129 5.54 1.947 12.103 1.491 12.103 1.491 22.359 7.626 41.922 19.214 51.246 33.966 3.573 3.873 5.506 7.746 6.704 11.62l6.405-5.364-.596 10.428s.948-.318 4.023-1.936c3.193-1.681-6.704 11.173-6.704 11.173l-1.788 10.13c-2.696.114-6.573.177-9.1 2.782l.116 5.186-1.722 6.319-2.599 1.884c-.957 2.45-2.225 5.034-1.862 6.918l-3.71 6.931-.323 5.454 4.085 5.665c-3.516-.112-5.694.31-6.231 1.39l-2.564 6.184 4.034 2.43 5.32.873 1.585 4.713 4.765 1.213-.245 2.68c-2.827-1.148-5.155-1.07-6.594.162l.52 4.614 3.543 1.182 1.583 5.213-3.552 3.284 2.747 14.231-4.23-10.082-.165 10.231-3.728 3.743-3.05-1.732-5.14 11.918 42.755 52.29c-53.776-.354-107.558.095-161.336.148-5.959 0-179.958-1.192-183.533-.596-3.575.596-216.903-1.192-216.903-1.192z"
/>
<g id="brains" stroke="none">
<path
id="path4819"
d="M633.88 415.648l4.003-2.106 1.897-9.27.42-1.475 2.95 5.688-3.37 11.166-6.742-.21z"
/>
<path
id="path4821"
d="M643.466 415.227l3.898-4.319 1.79-4.53.422-1.896 1.896 6.847-5.372 4.951-3.055.843z"
/>
<path
id="path4823"
d="M660.637 426.814l3.897-3.265 13.378-3.476 3.055 4.213-2.001 2.212-10.956 3.055-4.002 1.475-3.687-1.791z"
/>
<path
id="path4825"
d="M632.45 439.92c9.38-.489 11.67-5.18 13.018 4.064-6.378 3.541-13.298 2.962-20.12 4.214-17.036.44 1.116-5.608 7.101-8.278z"
/>
<path
id="path4829"
d="M655.264 436.084l3.371-1.475 2.95.948.737 2.95-3.37 1.79-3.898-2.422z"
/>
<path
id="path4831"
d="M649.681 445.775l8.006-2.423s16.75-.948 17.276-.842c.526.105 4.003.842 4.003.842l.316 3.371-7.374 2.423s-13.589-1.159-14.22-.948c-.633.21-8.217 1.053-8.217 1.053z"
/>
<path
id="path4833"
d="M685.852 431.287l21.6-3.873 24.283-2.98 11.62.447s.596 4.767 0 4.916c-.596.15-10.279 2.086-10.279 2.086l-7.598 2.83s-8.193.298-12.662.15c-4.47-.15-16.685.744-17.28.744-.597 0-8.194.298-8.79.149-.596-.149-1.34-.596-1.34-.596z"
/>
<path
id="path4835"
d="M739.78 447.227l41.563-1.34s-.15 11.023-1.639 10.278c-1.49-.745-24.133-4.469-26.964-4.916-2.83-.447-16.238-1.192-16.238-1.192z"
/>
<ellipse
id="path4788"
cx="613.638"
cy="452.106"
rx="2.272"
ry="1.75"
/>
<ellipse
id="path4790"
cx="609.579"
cy="467.301"
rx="1.937"
ry="1.75"
/>
<ellipse
id="path4792"
cx="615.761"
cy="472.44"
rx="1.937"
ry="1.676"
/>
<ellipse
id="path4794"
cx="610.659"
cy="480.187"
rx="3.091"
ry="2.346"
/>
<ellipse
id="path4796"
cx="616.841"
cy="488.157"
rx="2.197"
ry="1.974"
/>
<ellipse id="path4798" cx="618.48" cy="499.814" rx=".708" ry=".67" />
<path
id="path4800"
d="M633.986 499.077c.971 1.924.71 2.995.158 4.95-2.986 2.217-5.122 2.099-8.638 1.897.66-5.633 3.461-6.94 8.48-6.847z"
/>
<path
id="path4802"
d="M645.034 513.817l2.532-.223 1.416.968 1.266-2.756 9.236 2.756s6.853 2.83 7.225 2.98c.373.148 5.214 4.469 5.214 4.469l.522 9.012-2.905.82s-7.449-5.661-7.672-6.034c-.224-.372-10.577-6.554-10.577-6.554l-4.47-.373-1.191-3.277z"
/>
<path
id="path4804"
d="M614.92 456.625l9.375.105 1.053 1.37 13.694.21 4.214-2.317 5.161 2.528s9.27-.737 10.008-.737c.737 0 7.795 1.053 9.48 1.264 1.685.21 5.162.632 6.215.737 1.053.106 7.058.316 7.584.316.527 0 5.478-1.58 5.478-1.58l7.795-3.792 9.06.316s16.01 3.266 17.17 3.476c1.158.21 8.848 1.896 8.848 1.896l2.528 3.582 7.9 2.633.422 5.267s-3.055 2.107-4.74 1.686c-1.686-.422-17.908-3.055-19.383-3.687-1.474-.632-22.542-5.688-22.542-5.688l-5.583 5.056-39.08-6.953s-24.229-1.053-25.072-1.053c-.842 0-10.112-1.58-10.112-1.58z"
/>
<path
id="path4806"
d="M620.453 472.552l.522 5.735-3.054.745-.149 3.576 2.235.149 3.65-1.714 7.001 2.384 5.586.223 3.725-1.34 6.108.968 2.16-2.086s3.724-2.681 4.618-2.681c.894 0 18.621 3.65 18.621 3.65l1.788-1.267s-1.117-2.905-2.086-3.202c-.968-.298-21.824-4.097-21.824-4.097l-5.437 3.65-3.427-.447-2.83-3.874z"
/>
<path
id="path4808"
d="M677.659 476.798l13.63.149 2.756 2.83 4.023 2.384-.82 2.905-6.033.074-6.778-3.724s-4.544-1.713-5.065-1.937c-.522-.223-1.415-.67-1.639-1.117-.223-.447-.074-1.564-.074-1.564z"
/>
<path
id="path4810"
d="M669.987 488.418v3.277l1.787 1.415 3.724-.447.745-2.234-2.607-2.458h-1.415z"
/>
<path
id="path4812"
d="M641.384 489.013l5.586-.968 6.555 2.16s8.79 3.873 9.385 4.022c.596.15 4.395 2.384 5.96 3.129 1.563.745 5.884 2.383 7 2.756 1.118.372 3.874 2.756 3.874 2.756l5.661 2.607-.149 1.564-11.173-2.384s-8.864-2.458-9.236-2.756c-.372-.298-13.556-7.001-13.556-7.001s-5.661-.745-6.108-1.043c-.447-.298-3.725-2.16-3.725-2.16z"
/>
<path
id="path4814"
d="M676.84 511.583l8.193 3.575 8.342 2.607 4.022 1.788 2.533-2.235s-3.278-2.384-3.575-2.533c-.298-.148-14.749-4.618-15.196-4.692-.447-.075-3.724.223-3.724.223z"
/>
<path
id="path4816"
d="M717.625 494.442l9.586.843 6.426 1.264-.527-1.897 3.897-.105 1.475 3.687 4.108 2.001 5.267-.105 5.162 1.896s7.163-.843 8.111-1.053c.948-.21 6.531-2.528 6.531-2.528l2.423-1.58 7.69 4.53 2.422.631 12.325.948 6.426 3.16 1.053 9.06s-2.739 1.79-4.003 2.422c-1.264.632-8.322 1.58-9.375 1.37-1.053-.211-5.056-.527-5.583-.738-.527-.21-16.854-6.32-19.382-7.268-2.528-.948-10.534-3.055-11.272-3.055-.737 0-7.795-.843-8.953-1.264-1.16-.421-5.583-2.633-6.215-2.95-.632-.315-5.478-2.738-7.585-3.476-2.107-.737-4.74-1.264-6.32-1.264s-4.424-.737-4.424-.737z"
/>
<path
id="path4818"
d="M754.757 519.196l3.16-2.844c3.657.432 6.024 2.09 8.901 4.161v1.844c-1.435 3.236-3.427 2.122-6.583 1.738-2.693-1.174-3.943-2.597-5.478-4.899z"
/>
<path
id="path4820"
d="M767.488 548.08l-1.042 4.172-10.13-.894-12.216-5.512-6.406-4.916-4.469-2.384s-4.171-3.5-5.065-4.096c-1.766-3.05 3.33-1.18 8.79-2.756l8.64.745 6.703 5.512 3.576 4.17 8.64 2.533z"
/>
<ellipse
id="path4822"
cx="761.12"
cy="465.215"
rx="6.369"
ry="3.017"
/>
<path
id="path4824"
d="M610.6 508.347l2.529-2.529 1.264.685.474 2.265s-.58 1.79.158 1.896c.737.105 1.475 4.688 1.475 4.688l-.474 7.373-3.055 1.317-.053-3.424.053-9.48-.316-1.58-2.581-.053z"
/>
</g>
<path
id="skull"
d="M625.691 417.498c9.038 19.013 8.364 29.78 10.738 45.765-.545 17.477-8.958 34.314-16.857 48.98-16.776 17.043-23.973 20.287-24.66 11.188l3.302-43.788L605 441.786z"
/>
</g>
<path
id="bubble2"
d="M443.217 489.175h75.633v55.408h-75.633z"
class="bubble text2"
/>
<text id="insetText2a" x="457.674" y="504.024" class="text2">WORTH</text>
<text id="insetText2b" x="454.163" y="519.169" class="text2">
KILLING
</text>
<text id="insetText2c" x="468.287" y="534.053" class="text2">FOR.</text>
<g id="gun" class="box1">
<path
id="path110"
d="M242.885 50.367l-.447 5.959-6.703-.447s.073 1.489-2.311 6.256c-2.383 4.767-10.575.447-14.15.447-3.576 0-19.069 21.153-19.069 21.153l-22.197-2.83-1.788-4.767-25.027-1.788-1.191 9.535c19.197 4.26 26.451 10.019 38.88 16.536l.15 19.068-8.938 21.75-15.494 1.788-16.536 9.533-14.747 8.79 1.428 9.863 4.5.472.178 1.88-9.383 4.768c-12.692 27.337-20.249 45.156-47.97 61.675l-59.797.118-.505 69.583 386.446.291-.187-26.667c11.634.639 20.396-2.746 26.188-7.752 14.935-12.907 13.682-40.157 17.453-63.432 2.992-7.302 7.984-13.461 13.745-19.181l11.729-8.081 99.068-.447 6.85-10.13 135.511-.025 6.134-4.39 7.026-2.636-.394-28.744 2.935-3.175-.562-68.479-5.975-.016-3.168-4.78-7.533.13-2.426-3.378-4.461-4.805-3.113.021-7.948 3.945-3.477 3.966-244.686.564-6.853 6.927-74.783-.15-3.576-6.256-57.354-.074-56.533-7.226-3.13-5.065zm181.82 143.16c10.219 7.667 18.325 11.985 18.174 41.116-2.792 18.622-5.055 26.751-15.791 40.436 0 0-82.076-.035-82.205-.163l-.53-80.895c-.28-.009 52.94-.196 52.94-.196z"
/>
<path
id="triggerFinger"
d="M402.067 190.442l14.395 39.144.505 17.677-59.094 21.971-15.657.253-1.263-78.792z"
/>
</g>
<text id="insetText1a-big" x="356.219" y="123.996" class="bigText1">
WORTH
</text>
<text id="insetText1b-big" x="360.416" y="174.63" class="bigText1">
DYING
</text>
<text
id="insetText1c-big"
x="365.779"
y="226.65"
fill="#000"
class="bigText1"
>
FOR
</text>
<text id="insetText2a-big" x="374.497" y="396.859" class="bigText2">
WORTH
</text>
<text id="insetText2b-big" x="370.986" y="454.005" class="bigText2">
KILLING
</text>
<text id="insetText2c-big" x="385.111" y="508.888" class="bigText2">
FOR.
</text>
<text
id="insetText3a-big"
x="377.122"
y="663.422"
fill="#000"
class="bigText3"
>
WORTH
</text>
<text
id="insetText3b-big"
x="377.612"
y="716.567"
fill="#000"
class="bigText3"
>
GOING
</text>
<text
id="insetText3c-big"
x="375.222"
y="769.961"
fill="#000"
class="bigText3"
>
TO HELL
</text>
</svg>
</main>main {
display: grid;
place-items: center;
}
svg {
width: 100%;
max-width: 1000px;
opacity: 0;
}
#bg,
.outline,
.bubble,
#marv {
fill: hsl(0, 0%, 100%);
}
#blam3,
#victim {
fill: hsl(0, 0%, 0%);
}
#grave {
fill: black;
stroke: black;
stroke-width: 2;
}
.outline,
.box1,
.box2,
.box3,
.box4,
.text1,
.text2,
.bigText2,
.text3,
.bigText3,
.text4,
#brains {
opacity: 0;
}
text {
font-family: roboto, sans-serif;
font-size: 12px;
font-weight: bold;
}
.bigText1,
.bigText2,
.bigText3 {
font-size: 53px;
line-height: 1.5;
}
.container {
position: absolute;
display: flex;
justify-content: center;
border: 1px solid red;
border-radius: 5px;
color: hsl(0, 100%, 50%);
inline-size: 100%;
inset-block-start: 20px;
inset-inline-start: 0;
margin-block-end: 20px;
margin-inline-start: 2px;
margin-inline-start: 20px;
}
.smooth {
scroll-behavior: smooth;
}// CSSRulePlugin is not required to be explicitly declared
const tl = new gsap.timeline();
const pauseBetween = 1;
const textRevealDelay = 0.5;
const mainSvg = document.getElementById("sinCity");
mainSvg.addEventListener("click", replay);
let gun = document.getElementById("gun");
let victim = document.getElementById("victim");
let grave = document.getElementById("grave");
gsap.set(".bigText1", { scale: 1, transformOrigin: "50% 50%" });
gsap.set("#gun", { xPercent: -10 });
gsap.set("#shell", { transformOrigin: "50% 50%" });
gsap.set("#victim", { x: -5, y: -1, transformOrigin: "50% 50%" });
gsap.set("#brains", { x: -15, scale: 0.9 });
gsap.set("#grave", { scale: 1.2, transformOrigin: "50% 50%" });
gsap.set("#raisedGun", { rotation: 6, transformOrigin: "50% 100%" });
tl.to("#sinCity", 0.01, {
opacity: 1,
});
tl.to(".bigText1", 0.3, {
scale: 0,
delay: pauseBetween,
onStart: () => {
document.getElementById("blam1").scrollIntoView(true);
},
});
tl.to("#gun", 0.1, { opacity: 1, delay: pauseBetween });
tl.to("#gun", 0.2, {
xPercent: 0,
ease: "power3.easeInOut",
});
tl.to("#triggerFinger", 0.05, {
x: -5,
ease: "power3.easeInOut",
repeat: 1,
yoyo: true,
});
tl.to("#blam1", 0.05, {
opacity: 1,
});
tl.to("#gun", 0.05, {
rotation: -1,
ease: "power3.easeInOut",
repeat: 1,
yoyo: true,
onComplete: addGunMask,
});
tl.to("#shell", 0.01, {
opacity: 1,
});
tl.to("#shell", 0.05, {
y: -40,
x: -15,
ease: "power4.elastic",
});
tl.to(".text1", 0.1, {
opacity: 1,
delay: textRevealDelay,
});
tl.to(".bigText2", 0.01, {
opacity: 1,
delay: pauseBetween,
onStart: () => {
document.getElementById("blam2").scrollIntoView(true);
},
});
tl.to(".bigText2", 0.3, {
scale: 0,
delay: textRevealDelay,
transformOrigin: "50% 50%",
});
tl.to("#victim", 0.2, {
opacity: 1,
});
tl.to("#victim", 0.2, {
x: 0,
y: 0,
});
tl.to(".box2", 0.1, {
onStart: addVictimMask,
opacity: 1,
});
tl.to("#skull", 0.2, {
x: 3,
opacity: 0,
});
tl.to("#brains", 0.2, {
x: 0,
opacity: 1,
scale: 1,
ease: "power4.elastic",
});
tl.to(".text2", 0.1, {
opacity: 1,
delay: textRevealDelay,
});
tl.to(".bigText3", 0.01, {
opacity: 1,
delay: pauseBetween,
onStart: () => {
document.getElementById("blam3").scrollIntoView(true);
},
});
tl.to(".bigText3", 0.3, {
scale: 0,
delay: textRevealDelay,
transformOrigin: "50% 50%",
});
tl.to("#grave", 0.01, {
opacity: 1,
delay: 0.1,
});
tl.to("#grave", 0.75, {
scale: 1,
});
tl.to(".box3", 0.01, {
opacity: 1,
onComplete: addGraveMask,
});
tl.to("#grave", 0.1, {
fill: "#ffffff",
});
tl.to(".text3", 0.3, {
opacity: 1,
delay: textRevealDelay,
});
tl.to(".box4", 0.01, {
opacity: 1,
delay: pauseBetween,
onStart: () => {
document.getElementById("blam4").scrollIntoView(true);
},
});
tl.to("#raisedGun", 1, {
rotation: 0,
x: 0,
});
tl.to("#chin", 0.2, {
y: -2,
delay: 0.1,
});
tl.to(".text4", 0.01, {
opacity: 1,
delay: 0.2,
});
tl.to("#chin", 0.2, {
y: 2,
});
function addGunMask() {
gun.setAttribute("mask", "url(#blam1Mask)");
}
function removeGunMask() {
gun.setAttribute("mask", "");
}
function addVictimMask() {
victim.setAttribute("mask", "url(#blam2Mask)");
}
function removeVictimMask() {
victim.setAttribute("mask", "");
}
function addGraveMask() {
grave.setAttribute("mask", "url(#blam3Mask)");
}
function removeGraveMask() {
grave.setAttribute("mask", "");
}
function resetMasks() {
removeGunMask();
removeVictimMask();
removeGraveMask();
}
function replay() {
const main = document.getElementsByTagName("main")[0];
// jump to top immediately without smooth scrolling
main.classList.remove("smooth");
document.getElementById("blam1").scrollIntoView(true);
setTimeout(() => {
main.classList.add("smooth");
}, 17);
resetMasks();
tl.restart();
}Description
I would like to add short bursts of animation to a graphic novel. A concept that I am calling a “micro-action graphic novel”. This example animates a page from Sin City.
The artwork was recreated as a set of SVGs. It is fully responsive as a result.
The page autoscrolls to show each strip at the top of the window and cycles through to the next strip until it reaches the last strip on the page. I wanted to experiment with this as a feature. I would add the ability to modify this behaviour in the future.
I discuss this concept more in my post - Make your own (interactive) graphic novel.