30 lines
1.5 KiB
Text
30 lines
1.5 KiB
Text
<%# Illustration « table et tasses », en SVG dans la page pour suivre les variables CSS.
|
|
Une seule par page (identifiants #tasse et #tasses-titre).
|
|
render "charte/tasses" %>
|
|
<%# locals: () -%>
|
|
<figure class="tasses">
|
|
<svg viewBox="0 0 580 214" role="img" aria-labelledby="tasses-titre">
|
|
<title id="tasses-titre">Illustration : trois tasses de couleur alignées sur la table, et une quatrième posée sur la Kluk, fumante.</title>
|
|
<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 class="kluk-illu" transform="translate(410 98)">
|
|
<g class="vapeur" aria-hidden="true">
|
|
<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>
|
|
</figure>
|