studio-variable/hecq-et-lesort
5
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

characters : extraire les pupilles en éléments circle séparés, corriger le sélecteur CSS pour les colorer en vert

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-05-27 17:06:37 +02:00
parent 778ccb3097
commit ee50caa9b5
2 changed files with 19 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/css/src/_header.scss
View file

@ -10,6 +10,7 @@
.top {
display: flex;
justify-content: space-between;
padding: 0 var(--space-body);
button {
font-family: "Bartok", sans-serif;
text-transform: uppercase;
@ -24,7 +25,8 @@
svg {
margin-top: -2.5rem;
#left-character-background,
#right-character-background path {
#right-character-background path,
[id*="pupil"] circle {
fill: var(--color-green) !important;
}
}

20
assets/images/characters/characters.svg
View file

@ -17,10 +17,16 @@
<path id="chin" d="M125.34,72.09C125.34,72.09 131,96.36 127.39,111.73C123.78,127.1 121.9,140.48 121.24,142.98C118.08,154.89 108.85,160.41 99.71,164.7C91.26,168.67 87.08,170.49 78.77,170.49C70.46,170.49 66.29,168.67 57.83,164.7C48.69,160.41 39.46,154.89 36.3,142.98C35.67,140.61 33.95,128.47 30.7,114.13" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="left-eyebrow" d="M36.44,78.4C36.44,78.4 46.24,69.47 57.39,72.38C65.7,74.55 66.28,75.39 72.14,76.2" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="left-eye-top" d="M38.74,89.35C45.09,83.98 54.74,77.4 69.83,88.35" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="left-eye" d="M49.14,84.47C47.81,87.27 48.92,90.57 51.62,91.85C54.32,93.13 57.58,91.9 58.91,89.11C60.24,86.31 59.13,83.01 56.43,81.73C53.73,80.45 50.47,81.68 49.14,84.47ZM50.39,86.35C50.85,85.39 51.96,84.97 52.89,85.41C53.82,85.85 54.2,86.98 53.74,87.94C53.28,88.9 52.17,89.32 51.24,88.88C50.31,88.44 49.94,87.31 50.39,86.35Z" style="fill-rule:nonzero;"/>
<path id="left-eye" d="M49.14,84.47C47.81,87.27 48.92,90.57 51.62,91.85C54.32,93.13 57.58,91.9 58.91,89.11C60.24,86.31 59.13,83.01 56.43,81.73C53.73,80.45 50.47,81.68 49.14,84.47Z" style="fill-rule:nonzero;"/>
<g id="left-pupil" transform="matrix(1.267471,0,0,1.267471,-14.467461,-23.763038)">
<circle cx="52.5" cy="87.5" r="1.5" style="fill-rule:nonzero;"/>
</g>
<path id="right-eyebrow" d="M121.11,78.4C121.11,78.4 111.31,69.47 100.16,72.38C91.85,74.55 91.27,75.39 85.41,76.2" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="right-eye-top" d="M118.81,89.35C112.46,83.98 102.81,77.4 87.72,88.35" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="right-eye" d="M98.72,84.47C97.39,87.27 98.5,90.57 101.2,91.85C103.9,93.13 107.16,91.9 108.49,89.11C109.82,86.31 108.71,83.01 106.01,81.73C103.31,80.45 100.05,81.68 98.72,84.47ZM99.98,86.35C100.44,85.39 101.55,84.97 102.48,85.41C103.41,85.85 103.79,86.98 103.33,87.94C102.87,88.9 101.76,89.32 100.83,88.88C99.9,88.44 99.53,87.31 99.98,86.35Z" style="fill-rule:nonzero;"/>
<path id="right-eye" d="M98.72,84.47C97.39,87.27 98.5,90.57 101.2,91.85C103.9,93.13 107.16,91.9 108.49,89.11C109.82,86.31 108.71,83.01 106.01,81.73C103.31,80.45 100.05,81.68 98.72,84.47Z" style="fill-rule:nonzero;"/>
<g id="right-pupil" transform="matrix(1.267471,0,0,1.267471,35.11397,-23.763038)">
<circle cx="52.5" cy="87.5" r="1.5" style="fill-rule:nonzero;"/>
</g>
<path id="right-exterior-hair" d="M141.53,118.34C138.12,139.12 158.27,148.88 146.26,171.34" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
</g>
<g id="right-character">
@ -40,8 +46,14 @@
<path id="left-ear" d="M147.03,112.67C139.94,113.3 140.05,107.59 140.35,102.85C140.84,95.14 136.25,91.79 135.65,88.25C134.35,80.54 139.34,77.55 143.58,80.39" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="chin1" serif:id="chin" d="M150.12,113.56C149.66,117.67 150.16,119.74 150.65,122.32C151.92,129.09 155.79,139.79 167.27,149.93C174.38,156.21 176.05,170.49 198.93,170.49C221.81,170.49 223.48,156.22 230.59,149.93C239.3,142.23 243.62,134.22 245.76,127.84C246.22,126.48 246.96,123.91 247.17,122.97" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="chin-crease" d="M208.37,150.31C202.83,147.78 193.86,147.78 188.32,150.31" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="left-eye1" serif:id="left-eye" d="M168.82,77.89C167.49,80.69 168.6,83.99 171.3,85.27C174,86.55 177.26,85.32 178.59,82.53C179.92,79.73 178.81,76.43 176.11,75.15C173.41,73.87 170.15,75.1 168.82,77.89ZM170.08,79.76C170.54,78.8 171.65,78.38 172.58,78.82C173.51,79.26 173.89,80.39 173.43,81.35C172.97,82.31 171.86,82.73 170.93,82.29C170,81.85 169.63,80.72 170.08,79.76Z" style="fill-rule:nonzero;"/>
<path id="right-eye1" serif:id="right-eye" d="M225.71,84.43C227.96,82.46 228.12,78.98 226.08,76.65C224.04,74.32 220.57,74.03 218.32,76C216.07,77.97 215.91,81.45 217.95,83.78C219.99,86.11 223.46,86.4 225.71,84.44L225.71,84.43ZM218.78,78.96C219.55,78.29 220.74,78.39 221.44,79.19C222.14,79.99 222.08,81.18 221.31,81.86C220.54,82.53 219.35,82.43 218.65,81.64C217.95,80.84 218.01,79.65 218.78,78.97L218.78,78.96Z" style="fill-rule:nonzero;"/>
<path id="left-eye1" serif:id="left-eye" d="M168.82,77.89C167.49,80.69 168.6,83.99 171.3,85.27C174,86.55 177.26,85.32 178.59,82.53C179.92,79.73 178.81,76.43 176.11,75.15C173.41,73.87 170.15,75.1 168.82,77.89Z" style="fill-rule:nonzero;"/>
<g id="right-pupil1" serif:id="right-pupil" transform="matrix(1.267471,0,0,1.267471,105.22865,-30.337257)">
<circle cx="52.5" cy="87.5" r="1.5" style="fill-rule:nonzero;"/>
</g>
<path id="right-eye1" serif:id="right-eye" d="M225.71,84.43C227.96,82.46 228.12,78.98 226.08,76.65C224.04,74.32 220.57,74.03 218.32,76C216.07,77.97 215.91,81.45 217.95,83.78C219.99,86.11 223.46,86.4 225.71,84.44L225.71,84.43Z" style="fill-rule:nonzero;"/>
<g id="right-pupil2" serif:id="right-pupil" transform="matrix(1.267471,0,0,1.267471,153.508174,-30.505516)">
<circle cx="52.5" cy="87.5" r="1.5" style="fill-rule:nonzero;"/>
</g>
<path id="left-eyebrow1" serif:id="left-eyebrow" d="M192.6,69.09C192.6,69.09 184.87,67.11 179,64.24C173.56,61.58 167.57,57.96 167.57,57.96C167.57,57.96 160.61,66.63 157,68.2" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="right-eyebrow1" serif:id="right-eyebrow" d="M204.1,69.09C204.1,69.09 211.83,67.11 217.7,64.24C223.14,61.58 229.13,57.96 229.13,57.96C229.13,57.96 236.09,66.63 239.7,68.2" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="left-eye-top1" serif:id="left-eye-top" d="M187.36,82.47C184,79.48 179.55,75.69 173.96,75.68C169.92,75.67 165.27,77.64 160.01,83.31" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After