<svg id="sinCity" viewBox="0 0 800 400"">
<path d=" M0 0h800v400H0z" id="path15" fill="#fff" stroke-width=".577" />
<path id="blam4" d="M20 80h760.351v260H20z" class="box4" stroke-width=".972" />
<path id="bubble4" d="M648.846 116.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" fill="#fff" fill-opacity="1" />
<text x="633.434" y="145.146" class="text4" fill="#000" fill-opacity="1">
<tspan id="tspan4801" font-size="10.667">AMEN.</tspan>
</text>
<path id="path33" d="M21.587 230.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" fill="#fff" fill-opacity="1" />
<path id="path35" d="M120.311 280.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" fill="#fff" fill-opacity="1" />
<path id="path37" d="M620 342l-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 342z" fill="#fff" fill-opacity="1" />
<path style="animation:wag .75s 1 forwards;animation-delay:.75s" d="M473.239 261.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" fill="#fff" />
<path id="path40" d="M443.639 68.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" fill="#fff" fill-opacity="1" />
<path id="path42" d="M467.445 162.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" fill="#fff" fill-opacity="1" />
<path id="path44" d="M462.395 174.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" fill="#fff" fill-opacity="1" />
<path id="path46" d="M442.358 170.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" fill="#fff" fill-opacity="1" />
<path id="path48" d="M435.212 164.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" fill="#fff" fill-opacity="1" />
<path id="path50" d="M431.946 161.317l.737 2.106.948-1.79z" fill="#fff" fill-opacity="1" />
<path id="path52" d="M391.601 151.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" fill="#fff" fill-opacity="1" />
<path id="path54" d="M319.53 103.106l9.833-1.192 17.876 19.366 8.343 18.77-16.685-19.068-14.003-14.599z" fill="#fff" fill-opacity="1" />
<g id="raisedGun" fill="#fff" fill-opacity="1">
<path id="path56" d="M163.205 314.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 67.356l1.525.155" />
<path d="M153.004 86.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.038zm3.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.766zm-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.79z" id="trigger" />
<path id="path59" d="M75.94 74.563l-8.767-4.998" />
<path id="path61" d="M156.67 296.313l28.74-11.051" stroke="#fff" stroke-width="2.223" />
<path id="path63" d="M140.317 253.28l30.122-12.246" stroke="#fff" stroke-width="2.223" />
<path id="path65" d="M171.56 244.02l-29.662 12.472" stroke="#fff" stroke-width="2.223" />
<path id="path67" d="M143.085 259.926l30.65-12.77" stroke="#fff" stroke-width="2.223" />
<path id="path69" d="M143.81 263.736l30.387-12.77" stroke="#fff" stroke-width="2.223" />
<path id="path71" d="M145.293 267.807l30.387-12.772" stroke="#fff" stroke-width="2.223" />
<path id="path73" d="M146.94 271.39l30.388-12.77" stroke="#fff" stroke-width="2.223" />
<path id="path75" d="M148.127 275.275l30.387-12.773" stroke="#fff" stroke-width="2.223" />
<path id="path77" d="M150.06 279.266l30.387-12.77" stroke="#fff" stroke-width="2.223" />
<path id="path79" d="M150.87 282.95l30.387-12.77" stroke="#fff" stroke-width="2.223" />
<path id="path81" d="M151.94 286.5l30.047-12.456" stroke="#fff" stroke-width="2.283" />
<path id="path83" d="M153.746 290.48l30.387-12.77" stroke="#fff" stroke-width="2.111" />
<path id="path85" d="M154.671 293.266l21.816-9.198" stroke="#fff" stroke-width="1.111" />
<ellipse ry="2.512" rx="2.001" cy="303.946" cx="206.372" id="path4987" stroke="#fff" stroke-width="2.242" />
<circle id="circle88" r="1.332" cy="317.651" cx="210.547" stroke="#fff" stroke-width="1.335" />
<ellipse id="ellipse90" ry="1.788" rx="1.825" cy="179.58" cx="162.328" stroke="none" stroke-width="2.242" />
<path id="path92" d="M345.303 219.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 id="path94" d="M212.17 331.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" stroke="#fff" stroke-width=".9" />
<path id="path96" d="M196.473 314.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" stroke="#fff" stroke-width="1.9" />
<path id="path98" d="M197.295 315.479l-7.891-19.004-67.606-205.151c-3.743-2.109-7.665-4.157-10.034-6.724" stroke="#fff" stroke-width="1.9" />
<path id="path100" d="M111.892 84.954c-1.79-4.714-4.54-12.375-4.816-17.089" stroke="#fff" stroke-width="3" />
<path id="path102" d="M112.946 176.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" stroke="#fff" stroke-width="1.5" />
<path id="path104" d="M161.958 314.143l34.47.964" stroke="#fff" stroke-width="1.5" />
<path id="path106" d="M179.807 314.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" stroke="#fff" stroke-width="1.5" />
<path id="path108" d="M182.305 344.602c-7.958-16.133-4.886-14.815 6.215-29.692" stroke="#fff" stroke-width="1.5" />
<path id="path110" d="M169.375 241.09l2.768 8.214" stroke="#fff" stroke-width="3" />
</g>
</svg>
@font-face {
font-family: Pangolin;
src: url("./Pangolin-Regular.woff2");
font-display: swap;
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
}
svg {
width: 800px;
max-width: 100%;
}
#raisedGun {
transform-origin: 50% 100%;
transform: rotate(4deg);
animation: raise 1.5s 1 forwards;
}
@keyframes raise {
to {
transform: rotate(0);
}
}
.text4 {
opacity: 0;
animation: show 0.1s 1 forwards;
animation-delay: 1s;
}
@keyframes show {
to {
opacity: 1;
}
}
#chin {
animation: wag 0.75s 1 forwards;
animation-delay: 0.75s;
}
@keyframes wag {
33% {
transform: translateY(-2px);
}
66% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
text {
font-family: "Pangolin", serif;
}
A CSS animation of a panel from the graphic novel Sin City. The central character is withdrawing a gun while saying ‘amen’.
This is part of an exploration into an interactive graphic novel. The idea is to add short bursts of action to the panels with the page autoscrolling to bring each panel into view.
I discuss this concept more in my post - Make your own (interactive) graphic novel.