kevin/Popsu-coloque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animated background

Browse Source
This commit is contained in:
ouidade
2024-04-21 17:20:52 +02:00
parent 67775e5d42
commit e560e5914b
8 changed files with 564 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/colloque2024/css-compiled/index.css
+25 -54
View File
@@ -339,15 +339,6 @@ footer h2 {
line-height: 1.5rem; }
/* Link the SVG file */
body {
/* background-image: url('../images/fond-ronds.svg'); */
/* Add other background properties as needed */
width: 100%;
height: 100vh;
/* Adjust as needed */
background-size: cover;
/* Adjust as needed */ }
@keyframes pulse {
0% {
transform: scale(0); }
@@ -356,15 +347,15 @@ body {
@keyframes slidein {
from {
transform: translateX(20%); }
transform: translateX(0%); }
to {
transform: translateX(70%); } }
transform: translateX(100%); } }
@keyframes dropDown {
from {
transform: translateY(20%); }
transform: translateY(0%); }
to {
transform: translateY(70%); } }
transform: translateY(100%); } }
@keyframes translateAnimation {
0% {
@@ -392,6 +383,23 @@ body {
fill: #349a84;
/* Final fill color */ } }
@keyframes football-motion {
0% {
transform: translateX(0) translateY(0); }
100% {
transform: translateX(100px); } }
@keyframes traceAppear {
0% {
opacity: 0; }
70% {
opacity: 0; }
100% {
opacity: 1; } }
#path_circle_vert_clair_erable_2 {
animation: traceAppear 2.5s forwards; }
/* Apply styles to the SVG paths
#circle_pop_trans,
#circle_pop_trans-2,
@@ -401,47 +409,9 @@ body {
/* Example animation */
/* animation: pulse 2s infinite alternate; */
/* animation: dropDown 2s infinite alternate; */
/* animation: pulse 2s infinite alternate; */ }
#cercle_vert_erable-4-3 {
animation: changeColor2 2s forwards; }
/* Apply styles to the SVG paths */
#circle_vert_clair_erable-3-1 {
animation: changeColor 2s forwards;
/* animation: pulse 2s infinite alternate; */
/* animation: slidein 2s infinite alternate; */ }
#circle_orange-7 {
/* animation: changeColor 2s infinite alternate; */ }
#circle_orange-6 {
/* Main animation for the football */
/* animation: football-motion 2s linear infinite; */ }
#circle_orange-6-bis {
/* Trailing effect animation */
/* animation: trace-motion 2s linear infinite; */ }
@keyframes football-motion {
0% {
transform: translateX(0) translateY(0); }
100% {
transform: translateX(100px); } }
@keyframes trace-motion {
0% {
opacity: 0.5;
/* Adjust the opacity to control the visibility of the trace */
/* Additional properties for the trailing effect */
transform: translateX(0px) translateY(0);
/* Adjust as needed */ }
100% {
opacity: 0.3;
/* Make the trace disappear at the end */
/* Additional properties for the trailing effect */
transform: translateX(100px);
/* Adjust as needed */ } }
/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
@@ -582,8 +552,9 @@ body {
background-size: content;
display: block;
position: absolute;
top: 0;
left: 0; }
opacity: 0.5;
top: 100px;
left: +53px; }
article.publications, article.interviews {
margin-top: 1rem; }
web/themes/custom/colloque2024/css-compiled/pages/layout.css
+3 -2
View File
@@ -25,8 +25,9 @@ body {
background-size: content;
display: block;
position: absolute;
top: 0;
left: 0; }
opacity: 0.5;
top: 100px;
left: +53px; }
article.publications, article.interviews {
margin-top: 1rem; }
web/themes/custom/colloque2024/css/configs/animation.scss
+11 -76
View File
@@ -1,11 +1,3 @@
/* Link the SVG file */
body {
/* background-image: url('../images/fond-ronds.svg'); */
/* Add other background properties as needed */
width: 100%;
height: 100vh; /* Adjust as needed */
background-size: cover; /* Adjust as needed */
}
@keyframes pulse {
@@ -15,13 +7,13 @@ body {
@keyframes slidein {
from {transform: translateX(20%);}
to {transform: translateX(70%);}
from {transform: translateX(0%);}
to {transform: translateX(100%);}
}
@keyframes dropDown {
from {transform: translateY(20%);}
to {transform: translateY(70%);}
from {transform: translateY(0%);}
to {transform: translateY(100%);}
}
@keyframes translateAnimation {
@@ -40,72 +32,15 @@ body {
100% {fill: #349a84; /* Final fill color */}
}
/* Apply styles to the SVG paths
#circle_pop_trans,
#circle_pop_trans-2,
/* Add other SVG IDs or classes here */
#circle_orange{
/* Add styles to your SVG paths */
/* Example animation */
/* animation: pulse 2s infinite alternate; */
/* animation: dropDown 2s infinite alternate; */
/* animation: pulse 2s infinite alternate; */
@keyframes traceAppear {
0% {opacity: 0;}
70%{opacity: 0;}
100% {opacity: 1;}
}
#path_circle_vert_clair_erable_2{
animation: traceAppear 2.5s forwards;
}
#cercle_vert_erable-4-3{
animation: changeColor2 2s forwards;
}
/* Apply styles to the SVG paths */
#circle_vert_clair_erable-3-1
{
animation: changeColor 2s forwards;
/* animation: slidein 2s infinite alternate; */
}
#circle_orange-7{
/* animation: changeColor 2s infinite alternate; */
}
#circle_orange-6 {
/* Main animation for the football */
animation: football-motion 2s linear infinite;
}
#circle_orange-6-bis {
/* Trailing effect animation */
filter: url("#blur");
animation: trace-motion 2s linear infinite;
filter: url("#blur");
}
@keyframes football-motion {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(100px) ;
}
}
@keyframes trace-motion {
0% {
opacity: 0.5; /* Adjust the opacity to control the visibility of the trace */
/* Additional properties for the trailing effect */
transform: translateX(0px) translateY(0); /* Adjust as needed */
}
100% {
opacity: 0.3; /* Make the trace disappear at the end */
/* Additional properties for the trailing effect */
transform: translateX(100px) ; /* Adjust as needed */
}
}
web/themes/custom/colloque2024/css/pages/layout.scss
+4 -3
View File
@@ -28,13 +28,14 @@ body {
content: " ";
width: 100%;
height: 100%;
// background-image: url("../images/fond-ronds.svg");
// background-image: url("../images/fond-ronds-trace.svg");
background-repeat: no-repeat;
background-size: content;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
top: 100px;
left: +53px;
}
web/themes/custom/colloque2024/images/fond-ronds-trace-start.svg
+157
View File
@@ -0,0 +1,157 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1900"
height="1500"
viewBox="0 0 502.70834 396.875"
version="1.1"
id="svg1"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs1" /><g
id="layer1"
transform="translate(-51.525162,-32.699875)"><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange"
cx="84.683075"
cy="132.53793"
r="15.890945" /><circle
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans"
cx="136.45699"
cy="76.141045"
r="15.890945" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_2"
cx="193.12822"
cy="74.014618"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange-9-0-8-2"
cx="456.90131"
cy="74.184013"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_3"
cx="61.729004"
cy="166.14003"
r="15.890945" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_2"
cx="550.16675"
cy="168.13489"
r="15.890945" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_3"
cx="375.24548"
cy="166.11342"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_5"
cx="506.88132"
cy="165.2007"
r="15.890945" /><circle
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans_3"
cx="325.69421"
cy="214.66238"
r="15.890945" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_4"
cx="534.07587"
cy="216.84201"
r="15.890945" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_4"
cx="190.17583"
cy="416.50134"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_6"
cx="139.32957"
cy="44.208164"
r="15.890945" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_3"
cx="88.886528"
cy="61.209129"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0322974;paint-order:fill markers stroke"
id="circle_vert_clair_erable_7"
cx="91.831978"
cy="222.5634"
r="22.098158" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0353214;paint-order:fill markers stroke"
id="circle_orange_6"
cx="512.90173"
cy="41.339592"
r="24.167231" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_5"
cx="206.20142"
cy="165.12646"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_4"
cx="438.36194"
cy="77.165817"
r="15.890945" /><circle
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0330534;paint-order:fill markers stroke"
id="circle_pop_trans_4"
cx="52.458916"
cy="116.0085"
r="22.615427" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable"
cx="194.41611"
cy="36.373547"
r="15.890945" /><path
style="fill:#349a84;stroke:none;stroke-width:1.26656"
d="m 45.411881,96.085496 c 2.51922,0.43418 4.89045,1.31504 7.03031,3.17846 1.71454,1.493054 3.2111,3.332644 4.34049,5.602294 5.24622,10.54298 1.91584,25.35532 -7.24636,29.88124 -2.40473,1.18789 -4.95667,1.49748 -7.49899,1.13591 -3.86474,-0.54964 -6.86418,-3.96089 -10.59233,-5.07087 -8.81705,-2.6251 -17.87023,-3.96382 -26.7151697,-6.46624 -3.49238,-0.98807 -8.76508,-3.30367 -9.5181,-8.56171 -0.85321,-5.95759 5.08815998,-8.82552 8.58073,-9.92091 2.82498,-0.886 5.75129,-0.90581 8.6238397,-1.2636 6.24391,-0.77769 12.5983,-1.15433 18.74749,-2.92515 2.50185,-0.72048 4.46518,-2.640174 6.74909,-4.008804 2.23517,-1.33942 5.04973,-2.00274 7.499,-1.58062 z"
id="path_circle_pop_trans_4" /><path
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
d="m 49.929111,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
id="path_circle_vert_clair_erable_3" /><path
style="fill:#038788;stroke:none;stroke-width:0.837592"
d="m 176.96306,427.97839 c 0.28713,-1.66598 0.86969,-3.23411 2.10196,-4.64922 0.98738,-1.13386 2.20392,-2.12354 3.70487,-2.87043 6.97221,-3.4694 16.7678,-1.26697 19.76085,4.79211 0.78557,1.59028 0.9903,3.27791 0.75119,4.95918 -0.36348,2.5558 -2.61938,4.53937 -3.35343,7.00485 -1.73601,5.83082 -2.62133,11.8178 -4.2762,17.66708 -0.65342,2.30955 -2.18477,5.79646 -5.66198,6.29444 -3.93982,0.56424 -5.83643,-3.36487 -6.56082,-5.67454 -0.58593,-1.8682 -0.59903,-3.8034 -0.83564,-5.70307 -0.51428,-4.12917 -0.76337,-8.33141 -1.93444,-12.39795 -0.47645,-1.6545 -1.74598,-2.95288 -2.65106,-4.46326 -0.88579,-1.47815 -1.32445,-3.33945 -1.0453,-4.95919 z"
id="path_circle_vert_erable_4" /><path
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 545.88364,200.04259 c -20.03075,1.78212 -17.31022,32.69312 2.6358,30.91858 20.03076,-1.7821 17.31021,-32.69315 -2.6358,-30.91858 z"
id="path_circle_orange_4" /><path
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.53571"
d="m 91.317542,195.8549 c -25.690903,2.28569 -22.201624,41.93132 3.380606,39.65534 25.690922,-2.28568 22.201612,-41.93136 -3.380606,-39.65534 z"
id="path_circle_vert_clair_erable_7" /><path
style="fill:#b9ce00;fill-opacity:1;stroke:none"
d="m 512.19816,151.34247 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93204 3.69834,-4.57 2.81908,-12.55101 -1.70959,-16.24526 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
id="path_circle_vert_clair_erable_5" /><path
style="fill:#b9ce00;fill-opacity:1;stroke:none"
d="m 124.37597,33.869337 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.5444,6.72502 26.41208,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.93204,-18.75404 -4.57,-3.6983397 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
id="path_circle_vert_clair_erable_6" /><path
style="fill:#038788;fill-opacity:1;stroke:none"
d="m 74.665152,53.71424 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.544398,6.72502 26.412078,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.932038,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
id="path_circle_vert_erable_3" /><path
style="fill:#038788;fill-opacity:1;stroke:none"
d="m 555.68419,153.87047 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93203 3.69834,-4.57001 2.81908,-12.55102 -1.70959,-16.24527 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
id="path_circle_vert_erable_2" /><path
style="fill:#ff804d;fill-opacity:1;stroke:none"
d="m 203.88265,150.98761 c 2.16405,0.16719 4.2637,0.74796 6.15277,1.83301 12.5874,7.23004 6.72502,27.5444 -7.93188,26.41208 -5.739,-0.44336 -14.95781,-2.24109 -18.75404,-6.93204 -3.69834,-4.57 -2.81908,-12.55101 1.70959,-16.24526 4.33146,-3.53336 13.29117,-5.49519 18.82356,-5.06779 z"
id="path_circle_orange_5" /><path
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.25134"
d="m 528.79932,30.726038 c -0.21033,2.69351 -0.94097,5.30686 -2.30601,7.65812 -9.09574,15.66707 -34.65217,8.37038 -33.22766,-9.87252 0.55777,-7.14312 2.8194,-18.6174301 8.72084,-23.3424601 5.74928,-4.60318005 15.78977,-3.5088 20.43731,2.12787 4.44514,5.3912101 6.91321,16.5430201 6.37552,23.4289901 z"
id="path_circle_orange_6" /><path
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 192.80832,14.964615 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
id="path_circle_vert_erable" /><path
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 202.47563,59.013158 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
id="path_circle_vert_clair_erable_2" /><path
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 462.8305,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
id="path_circle_vert_clair_erable" /><circle
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans_2"
cx="213.28802"
cy="74.286247"
r="15.890945" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

