storytellurx/reveal-preview-pictoporn.html

558 lines
27 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Reveal ornaments — EXACT pictoporn vectors as contour frame (preview)</title>
<style>
:root {
--bg: #0c0a0e;
--ink: #f3dcec;
--accent: #ff2e88;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: radial-gradient(1000px 700px at 50% -10%, #2c1429, var(--bg));
color: var(--ink);
font: 14px/1.5 system-ui;
padding: 28px 18px 80px;
}
.badge {
display: inline-block;
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 999px;
padding: 2px 10px;
font: 11px/18px monospace;
letter-spacing: 0.12em;
margin-bottom: 12px;
}
h1 {
font-size: 21px;
margin: 0 0 4px;
}
p.sub {
opacity: 0.78;
max-width: 84ch;
margin: 0 0 6px;
}
p.credit {
opacity: 0.6;
font-size: 12px;
max-width: 84ch;
margin: 0 0 18px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 20px;
max-width: 1320px;
margin: 0 auto;
}
.stage {
position: relative;
border: 1px solid #ffffff22;
border-radius: 18px;
padding: 60px 16px 26px;
background: #1c1420ee;
overflow: hidden;
}
.stage h2 {
position: absolute;
top: 10px;
left: 14px;
margin: 0;
font: 12px/20px monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.stage h2 small {
opacity: 0.6;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.eyebrow {
position: absolute;
top: 32px;
left: 0;
right: 0;
text-align: center;
font: 11px/20px monospace;
letter-spacing: 0.1em;
opacity: 0.85;
color: var(--accent);
}
.arrival {
position: relative;
width: min(86%, 290px);
aspect-ratio: 4/5;
margin: 0 auto;
}
.card {
position: absolute;
inset: 14px 30px;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(160deg, #3a1f3d, #131019 60%, #2a1030);
display: grid;
place-items: center;
border: 1px solid #fff3;
}
.card span {
font: 11px/1.4 monospace;
opacity: 0.65;
text-align: center;
}
/* exact-picto tiles hugging the card = contouring */
.picto {
position: absolute;
color: var(--accent);
filter: drop-shadow(0 0 8px #ff2e8866);
pointer-events: none;
}
.picto svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.picto svg path,
.picto svg circle {
fill: currentColor;
}
.top {
top: -6px;
left: 50%;
width: 92px;
height: 92px;
transform: translateX(-50%);
}
.bottom {
bottom: -6px;
left: 50%;
width: 92px;
height: 92px;
transform: translateX(-50%);
}
.left {
left: -8px;
top: 50%;
width: 76px;
height: 76px;
transform: translateY(-50%);
}
.right {
right: -8px;
top: 50%;
width: 76px;
height: 76px;
transform: translateY(-50%);
}
.tl {
top: -4px;
left: 2px;
width: 64px;
height: 64px;
}
.tr {
top: -4px;
right: 2px;
width: 64px;
height: 64px;
transform: scaleX(-1);
}
.bl {
bottom: -4px;
left: 2px;
width: 64px;
height: 64px;
}
.br {
bottom: -4px;
right: 2px;
width: 64px;
height: 64px;
transform: scaleX(-1);
}
.sideways {
transform: translateY(-50%) rotate(90deg);
}
.sideways-r {
transform: translateY(-50%) rotate(-90deg);
}
.throb {
animation: throb 1.9s ease-in-out infinite;
transform-origin: center;
}
.top.throb,
.bottom.throb {
animation-name: throbX;
}
@keyframes throb {
0%,
100% {
transform: translateY(-50%) scale(1);
}
50% {
transform: translateY(-50%) scale(1.08);
}
}
@keyframes throbX {
0%,
100% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(1.08);
}
}
.drip {
animation: drip 2.4s ease-in-out infinite;
}
@keyframes drip {
0%,
100% {
margin-top: 0;
}
50% {
margin-top: 7px;
}
}
.eighteen {
position: absolute;
top: 8px;
right: 10px;
font: 10px/16px monospace;
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 6px;
padding: 1px 6px;
letter-spacing: 0.1em;
}
.skip {
display: block;
margin: 12px auto 0;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid currentColor;
background: transparent;
color: inherit;
font-size: 22px;
}
.note {
max-width: 1320px;
margin: 18px auto 0;
border: 1px dashed #ffffff33;
border-radius: 12px;
padding: 12px 14px;
font-size: 13px;
}
.note code {
background: #ffffff14;
padding: 1px 6px;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="badge">EXACT PICTOPORN VECTORS — PREVIEW, NO SRC TOUCHED</div>
<h1>Real pictoporn pictos as the reveal contour</h1>
<p class="sub">
Every explicit shape below is the <b>exact vector path</b> from
<code>velvetyne/Pictoporn</code> (<code>pictos/svg/*.svg</code>), only recolored to the reveal
theme. They sit <b>on the card edge</b> (overlapping −6px) so they contour/hug the generated
image. Spicy = throb + drip + glow + dirty eyebrow.
</p>
<p class="credit">
Vectors: Pictoporn workshop, Velvetyne foundry, CC BY-SA 2.0 — github.com/velvetyne/Pictoporn
</p>
<div class="grid">
<!-- SAMANTHA69 : foufoune top + anus bottom -->
<div class="stage">
<h2>samantha69 <small>— foufoune + anus</small></h2>
<div class="eighteen">18+</div>
<div class="eyebrow">Écarte — regarde bien</div>
<div class="arrival">
<div class="picto top throb">
<svg viewBox="0 0 595.28 595.28">
<path
d="M240.058,96.663l1.334-12l-1.334-15.333c0,0,11.334-8,17.334-4s-1.333,20,4,20.667s12.666,1.333,12.666,1.333 s0.495,26.337,5.162,27.67s15.667,5.667,19-1s-5.593-21.181-2.5-29c1.857-4.697,2.163-12.164,16-11.333 c3.826,0.229,2.5,8.833,2.5,8.833s11.837,0.164,15.837,1.497s12.666,13.333,12.666,13.333s6.001-18.667,15.334-18.667l5.333,1.333 c0,0,3.333,8,8,9.333s10.667-6.667,10.667-6.667l13.333-2l14,31.333c0,0-0.001,3.333,3.333,2s12-16,12-16s11.334-4,16.667-3.333 s10-7.333,10-7.333s15.999,9.333,23.333,15.333l0.667,30c0,0,20.001-4,28.667-8s11,4,13,8l-1,13.333c0,0,2.332,3.333,5.666,7.333 c0,0-12.334,38-29,60l-8,6l6.667,14.667l-12,14c0,0-3.333,11.333,0.667,20l-5.334,12c0,0,0,10,0.667,12l-18.667-1.333l-17.333-10 c0,0,3.667,28.666,5.667,36.666l-12.334,14.667l12,15.333l-6,14.667l-24.666-2c0,0-4.666-2.667-4,3.333s13.333,36.667,13.333,36.667 s-0.667,11.334-6.667,16.667l-24.666-12.667l4,18.667c0,0,4.667,8-6,14s-20,15.333-20,15.333s-4,5.999,12,23.333l11.332,22.667 l-13.334,12l-14.666-21.334c0,0-11.668,1.333-20.334-10l-13.666,30l-16,38.667l-16-7.333l0.666-5.334c0,0-1.332-5.333-10.666-5.333 l-7.334-33.333c0,0-7.332-5.334-10.666-3.334s-6-8-6-8l-7.334,2.667l-20-8l-0.666-30.667l-2.667-18l-4,4.667 c0,0-18.667-2.667-24-6.667l8.667-26l2-28.666l-11.334,3.333l-7.333,0.667l-1.333-31.334l-15.334,28l-7.333,1.334l-9.333-4.667 l19.333-48.667l-22.667,24.667l-18-5.333c0,0,4-6.668,2-11.334s-13.333-8-13.333-8s-1.999-13.333,2.668-24 s5.334-32.667,5.334-32.667l-18,20l-14.667-9.333l-1.333-24c0,0,2.666-32-2.667-29.333s-11.333,9.333-11.333,9.333l-4.667-5.333 c0,0-15.999-34-23.999-76.667l6-6.667c0,0,6.667-2,2.667-10s-10-17.333-10-17.333s0.666-4.667,7.333-11.333s23.334,6,23.334,6l12,4 l9.333-10l1.333-15.333c0,0-2.666-6,9.334-10s19.332,16,26.666,16.667L168.387,97c0,0,9.333-14,14.666-14s23.005,6.996,23.005,6.996 l12.667,6h9.333"
/>
</svg>
</div>
<div class="picto bottom">
<svg viewBox="0 0 595.28 595.28">
<g>
<path
d="M252.981,292.559l6.323-4.121c0,0,11.946,19.936,18.343,20.825c7.686,1.069,11.549-0.824,14.438-19.757 c0.861-5.641,0.318-26.017,0.318-26.017s2.979-1.214,6.968-0.866c0,0,1.181,39.879,11.49,42.418s27.573-20.652,27.573-20.652 s2.635,2.608,6.683,6.171c-4.551,7.515-23.406,18.691-17.771,30.257c4.134,8.485,27.786,7.183,27.786,7.183 s-0.056,3.55,0.021,8.265c-14.754-0.87-24.321-0.809-26.938,4.786c-2.615,5.596-0.075,10.171,5.656,17.623 c6.4,8.321,10.589,12.041,10.589,12.041s-1.608,4.043-5.912,7.017c-3.851-5.044-19.604-22.43-28.079-16.823 s-7.992,32.923-7.992,32.923s-7.347-0.97-7.345-0.578c0.003,0.39,0.276-32.681-10.172-36.836 c-7.548-2.613-26.285,25.848-26.285,25.848l-6.171-4.011c6.618-8.827,18.038-24.84,15.13-30.291 c-2.581-11.176-31.065-8.736-31.065-8.736l-0.96-7.905c0,0,25.68,1.191,29.491-9.371 C268.913,311.388,252.981,292.559,252.981,292.559z"
/>
</g>
</svg>
</div>
<div class="card">
<span>generated<br />image</span>
</div>
</div>
<button class="skip">×</button>
</div>
<!-- HISOKA : bigblackcock sides -->
<div class="stage">
<h2>hisoka <small>— bigblackcock ×2</small></h2>
<div class="eighteen">18+</div>
<div class="eyebrow">Vestiaire — à genoux</div>
<div class="arrival">
<div class="picto left sideways throb">
<svg viewBox="0 0 595.28 595.28">
<path
d="M438.942,277.291c-0.561-24.62-20.494-20.58-27.612-24.811c-2.371-1.411-2.681-10.087,0.214-10.88 c7.562-2.074,23.87-2.732,26.838-36.113c7.181-80.01-71.18-170.678-98.875-170.678c-32.718,0-25.757,16.958-33.962,17.983 c-8.206,1.025-2.605-14.275-21.543-18.609c-80.009,0-118.476,117.962-118.476,182.587c0,44.107,220.541,28.722,220.541,28.722v7.18 c-24.619,17.437-163.098,13.846-209.258,9.744c0,0-46.12,128.734-28.722,332.864h94.547c-2.565-8.479-18.217-66.01,4.955-138.89 c0,0-66.276-51.796-0.286-127.662l4.332,8.215c0,0-35.03,44.161,0,90.821c17.157,22.853,23.386,28.56,23.386,28.56 s-35.728,89.88,3.524,138.956h65.593c-2.577-6.207-15.404-38.175-15.407-59.728c-0.009-61.727,18.743-69.094,38.209-109.631 c19.465-40.538,17.303-87.597,17.303-87.597l4.324-1.382c5.049,18.811,3.018,55.038,1.442,68.71 c-3.604,31.325-36.781,70.652-41.093,121.611c-2.589,30.597,15.725,61.92,19.503,68.016h77.141 C460.947,413.718,439.545,303.77,438.942,277.291z"
/>
</svg>
</div>
<div class="picto right sideways-r throb">
<svg viewBox="0 0 595.28 595.28">
<path
d="M438.942,277.291c-0.561-24.62-20.494-20.58-27.612-24.811c-2.371-1.411-2.681-10.087,0.214-10.88 c7.562-2.074,23.87-2.732,26.838-36.113c7.181-80.01-71.18-170.678-98.875-170.678c-32.718,0-25.757,16.958-33.962,17.983 c-8.206,1.025-2.605-14.275-21.543-18.609c-80.009,0-118.476,117.962-118.476,182.587c0,44.107,220.541,28.722,220.541,28.722v7.18 c-24.619,17.437-163.098,13.846-209.258,9.744c0,0-46.12,128.734-28.722,332.864h94.547c-2.565-8.479-18.217-66.01,4.955-138.89 c0,0-66.276-51.796-0.286-127.662l4.332,8.215c0,0-35.03,44.161,0,90.821c17.157,22.853,23.386,28.56,23.386,28.56 s-35.728,89.88,3.524,138.956h65.593c-2.577-6.207-15.404-38.175-15.407-59.728c-0.009-61.727,18.743-69.094,38.209-109.631 c19.465-40.538,17.303-87.597,17.303-87.597l4.324-1.382c5.049,18.811,3.018,55.038,1.442,68.71 c-3.604,31.325-36.781,70.652-41.093,121.611c-2.589,30.597,15.725,61.92,19.503,68.016h77.141 C460.947,413.718,439.545,303.77,438.942,277.291z"
/>
</svg>
</div>
<div class="card">
<span>generated<br />image</span>
</div>
</div>
<button class="skip">×</button>
</div>
<!-- CYBELLE : ejaculation drips + branlette -->
<div class="stage">
<h2>cybelle <small>— ejaculation + branlette</small></h2>
<div class="eighteen">18+</div>
<div class="eyebrow">Jouis — plein la vision</div>
<div class="arrival">
<div class="picto tl drip">
<svg viewBox="0 0 595.28 595.28">
<g>
<path
d="M595.28,395.6V595.28H296.92l-27.73-34.09 c-35.02-7.671-66.83-25.801-90.17-57.631C101.33,397.58,91.15,296.4,145.46,231.9c49.35-58.61,104.04-42.5,166.1-26.78 c-27.09-27.09-68.89-29.67-68.89-29.67c87.88-78.12,209.37,16.93,251.29,58.86c27.55,27.55,53.26,65.7,59.449,109.82L595.28,395.6z "
/>
<path
d="M193.921,172.304c-27.073-30.281-53.781-34.362-90.197-29.423 c-43.158,5.853-91.954-26.716-73.061-76.327C61.528-14.492,205.061,52.368,193.921,172.304z"
/>
</g>
</svg>
</div>
<div class="picto tr drip">
<svg viewBox="0 0 595.28 595.28">
<g>
<path
d="M595.28,395.6V595.28H296.92l-27.73-34.09 c-35.02-7.671-66.83-25.801-90.17-57.631C101.33,397.58,91.15,296.4,145.46,231.9c49.35-58.61,104.04-42.5,166.1-26.78 c-27.09-27.09-68.89-29.67-68.89-29.67c87.88-78.12,209.37,16.93,251.29,58.86c27.55,27.55,53.26,65.7,59.449,109.82L595.28,395.6z "
/>
<path
d="M193.921,172.304c-27.073-30.281-53.781-34.362-90.197-29.423 c-43.158,5.853-91.954-26.716-73.061-76.327C61.528-14.492,205.061,52.368,193.921,172.304z"
/>
</g>
</svg>
</div>
<div class="picto bottom">
<svg viewBox="0 0 595.279 595.281">
<g>
<circle cx="141.22" cy="370.062" r="29.438" />
<circle cx="458.295" cy="368.312" r="29.438" />
<path
d="M328.261,366.91c13.116-145.771,129.434-131.376,129.434-131.376c-54.602-19.949-103.521,18.947-103.521,18.947 c3.003-17.013,5.039-50.915,5.219-57.714c0.181-6.798,9.793-5.335,11.031-22.288c1.237-16.952-6.242-11.069-12.308-54.322 c-6.062-43.253-37.966-31.812-38.676-31.66c-0.712,0.151-11.305,13.866-20.083,1.173c-8.779-12.693-42.261,3.686-44.104,27.515 c-1.842,23.828-8.646,46.489-9.716,56.068c-1.071,9.578,15.562,12.175,10.253,23.694c-5.309,11.52-0.307,55.713-0.307,55.713 c-47.354-35.194-97.394-19.182-97.394-19.182c106.083,3.002,128.101,94.073,123.739,161.413 C270.179,531.708,83.787,557.667,0.446,460.384v135.359h594.387l-0.125-136.521C501.22,570.218,315.144,512.681,328.261,366.91z"
/>
</g>
</svg>
</div>
<div class="card">
<span>generated<br />image</span>
</div>
</div>
<button class="skip">×</button>
</div>
<!-- GALATEE : double_god top+bottom -->
<div class="stage">
<h2>galatée <small>— double_god ×2</small></h2>
<div class="eighteen">18+</div>
<div class="eyebrow">Sculpte-moi — deux fois</div>
<div class="arrival">
<div class="picto top">
<svg viewBox="0 0 595.28 595.28">
<g>
<path
d="M294.557,476.585c-7.5,0-43.417-63.5-144.417-63.5C74.64,413.085,0,472.333,0,472.333V595.28h595.28V466.585 c0,0-57.14-50.5-155.14-50.5S302.057,476.585,294.557,476.585z"
/>
<path
d="M339.139,183.222c-27-9.5-40.333-29.581-46.333-29.581s-24.166,28.499-55.735,38.06c0,0-3.514,8.769-3.514,21.436 c0,12.666,15.496,23.669,15.496,41.669c0,18-13.58,26.667-13.58,48.667s17.58,44.667,17.58,62s-11.775,29.984-10.913,43.664 c33.5,11.503,45.334,37.003,52.667,37.003s24.833-24.5,52.333-34c0-18.7-15.331-32.084-15.331-52.084s12.331-36.583,12.331-57.916 s-13.749-35.334-13.749-48.001c0-12.667,13.748-28,13.748-42S339.139,183.222,339.139,183.222z"
/>
<path
d="M0,0v140.195c0,0,59.14,48,140.14,48c112,0,144.583-66.083,152.083-66.083s46.917,56.583,149.917,56.583 c112,0,153.14-51.579,153.14-51.579V0H0z"
/>
</g>
</svg>
</div>
<div class="picto bottom">
<svg viewBox="0 0 595.28 595.28">
<g>
<path
d="M294.557,476.585c-7.5,0-43.417-63.5-144.417-63.5C74.64,413.085,0,472.333,0,472.333V595.28h595.28V466.585 c0,0-57.14-50.5-155.14-50.5S302.057,476.585,294.557,476.585z"
/>
<path
d="M339.139,183.222c-27-9.5-40.333-29.581-46.333-29.581s-24.166,28.499-55.735,38.06c0,0-3.514,8.769-3.514,21.436 c0,12.666,15.496,23.669,15.496,41.669c0,18-13.58,26.667-13.58,48.667s17.58,44.667,17.58,62s-11.775,29.984-10.913,43.664 c33.5,11.503,45.334,37.003,52.667,37.003s24.833-24.5,52.333-34c0-18.7-15.331-32.084-15.331-52.084s12.331-36.583,12.331-57.916 s-13.749-35.334-13.749-48.001c0-12.667,13.748-28,13.748-42S339.139,183.222,339.139,183.222z"
/>
<path
d="M0,0v140.195c0,0,59.14,48,140.14,48c112,0,144.583-66.083,152.083-66.083s46.917,56.583,149.917,56.583 c112,0,153.14-51.579,153.14-51.579V0H0z"
/>
</g>
</svg>
</div>
<div class="card">
<span>generated<br />image</span>
</div>
</div>
<button class="skip">×</button>
</div>
<!-- NELLY : fellation sides -->
<div class="stage">
<h2>nelly <small>— fellation ×2</small></h2>
<div class="eighteen">18+</div>
<div class="eyebrow">Écoute — bouche pleine</div>
<div class="arrival">
<div class="picto left">
<svg viewBox="0 0 595.3 595.3">
<g>
<path
d="M595.3,230.7c0,0-200.2,0-213.6,0c-23.9,0-104.9,51.9-104.9,80.2c0,28.3,74.9,77.3,104.9,77.3s213.6,0,213.6,0V230.7z"
/>
<path
d="M380.5,189.5c25.5-19.5,39-34.5,27-47.9S376,99.5,376,99.5s-13,11.8-25.1,23.6c-18.2,17.8-55.9,27.4-90.4-8.6 c-34.5-36-12.2-51-3.2-45c9,6,18.3,23.4,30.3,32.4c12,9,33.8,16.6,48.8,1.6c7.5-7.5,31.4-34.4,52-58C409.1,21.8,374.8,0,374.8,0H0 v595.3h137.2c0,0,46.9-41.3,70.9-41.3c24,0,64.8,17.6,101.4,15c26.1-1.8,43.2-21.9,56.7-39.9c13.5-18,30.9-53.1,30.9-77.1 c0-24-55.5-49.5-76.5-64.5c-21-15-63-43.5-64.5-75C254.6,281,355,209,380.5,189.5z"
/>
</g>
</svg>
</div>
<div class="picto right">
<svg viewBox="0 0 595.3 595.3">
<g>
<path
d="M595.3,230.7c0,0-200.2,0-213.6,0c-23.9,0-104.9,51.9-104.9,80.2c0,28.3,74.9,77.3,104.9,77.3s213.6,0,213.6,0V230.7z"
/>
<path
d="M380.5,189.5c25.5-19.5,39-34.5,27-47.9S376,99.5,376,99.5s-13,11.8-25.1,23.6c-18.2,17.8-55.9,27.4-90.4-8.6 c-34.5-36-12.2-51-3.2-45c9,6,18.3,23.4,30.3,32.4c12,9,33.8,16.6,48.8,1.6c7.5-7.5,31.4-34.4,52-58C409.1,21.8,374.8,0,374.8,0H0 v595.3h137.2c0,0,46.9-41.3,70.9-41.3c24,0,64.8,17.6,101.4,15c26.1-1.8,43.2-21.9,56.7-39.9c13.5-18,30.9-53.1,30.9-77.1 c0-24-55.5-49.5-76.5-64.5c-21-15-63-43.5-64.5-75C254.6,281,355,209,380.5,189.5z"
/>
</g>
</svg>
</div>
<div class="card">
<span>generated<br />image</span>
</div>
</div>
<button class="skip">×</button>
</div>
<!-- XIXI + POLAIRE + JACOB -->
<div class="stage">
<h2>xixi <small>— ejaculation corners</small></h2>
<div class="eighteen">18+</div>
<div class="eyebrow">Pleure — et jouis</div>
<div class="arrival">
<div class="picto bl drip">
<svg viewBox="0 0 595.28 595.28">
<g>
<path
d="M595.28,395.6V595.28H296.92l-27.73-34.09 c-35.02-7.671-66.83-25.801-90.17-57.631C101.33,397.58,91.15,296.4,145.46,231.9c49.35-58.61,104.04-42.5,166.1-26.78 c-27.09-27.09-68.89-29.67-68.89-29.67c87.88-78.12,209.37,16.93,251.29,58.86c27.55,27.55,53.26,65.7,59.449,109.82L595.28,395.6z "
/>
<path
d="M193.921,172.304c-27.073-30.281-53.781-34.362-90.197-29.423 c-43.158,5.853-91.954-26.716-73.061-76.327C61.528-14.492,205.061,52.368,193.921,172.304z"
/>
</g>
</svg>
</div>
<div class="picto br drip">
<svg viewBox="0 0 595.28 595.28">
<g>
<path
d="M595.28,395.6V595.28H296.92l-27.73-34.09 c-35.02-7.671-66.83-25.801-90.17-57.631C101.33,397.58,91.15,296.4,145.46,231.9c49.35-58.61,104.04-42.5,166.1-26.78 c-27.09-27.09-68.89-29.67-68.89-29.67c87.88-78.12,209.37,16.93,251.29,58.86c27.55,27.55,53.26,65.7,59.449,109.82L595.28,395.6z "
/>
<path
d="M193.921,172.304c-27.073-30.281-53.781-34.362-90.197-29.423 c-43.158,5.853-91.954-26.716-73.061-76.327C61.528-14.492,205.061,52.368,193.921,172.304z"
/>
</g>
</svg>
</div>
<div class="card">
<span>generated<br />image</span>
</div>
</div>
<button class="skip">×</button>
</div>
<div class="stage">
<h2>polaire <small>— fingering ×2</small></h2>
<div class="eighteen">18+</div>
<div class="eyebrow">Signal — touche le bord</div>
<div class="arrival">
<div class="picto left">
<svg viewBox="0 0 595.28 595.28">
<path
d="M356.88,0c0,0,30.493,27.473,55.16,58.807c10.824,13.75,23.766,35.916,36.084,45.081 c11.283,8.395,33.323,15.999,43.185,24.252c6.843,5.727-16.268,28.923-51.269,18.499c-39.731-11.833-70.981-50.999-76-47.165 c-4.934,3.768,53.144,129.979,76.478,183.312c23.333,53.333,38.871,76.604,21.772,85.937c-18.194,9.93-34.215-18.565-54.15-55.916 c-20.132-37.722-55.856-98.932-58.682-97.165c-5.333,3.333-2.27,43.662-32.084,43.832c-29.167,0.167-21.701-35.922-29.333-36.667 c-6.833-0.667,1.4,39.68-33.358,38.787c-30.642-0.787-20.642-37.454-28.642-40.12c-4.63-1.543-18.558,41.866-31.319,83.523 c-9.402,30.693-18.192,63.483-34.928,58.057c-15.154-4.913-8.571-31.165-1.071-62.665c11.012-46.249,20.633-97.98,20.648-107.211 c0.021-13.371-9.33-42.371-8.664-99.037C171.373,37.475,184.04,0,184.04,0H0v471.14c0,0,44.14,41,127.14,41c152,0,154-83,162-83 s18,83,166,83c94-3,140.14-47,140.14-47V0H356.88z"
/>
</svg>
</div>
<div class="picto right">
<svg viewBox="0 0 595.28 595.28">
<path
d="M356.88,0c0,0,30.493,27.473,55.16,58.807c10.824,13.75,23.766,35.916,36.084,45.081 c11.283,8.395,33.323,15.999,43.185,24.252c6.843,5.727-16.268,28.923-51.269,18.499c-39.731-11.833-70.981-50.999-76-47.165 c-4.934,3.768,53.144,129.979,76.478,183.312c23.333,53.333,38.871,76.604,21.772,85.937c-18.194,9.93-34.215-18.565-54.15-55.916 c-20.132-37.722-55.856-98.932-58.682-97.165c-5.333,3.333-2.27,43.662-32.084,43.832c-29.167,0.167-21.701-35.922-29.333-36.667 c-6.833-0.667,1.4,39.68-33.358,38.787c-30.642-0.787-20.642-37.454-28.642-40.12c-4.63-1.543-18.558,41.866-31.319,83.523 c-9.402,30.693-18.192,63.483-34.928,58.057c-15.154-4.913-8.571-31.165-1.071-62.665c11.012-46.249,20.633-97.98,20.648-107.211 c0.021-13.371-9.33-42.371-8.664-99.037C171.373,37.475,184.04,0,184.04,0H0v471.14c0,0,44.14,41,127.14,41c152,0,154-83,162-83 s18,83,166,83c94-3,140.14-47,140.14-47V0H356.88z"
/>
</svg>
</div>
<div class="card">
<span>generated<br />image</span>
</div>
</div>
<button class="skip">×</button>
</div>
<div class="stage">
<h2>jacob <small>— anus + fingering</small></h2>
<div class="eighteen">18+</div>
<div class="eyebrow">Curiosités — touche tout</div>
<div class="arrival">
<div class="picto top">
<svg viewBox="0 0 595.28 595.28">
<g>
<path
d="M252.981,292.559l6.323-4.121c0,0,11.946,19.936,18.343,20.825c7.686,1.069,11.549-0.824,14.438-19.757 c0.861-5.641,0.318-26.017,0.318-26.017s2.979-1.214,6.968-0.866c0,0,1.181,39.879,11.49,42.418s27.573-20.652,27.573-20.652 s2.635,2.608,6.683,6.171c-4.551,7.515-23.406,18.691-17.771,30.257c4.134,8.485,27.786,7.183,27.786,7.183 s-0.056,3.55,0.021,8.265c-14.754-0.87-24.321-0.809-26.938,4.786c-2.615,5.596-0.075,10.171,5.656,17.623 c6.4,8.321,10.589,12.041,10.589,12.041s-1.608,4.043-5.912,7.017c-3.851-5.044-19.604-22.43-28.079-16.823 s-7.992,32.923-7.992,32.923s-7.347-0.97-7.345-0.578c0.003,0.39,0.276-32.681-10.172-36.836 c-7.548-2.613-26.285,25.848-26.285,25.848l-6.171-4.011c6.618-8.827,18.038-24.84,15.13-30.291 c-2.581-11.176-31.065-8.736-31.065-8.736l-0.96-7.905c0,0,25.68,1.191,29.491-9.371 C268.913,311.388,252.981,292.559,252.981,292.559z"
/>
</g>
</svg>
</div>
<div class="picto bottom">
<svg viewBox="0 0 595.28 595.28">
<path
d="M356.88,0c0,0,30.493,27.473,55.16,58.807c10.824,13.75,23.766,35.916,36.084,45.081 c11.283,8.395,33.323,15.999,43.185,24.252c6.843,5.727-16.268,28.923-51.269,18.499c-39.731-11.833-70.981-50.999-76-47.165 c-4.934,3.768,53.144,129.979,76.478,183.312c23.333,53.333,38.871,76.604,21.772,85.937c-18.194,9.93-34.215-18.565-54.15-55.916 c-20.132-37.722-55.856-98.932-58.682-97.165c-5.333,3.333-2.27,43.662-32.084,43.832c-29.167,0.167-21.701-35.922-29.333-36.667 c-6.833-0.667,1.4,39.68-33.358,38.787c-30.642-0.787-20.642-37.454-28.642-40.12c-4.63-1.543-18.558,41.866-31.319,83.523 c-9.402,30.693-18.192,63.483-34.928,58.057c-15.154-4.913-8.571-31.165-1.071-62.665c11.012-46.249,20.633-97.98,20.648-107.211 c0.021-13.371-9.33-42.371-8.664-99.037C171.373,37.475,184.04,0,184.04,0H0v471.14c0,0,44.14,41,127.14,41c152,0,154-83,162-83 s18,83,166,83c94-3,140.14-47,140.14-47V0H356.88z"
/>
</svg>
</div>
<div class="card">
<span>generated<br />image</span>
</div>
</div>
<button class="skip">×</button>
</div>
</div>
<div class="note">
This file is <b>new and standalone</b> — no src touched. To ship it: vendor these 8 paths into
<code>reveal-ornament.tsx</code> (CC BY-SA 2.0, Velvetyne), map per persona in
<code>persona-reveal-catalog.ts</code>, render as <code>.image-reveal__ornament</code> tiles
on the card edge, update <code>public-image-reveal.spec.ts</code> (allow ornament SVGs, assert
they stay outside the image rect).
</div>
</body>
</html>