49 lines
2.2 KiB
XML
49 lines
2.2 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 580 214" role="img" aria-labelledby="t">
|
||
|
|
<title id="t">Trois tasses de couleur alignées sur la table, et une quatrième posée sur la Kluk, fumante.</title>
|
||
|
|
<style>
|
||
|
|
.table { fill: #D9BC94; }
|
||
|
|
.table-fil, .tasse-corps, .tasse-anse, .kluk-socle, .vapeur path {
|
||
|
|
stroke: #2E2A26; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
|
||
|
|
}
|
||
|
|
.tasse-anse { fill: none; stroke-width: 6; }
|
||
|
|
.tasse-corps { fill: currentColor; }
|
||
|
|
.tasse-reflet { fill: none; stroke: #fff; stroke-opacity: 0.45; stroke-width: 4; stroke-linecap: round; }
|
||
|
|
.kluk-socle { fill: #B48D5F; }
|
||
|
|
.kluk-voyant { fill: #F5F6F0; }
|
||
|
|
.vapeur path { fill: none; stroke-width: 2.5; stroke: #5A534C; }
|
||
|
|
.humeur-gris { color: #8D97A8; }
|
||
|
|
.humeur-orange { color: #EDA33D; }
|
||
|
|
.humeur-rouge { color: #D8573F; }
|
||
|
|
.humeur-vert { color: #5F9B59; }
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
.vapeur path { animation: vapeur 5s ease-in-out infinite; }
|
||
|
|
.vapeur path + path { animation-delay: 2.5s; }
|
||
|
|
}
|
||
|
|
@keyframes vapeur {
|
||
|
|
0%, 100% { opacity: 0.25; transform: translateY(6px); }
|
||
|
|
50% { opacity: 0.9; transform: translateY(-6px); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<defs>
|
||
|
|
<g id="tasse">
|
||
|
|
<path class="tasse-anse" d="M63 22 C86 20 88 60 60 62" />
|
||
|
|
<path class="tasse-corps" d="M3 6 L10 78 Q11 86 20 86 L48 86 Q57 86 58 78 L65 6 Z" />
|
||
|
|
<path class="tasse-reflet" d="M13 18 L17 62" />
|
||
|
|
</g>
|
||
|
|
</defs>
|
||
|
|
<rect class="table" x="0" y="200" width="580" height="14" rx="3" />
|
||
|
|
<path class="table-fil" d="M0 200 H580" />
|
||
|
|
<use href="#tasse" x="34" y="114" class="humeur-gris" />
|
||
|
|
<use href="#tasse" x="132" y="114" class="humeur-orange" />
|
||
|
|
<use href="#tasse" x="230" y="114" class="humeur-rouge" />
|
||
|
|
<g transform="translate(410 98)">
|
||
|
|
<g class="vapeur">
|
||
|
|
<path d="M22 -6 c-9 -11 9 -20 0 -31 c-9 -11 9 -20 0 -31" />
|
||
|
|
<path d="M44 -10 c-9 -11 9 -20 0 -31 c-9 -11 9 -20 0 -31" />
|
||
|
|
</g>
|
||
|
|
<use href="#tasse" x="0" y="0" class="humeur-vert" />
|
||
|
|
<rect class="kluk-socle" x="-22" y="86" width="112" height="16" rx="8" />
|
||
|
|
<circle class="kluk-voyant" cx="34" cy="94" r="2.6" />
|
||
|
|
</g>
|
||
|
|
</svg>
|