web/themes/custom/colloque2024/images/fond-ronds-trace.svg
+9 -9
View File
@@ -36,7 +36,7 @@
cy="74.014618"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange-9-0-8-2"
id="circle_vert_clair_erable"
cx="321.56879"
cy="74.184013"
r="15.890945" /><circle
@@ -91,7 +91,7 @@
cy="328.63483"
r="22.098158" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0353214;paint-order:fill markers stroke"
id="circle_orange_6"
id="circle_orange_6" class=""
cx="512.90173"
cy="262.26077"
r="24.167231" /><circle
@@ -111,13 +111,13 @@
cy="116.0085"
r="22.615427" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable"
cx="194.41611"
id="circle_vert_erable" class="dropdown1"
cx="193.12822"
cy="94.895714"
r="15.890945" /><path
style="fill:#349a84;stroke:none;stroke-width:1.26656"
style="filter:url(#f5);fill:#349a84;stroke:none;stroke-width:1.26656"
d="m 506.27395,96.085496 c 2.51922,0.43418 4.89045,1.31504 7.03031,3.17846 1.71454,1.493054 3.2111,3.332644 4.34049,5.602294 5.24622,10.54298 1.91584,25.35532 -7.24636,29.88124 -2.40473,1.18789 -4.95667,1.49748 -7.49899,1.13591 -3.86474,-0.54964 -6.86418,-3.96089 -10.59233,-5.07087 -8.81705,-2.6251 -17.87023,-3.96382 -26.71517,-6.46624 -3.49238,-0.98807 -8.76508,-3.30367 -9.5181,-8.56171 -0.85321,-5.95759 5.08816,-8.82552 8.58073,-9.92091 2.82498,-0.886 5.75129,-0.90581 8.62384,-1.2636 6.24391,-0.77769 12.5983,-1.15433 18.74749,-2.92515 2.50185,-0.72048 4.46518,-2.640174 6.74909,-4.008804 2.23517,-1.33942 5.04973,-2.00274 7.499,-1.58062 z"
id="path_circle_pop_trans_4" /><path
id="path_circle_pop_trans_4" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
d="m 294.25916,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
id="path_circle_vert_clair_erable_3" /><path
@@ -150,18 +150,18 @@
id="path_circle_orange_6" /><path
style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 192.80832,73.486782 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
id="path_circle_vert_erable" /><path
id="path_circle_vert_erable" class="dropdown1" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 347.31799,59.013158 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
id="path_circle_vert_clair_erable_2" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 327.49799,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
id="path_circle_vert_clair_erable" /><circle
style="filter:url(#f5);fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans_2"
cx="358.1304"
cy="74.286247"
r="15.890945" />
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

