<svg viewBox="0 0 210 297">
<defs id="defs19">
<linearGradient
id="linearGradient841"
x1="199.532"
x2="99.521"
y1="44.204"
y2="107.066"
xlink:href="#linearGradient832-5"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(.843 0 0 .843 30.764 3.475)"
/>
<linearGradient id="linearGradient832-5">
<stop id="stop828" offset="0" stop-color="#fefefe" />
<stop
id="stop3553"
offset=".79"
stop-color="#ffffff"
stop-opacity=".996"
/>
<stop id="stop830" offset="1" stop-color="#f3f3f3" />
</linearGradient>
<filter
id="filter2718"
width="1.067"
height="1.066"
x="-.034"
y="-.033"
color-interpolation-filters="sRGB"
>
<feFlood
id="feFlood2708"
flood-opacity=".2"
flood-color="rgb(0,0,0)"
result="flood"
/>
<feComposite
id="feComposite2710"
in="flood"
in2="SourceGraphic"
operator="in"
result="composite1"
/>
<feGaussianBlur
id="feGaussianBlur2712"
in="composite1"
stdDeviation="1.8"
result="blur"
/>
<feOffset id="feOffset2714" result="offset" />
<feComposite
id="feComposite2716"
in="SourceGraphic"
in2="offset"
result="composite2"
/>
</filter>
<filter
id="filter4054"
width="1.195"
height="1.229"
x="-.098"
y="-.114"
color-interpolation-filters="sRGB"
>
<feFlood
id="feFlood4044"
flood-opacity=".259"
flood-color="rgb(0,0,0)"
result="flood"
/>
<feComposite
id="feComposite4046"
in="flood"
in2="SourceGraphic"
operator="in"
result="composite1"
/>
<feGaussianBlur
id="feGaussianBlur4048"
in="composite1"
stdDeviation="1.9"
result="blur"
/>
<feOffset id="feOffset4050" result="offset" />
<feComposite
id="feComposite4052"
in="SourceGraphic"
in2="offset"
result="composite2"
/>
</filter>
</defs>
<rect id="rect40" width="210" height="297" fill="#ffe26f" />
<path
id="smoke"
fill="#cccccc"
stroke-width=".83"
d="M33.29 140.266c-.812-2.33-2.34-4.312-4.02-6.084-1.517-1.576-.835-3.83.634-5.15 1.43-1.874 2.918-3.812 5.065-4.907 3.2-1.773 6.875-2.342 10.46-2.76 1.17-.2 2.315-.63 3.255-1.358-2.757 1.13-5.318 2.7-7.954 4.085-1.213.6-1.943 1.653-2.963.334-1.92-.446-3.9-1.05-5.668-1.83-1.226.41-3.954.966-3.315-1.236 1.374-1.303-.708-2.706-1.22-4.024-.4-.8.668-2.805-.97-2.01-2.27-.137-4.148 1.505-6.353 1.69-1.234-.092-1.29-1.61-.02-1.724l5.75-3.246c1.673.572 3.106-1.058 4.764-1.146 1.54-.69 4.533-.627 3.87 1.784-.216 1.77 1.76 2.59 1.794 4.35.388.95-1.584 1.617.05 1.18 1.753-.585 3.24.43 4.803.964 1.73.458 3.86.78 4.787 2.524-.173 1.622-2.678 1.62-3.71 2.71-1.446.723-2.776 1.94-4.48 1.817-1.605.15-3.178.564-4.71 1.044 2.156-1.412 4.455-2.62 6.74-3.824-1.798.345-2.18 2.428-3.526 3.373-1.277 1.147-.94 3.253.472 4.11 1.473 1.548 2.55 3.427 3.412 5.372l-6.95 3.958z"
/>
<g
id="cigarette"
transform="matrix(.78 0 0 .78 -18.07 -8.65)"
filter="url(#filter4054)"
>
<path
id="path23"
stroke-width="1.065"
d="M70.917 194.444c2.79.4 5.16 2.114 7.535 3.49 2.123 1.81-1.088 3.962-2.95 3.478-2.27-.59-4.804-1.576-5.672-3.98-.455-1.12-2.024-1.868-.115-2.317.983-.547 3.68-2.367 1.625-.484-2.29 2.74-3.364 6.69-6.802 8.32-2.88.054-1.507-4.007-.177-5.296 2.548-3.283 6.287-5.467 8.53-9.013 2.25-3.643 6.457-5.08 9.937-7.212-1.108.504-2.388 1.582-3.382 1.778 2.483-1.77 5.007-3.54 7.22-5.64 3.366-3.983 6.453-8.332 10.715-11.438 1.83-1.47 3.897-3.02 6.355-3.025 2.007.848 4.647 1.808 5.41 4 .033 2.758-2.56 4.46-4.374 6.15-2.693 2.257-5.07 4.98-8.32 6.47-.83.447-2.04 1.11-.52.254.88-.49 3.37-2.12 1.325-.312-2.555 3-6.058 4.866-9.45 6.743 1.08-.632 3.393-2.232 3.676-2.154-4.003 2.61-7.72 5.608-11.39 8.653-1.695.89-1.09 3.93-3.4 3.95-.85.634-3.48 1.468-1.62-.257 3.684-4.92 9.174-7.95 14.38-10.984-.854.48-4.59 2.638-2.154 1.146 1.975-1.213 3.988-2.363 6-3.516-.95.554-3.304 1.87-3.27 1.89 1.284-.715 3.72-2.13 4.267-2.44-.854.473-3.464 2.02-3.05 1.702 4.177-2.903 6.054-8.305 10.848-10.46.805-.445 3.09-1.71 1.09-.56-.806.48-3.822 2.295-1.652.853 2.246-1.03 3.137-3.66 5.457-4.412 1.037-.386 3.697-2.14 2.017.004-1.76 2.027-4.09 3.51-6.33 4.958-.935.574-2.4 1.023-.6.093.86-.494 3.69-2.277 1.544-.777-3.422 2.897-5.323 7.395-9.417 9.536-.94.554-3.206 1.785-3.308 1.885 1.013-.59 3.677-2.135 3.672-2.145-1.23.716-4.463 2.593-4.395 2.555.88-.533 4.03-2.35 1.67-.917-2.03 1.234-4.09 2.408-6.123 3.633.822-.45 3.38-2.036 3.075-1.72-3.71 2.34-7.37 4.97-9.916 8.607-1.172.908-3.743 2.52-4.675 1.87.288-2.748 3.17-3.88 4.954-5.567 3.294-2.777 6.856-5.213 10.456-7.568.922-.564 2.804-1.274.896-.274-.838.478-4.47 2.64-2.117 1.208 2.15-1.293 3.933-3.07 5.58-4.933 1.084-.977 3.72-2.13 4.283-2.453-.86.475-3.31 1.99-3.066 1.71 2.436-1.874 4.57-4.11 6.937-6.07 1.61-1.232 4.17-4.256 1.457-5.722-1.577-.878-3.392-2.317-5.08-1.556.85-.397 3.408-1.977 3.046-1.65-3.723 2.81-6.61 6.494-9.555 10.067-1.443 2.295-3.94 3.578-5.92 5.35-2.53 1.758-5.057 3.554-7.82 4.925.886-.512 3.394-1.93 3.1-1.823-2.575 1.29-4.04 3.82-5.75 5.994-1.744 1.986-3.816 3.613-5.71 5.444-1.257 1.295-2.37 2.84-2.59 4.665-.51 1.472-3.406 2.58-3.9 2.81 1.39-1.617 2.092-3.773 3.48-5.434 1.51-1.594 3.87-4.636 6.277-3.1.82 2.263 2.543 4.336 5.047 4.858 2.267.805-1.868 1.003-2.402 2.02-1.885 1.31-3.757-1.822-5.818-2.195-1.045-.62-4.064-.7-1.544-1.853l2.48-1.805z"
/>
<path
id="path25"
fill="#e3dbdb"
d="M74.342 193.58c-.257-.62-.72-1.27-1.027-1.442-.424-.237.83-1.64 5.15-5.763 3.14-2.997 6.414-5.92 7.275-6.493 2.77-1.848 5.746-4.455 7.087-6.206.72-.94 2.748-3.224 4.51-5.078l3.2-3.37 1.6.8c1.713.863 2.94 1.81 2.94 2.27 0 .66-16.19 15.714-19.044 17.71-1.71 1.194-4.935 3.64-7.166 5.437l-4.057 3.263z"
/>
</g>
<g id="g44" font-family="'Rubik Mono One', sans-serif" font-size="15">
<text
id="text28"
x="21.712"
y="197.243"
font-style="italic"
font-weight="700"
>
DONT
</text>
<text id="text30" x="84.7" y="197.243">LET THE</text>
<text
id="text32"
x="55.171"
y="218.5"
fill="#f90000"
font-style="italic"
>
BASTARDS
</text>
<text id="text34" x="22.43" y="239.59">GRIND YOU</text>
<text id="text36" x="181.871" y="212.362" transform="rotate(9.06)">
D
</text>
<text
id="text38"
x="190.67"
y="226.188"
transform="rotate(7.38)"
font-size="13"
>
O
</text>
<text
id="text40"
x="244.831"
y="191.799"
transform="rotate(19.2)"
font-size="13"
>
W
</text>
<text
id="text42"
x="273.908"
y="179.274"
transform="rotate(24.05)"
font-size="11"
>
N
</text>
</g>
<path
id="path46"
fill="url(#linearGradient841)"
fill-rule="evenodd"
stroke-width=".223"
d="M47.876 67.12c16.293-18.355 37.61-30.11 56.414-45.162 22.554-20.2 68.642-8.27 71.76 26.043.538 5.93 2.264 22.075-4.04 30.548-5.195 13.954-17.063 51.26-10.27 64.566 9.214 2.82-36.85-2.416-36.073-22.175 2.88-73.16-64.564-66.51-77.79-53.817z"
filter="url(#filter2718)"
/>
</svg>
@font-face {
font-family: "Rubik Mono One";
src: url("fonts/RubikMonoOne-Regular.ttf");
}
* {
box-sizing: border-box;
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
}
svg {
display: block;
height: 50%;
width: auto;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.1);
}
#smoke {
animation-name: rise;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes rise {
33% {
transform: translateY(-3px) rotate(-0.5deg);
}
66% {
transform: translateY(-6px) rotate(0.5deg);
}
88% {
transform: translateY(-9px) rotate(-0.5deg);
}
100% {
opacity: 0;
}
}
A poster inspired by the book The Handmaids Tail, particularly the epigram – Don’t let the bastards grind you down.
This was an opportunity to play with typography. I wanted to play with letter spacing and vertical positioning. The letters in the word ‘down’ progressively drop further and further below the line.