web/themes/custom/colloque2024/js/animation_home.js
+282 -55
View File
@@ -3,31 +3,299 @@
// Récupérer la forme SVG
let dropdowns = document.getElementsByClassName('dropdown');
console.log(dropdowns);
// let dropdowns = document.getElementsByClassName('dropdown');
// console.log(dropdowns);
// Parcourir tous les éléments sélectionnés
Array.from(dropdowns).forEach(dropdown => {
function slideDown() {
let translateY = -50; // Position de départ (en bas)
// // Parcourir tous les éléments sélectionnés
// Array.from(dropdowns).forEach(dropdown => {
// function slideDown() {
// let translateY = -50; // Position de départ (en bas)
function animate() {
translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
dropdown.style.transform = `translateY(${translateY}px)`; // Appliquer la transformation
// function animate() {
// translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
// dropdown.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
// dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
// // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
if (translateY < 200) { // Limite la hauteur à laquelle la forme doit être animée
// if (translateY < 100) { // Limite la hauteur à laquelle la forme doit être animée
// requestAnimationFrame(animate); // Appel récursif de la fonction animate
// }
// }
// animate(); // Lancer l'animation
// }
// slideDown(); // Lancer l'animation lorsque la page est chargée
// });
let dropdowns1 = document.getElementsByClassName('dropdown1');
console.log(dropdowns1);
Array.from(dropdowns1).forEach(dropdown1 => {
function slideDown() {
let translateY = 0; // Position de départ (en bas)
let duration = 6000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.3); // Limite la progression à 1 (pour éviter un dépassement)
progress = easeInOut(progress);
translateY = 70 * progress; // Déplacement d'un pixel vers le haut à chaque itération
dropdown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});
let dropdowns2 = document.getElementsByClassName('dropdown2');
console.log(dropdowns2);
Array.from(dropdowns2).forEach(dropdown2 => {
function slideDown() {
let translateY = 0; // Position de départ (en bas)
let duration = 9000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.3); // Limite la progression à 1 (pour éviter un dépassement)
progress = easeInOut(progress);
translateY = 120 * progress; // Déplacement d'un pixel vers le haut à chaque itération
dropdown2.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});
let dropdowns3 = document.getElementsByClassName('dropdown3');
console.log(dropdowns3);
Array.from(dropdowns3).forEach(dropdown3 => {
function slideDown() {
let translateY = 0; // Position de départ (en bas)
let duration = 7000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
progress = easeInOut(progress);
translateY = 75 * progress; // Déplacement d'un pixel vers le haut à chaque itération
dropdown3.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});
let dropdowns4 = document.getElementsByClassName('dropdown4');
console.log(dropdowns4);
Array.from(dropdowns4).forEach(dropdown4 => {
function slideDown() {
let translateY = 0; // Position de départ (en bas)
let duration = 6000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
progress = easeInOut(progress);
translateY = 85 * progress; // Déplacement d'un pixel vers le haut à chaque itération
dropdown4.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});
let dropdowns5 = document.getElementsByClassName('dropdown5');
console.log(dropdowns5);
Array.from(dropdowns5).forEach(dropdown5 => {
function slideDown() {
let translateY = 0; // Position de départ (en bas)
let duration = 6000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
progress = easeInOut(progress);
translateY = 70 * progress; // Déplacement d'un pixel vers le haut à chaque itération
dropdown5.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});
let tolefts1 = document.getElementsByClassName('toleft1');
Array.from(tolefts1).forEach(toleft1 => {
function slideLeft() {
let translateX = 0; // Position de départ (en bas)
let duration = 4000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
progress = easeInOut(progress);
translateX = -32 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
toleft1.style.transform = `translateX(${translateX}%)`;
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
slideLeft(); // Lancer l'animation lorsque la page est chargée
});
let tolefts2 = document.getElementsByClassName('toleft2');
Array.from(tolefts2).forEach(toleft2 => {
function slideLeft() {
let translateX = 0; // Position de départ (en bas)
let duration = 4000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
progress = easeInOut(progress);
translateX = -32 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
toleft2.style.transform = `translateX(${translateX}%)`;
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
slideLeft(); // Lancer l'animation lorsque la page est chargée
});
let tolefts3 = document.getElementsByClassName('toleft3');
Array.from(tolefts3).forEach(toleft3 => {
function slideLeft() {
let translateX = 0; // Position de départ (en bas)
let duration = 4000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
progress = easeInOut(progress);
translateX = -35 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
toleft3.style.transform = `translateX(${translateX}%)`;
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
slideLeft(); // Lancer l'animation lorsque la page est chargée
});
let torights1 = document.getElementsByClassName('toright1');
Array.from(torights1).forEach(toright1 => {
function slideRight() {
let translateX = 0; // Position de départ (en bas)
function animate() {
translateX += 0.5; // Déplacement d'un pixel vers le haut à chaque itération
toright1.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
if (translateX < 31) { // Limite la hauteur à laquelle la forme doit être animée
requestAnimationFrame(animate); // Appel récursif de la fonction animate
}
}
animate(); // Lancer l'animation
}
slideDown(); // Lancer l'animation lorsque la page est chargée
slideRight(); // Lancer l'animation lorsque la page est chargée
});
let torights2 = document.getElementsByClassName('toright2');
Array.from(torights2).forEach(toright2 => {
function slideRight() {
let translateX = 0; // Position de départ (en bas)
function animate() {
translateX += 0.5; // Déplacement d'un pixel vers le haut à chaque itération
toright2.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
if (translateX < 0) { // Limite la hauteur à laquelle la forme doit être animée
requestAnimationFrame(animate); // Appel récursif de la fonction animate
}
}
animate(); // Lancer l'animation
}
slideRight(); // Lancer l'animation lorsque la page est chargée
});
let torights3 = document.getElementsByClassName('toright3');
console.log(torights3)
Array.from(torights3).forEach(toright3 => {
function slideRight() {
let translateX = 0; // Position de départ (en bas)
function animate() {
translateX += 0.9; // Déplacement d'un pixel vers le haut à chaque itération
toright3.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
if (translateX < 59) { // Limite la hauteur à laquelle la forme doit être animée
requestAnimationFrame(animate); // Appel récursif de la fonction animate
}
}
animate(); // Lancer l'animation
}
slideRight(); // Lancer l'animation lorsque la page est chargée
});
let moveups = document.getElementsByClassName('moveup');
console.log(moveups);
@@ -113,44 +381,3 @@ requestAnimationFrame(animate);
slideRightSlow(); // Lancer l'animation lorsque la page est chargée
});
let tolefts = document.getElementsByClassName('toleft');
console.log(tolefts);
// Parcourir tous les éléments sélectionnés
Array.from(tolefts).forEach(toleft => {
function slideLeft() {
let translateX = 0; // Position de départ (en bas)
let duration = 4000; // Durée de l'animation en millisecondes
let startTime = null; // Temps de départ de l'animation
function animate(timestamp) {
if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
// Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression
progress = easeInOut(progress);
// Calcule la translation en fonction de la progression
translateX = -20 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
// Applique la transformation à l'élément
toleft.style.transform = `translateX(${translateX}%)`;
// Continue l'animation si la progression n'a pas atteint 1
if (progress < 0.8) {
requestAnimationFrame(animate);
}
}
// Fonction d'interpolation (ease-in-out)
function easeInOut(t) {
return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
}
// Lance l'animation
requestAnimationFrame(animate);
}
slideLeft(); // Lancer l'animation lorsque la page est chargée
});
web/themes/custom/colloque2024/template/page--front.html.twig
+73 -104
View File
@@ -82,37 +82,35 @@
</filter>
</defs><g
id="layer1"
transform="translate(-51.525162,-32.699875)"><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
transform="translate(-51.525162,-32.699875)">
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange"
cx="84.683075"
cy="132.53793"
r="15.890945" /><circle
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans"
cx="136.45699"
cy="76.141045"
r="15.890945" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_2"
cx="193.12822"
cy="74.014618"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange-9-0-8-2"
cx="321.56879"
cy="74.184013"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_3"
cx="306.05905"
cy="166.14003"
r="15.890945" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_2"
cx="232.68399"
cy="168.13489"
r="15.890945" /><circle
r="15.890945" />
<circle style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans" cx="136.45699" cy="76.141045" r="15.890945" />
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_2" cx="193.12822" cy="74.014618" r="15.890945" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable" class="toleft1" cx="457" cy="74.184013" r="15.890945" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 462.8305,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
id="path_circle_vert_clair_erable" class="toleft1"/>
<circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_2" class="toleft3" cx="400" cy="168.13489" r="15.890945" />
<path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none"
d="m 400,153.87047 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93203 3.69834,-4.57001 2.81908,-12.55102 -1.70959,-16.24527 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
id="path_circle_vert_erable_2" class="toleft3"/>
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_3" class="toright3" cx="20" cy="166.14003" r="15.890945" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
d="m 10,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
id="path_circle_vert_clair_erable_3" class="toright3"/>
<circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_3"
cx="375.24548"
@@ -137,94 +135,65 @@
id="circle_vert_erable_4"
cx="190.17583"
cy="216.79443"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_6"
cx="139.32957"
cy="214.65398"
r="15.890945" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_3"
cx="88.886528"
cy="255.06381"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0322974;paint-order:fill markers stroke"
id="circle_vert_clair_erable_7"
cx="91.831978"
cy="328.63483"
r="22.098158" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0353214;paint-order:fill markers stroke"
id="circle_orange_6"
cx="512.90173"
cy="262.26077"
r="24.167231" /><circle
style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_5"
cx="484.91324"
cy="165.12646"
r="15.890945" /><circle
style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_4"
cx="438.36194"
cy="77.165817"
r="15.890945" /><circle
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0330534;paint-order:fill markers stroke"
id="circle_pop_trans_4"
cx="513.32098"
cy="116.0085"
r="22.615427" /><circle
style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable"
cx="194.41611"
cy="94.895714"
r="15.890945" /><path
style="filter:url(#f5);fill:#349a84;stroke:none;stroke-width:1.26656"
r="15.890945" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_6" class="dropdown2" cx="139.32957" cy="44.208164" r="15.890945" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none"
d="m 124.37597,33.869337 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.5444,6.72502 26.41208,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.93204,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
id="path_circle_vert_clair_erable_6" class="dropdown2" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0322974;paint-order:fill markers stroke"
id="circle_vert_clair_erable_7" class="dropdown4" cx="91.831978" cy="60" r="22.098158" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.53571"
d="m 91.317542,30 c -25.690903,2.28569 -22.201624,41.93132 3.380606,39.65534 25.690922,-2.28568 22.201612,-41.93136 -3.380606,-39.65534 z"
id="path_circle_vert_clair_erable_7" class="dropdown4"/>
<circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_3" class="dropdown3" cx="88.886528" cy="20" r="15.890945" />
<path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none"
d="m 74.665152,20 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.544398,6.72502 26.412078,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.932038,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
id="path_circle_vert_erable_3" class="dropdown3"/>
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0353214;paint-order:fill markers stroke"
id="circle_orange_6" class="dropdown5" cx="512.90173" cy="41.339592" r="24.167231" />
<path style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.25134"
d="m 528.79932,30.726038 c -0.21033,2.69351 -0.94097,5.30686 -2.30601,7.65812 -9.09574,15.66707 -34.65217,8.37038 -33.22766,-9.87252 0.55777,-7.14312 2.8194,-18.61743 8.72084,-23.34246 5.74928,-4.60318 15.78977,-3.5088 20.43731,2.12787 4.44514,5.39121 6.91321,16.54302 6.37552,23.42899 z"
id="path_circle_orange_6" class="dropdown5"/>
<circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_orange_5" cx="484.91324" cy="165.12646" r="15.890945" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_4" cx="438.36194" cy="77.165817" r="15.890945" />
<circle style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0330534;paint-order:fill markers stroke"
id="circle_pop_trans_4" cx="513.32098" cy="116.0085" r="22.615427" />
<path style="filter:url(#f5);fill:#349a84;stroke:none;stroke-width:1.26656"
d="m 506.27395,96.085496 c 2.51922,0.43418 4.89045,1.31504 7.03031,3.17846 1.71454,1.493054 3.2111,3.332644 4.34049,5.602294 5.24622,10.54298 1.91584,25.35532 -7.24636,29.88124 -2.40473,1.18789 -4.95667,1.49748 -7.49899,1.13591 -3.86474,-0.54964 -6.86418,-3.96089 -10.59233,-5.07087 -8.81705,-2.6251 -17.87023,-3.96382 -26.71517,-6.46624 -3.49238,-0.98807 -8.76508,-3.30367 -9.5181,-8.56171 -0.85321,-5.95759 5.08816,-8.82552 8.58073,-9.92091 2.82498,-0.886 5.75129,-0.90581 8.62384,-1.2636 6.24391,-0.77769 12.5983,-1.15433 18.74749,-2.92515 2.50185,-0.72048 4.46518,-2.640174 6.74909,-4.008804 2.23517,-1.33942 5.04973,-2.00274 7.499,-1.58062 z"
id="path_circle_pop_trans_4" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
d="m 294.25916,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
id="path_circle_vert_clair_erable_3" /><path
id="path_circle_pop_trans_4" />
<circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable" class="dropdown1" cx="193.12822" cy="0" r="15.890945" />
<path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 193.12822,-23 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
id="path_circle_vert_erable" class="dropdown1" />
<path
style="filter:url(#f5);fill:#038788;stroke:none;stroke-width:0.837592"
d="m 176.96306,228.27149 c 0.28713,-1.66598 0.86969,-3.23411 2.10196,-4.64922 0.98738,-1.13386 2.20392,-2.12354 3.70487,-2.87043 6.97221,-3.4694 16.7678,-1.26697 19.76085,4.79211 0.78557,1.59028 0.9903,3.27791 0.75119,4.95918 -0.36348,2.5558 -2.61938,4.53937 -3.35343,7.00485 -1.73601,5.83082 -2.62133,11.8178 -4.2762,17.66708 -0.65342,2.30955 -2.18477,5.79646 -5.66198,6.29444 -3.93982,0.56424 -5.83643,-3.36487 -6.56082,-5.67454 -0.58593,-1.8682 -0.59903,-3.8034 -0.83564,-5.70307 -0.51428,-4.12917 -0.76337,-8.33141 -1.93444,-12.39795 -0.47645,-1.6545 -1.74598,-2.95288 -2.65106,-4.46326 -0.88579,-1.47815 -1.32445,-3.33945 -1.0453,-4.95919 z"
id="path_circle_vert_erable_4" /><path
style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 294.96985,200.04259 c -20.03075,1.78212 -17.31022,32.69312 2.6358,30.91858 20.03076,-1.7821 17.31021,-32.69315 -2.6358,-30.91858 z"
id="path_circle_orange_4" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.53571"
d="m 91.317542,301.92633 c -25.690903,2.28569 -22.201624,41.93132 3.380606,39.65534 25.690922,-2.28568 22.201612,-41.93136 -3.380606,-39.65534 z"
id="path_circle_vert_clair_erable_7" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none"
d="m 442.70309,151.34247 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93204 3.69834,-4.57 2.81908,-12.55101 -1.70959,-16.24526 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
id="path_circle_vert_clair_erable_5" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none"
d="m 124.37597,204.31515 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.5444,6.72502 26.41208,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.93204,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
id="path_circle_vert_clair_erable_6" /><path
style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none"
d="m 74.665152,247.56892 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.544398,6.72502 26.412078,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.932038,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
id="path_circle_vert_erable_3" /><path
style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none"
d="m 238.20143,153.87047 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93203 3.69834,-4.57001 2.81908,-12.55102 -1.70959,-16.24527 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
id="path_circle_vert_erable_2" /><path
id="path_circle_vert_clair_erable_5" />
<path
style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none"
d="m 482.59447,150.98761 c 2.16405,0.16719 4.2637,0.74796 6.15277,1.83301 12.5874,7.23004 6.72502,27.5444 -7.93188,26.41208 -5.739,-0.44336 -14.95781,-2.24109 -18.75404,-6.93204 -3.69834,-4.57 -2.81908,-12.55101 1.70959,-16.24526 4.33146,-3.53336 13.29117,-5.49519 18.82356,-5.06779 z"
id="path_circle_orange_5" /><path
style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.25134"
d="m 528.79932,251.64722 c -0.21033,2.69351 -0.94097,5.30686 -2.30601,7.65812 -9.09574,15.66707 -34.65217,8.37038 -33.22766,-9.87252 0.55777,-7.14312 2.8194,-18.61743 8.72084,-23.34246 5.74928,-4.60318 15.78977,-3.5088 20.43731,2.12787 4.44514,5.39121 6.91321,16.54302 6.37552,23.42899 z"
id="path_circle_orange_6" /><path
style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 192.80832,73.486782 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
id="path_circle_vert_erable" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
id="path_circle_orange_5" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 347.31799,59.013158 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
id="path_circle_vert_clair_erable_2" /><path
style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 327.49799,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
id="path_circle_vert_clair_erable" /><circle
style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans_2"
cx="358.1304"
cy="74.286247"
r="15.890945" />
id="path_circle_vert_clair_erable_2" class="toright2"/>
<circle style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans_2" class="toright1" cx="200" cy="74.286247" r="15.890945" />
</g>
</svg>