storytellurx-v1/public/assets/lotties/zipper.svg
Elias Rhouzlane a82706a764 feat: Add Lottie to SVG conversion utility and integrate zipper animation
- Created a new utility script `lottie-to-svg.ts` to convert Lottie animations to SVG format using `bodymovin-to-smil`.
- Added a new Lottie animation file `zipper.json` for the zipper animation.
- Generated the corresponding SVG file `zipper.svg` from the Lottie animation.
- Updated `deno.json` to include new dependencies and references for the zipper animation.
- Modified `main.css` to introduce new color variables and styles for the zipper animation.
2025-07-01 04:23:37 +02:00

1 line
No EOL
5.7 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="1000" height="1000" viewBox="0 0 1000 1000" style="width:100%;height:100%"><defs><animate repeatCount="indefinite" dur="2.04s" begin="0s" xlink:href="#_R_G_L_1_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M-355 -315 C-115,-161 -1.53,68.83 -1.35,155 C-1.06,295.48 0,370 0,370 " to="M-355 -315 C-115,-161 -1.53,68.83 -1.35,155 C-1.06,295.48 0,370 0,370 " keyTimes="0;0.1152941;0.2305882;0.3129412;0.3623529;0.3952941;0.4117647;0.4901961;0.5066667;0.5396078;0.5890196;0.6713725;0.7866667;0.9019608;1" values="M-355 -315 C-115,-161 -1.53,68.83 -1.35,155 C-1.06,295.48 0,370 0,370 ;M-262.6 -351.8 C-90.08,-229.72 -1.53,-81.25 -1.35,4.92 C-1.06,145.39 0,370 0,370 ;M-166.48 -389.99 C-61.44,-299.83 -1.53,-231.33 -1.35,-145.16 C-1.06,-4.69 0,370 0,370 ;M-89.81 -422.27 C-32.97,-354.91 -1.53,-338.53 -1.35,-252.36 C-1.06,-111.89 0,370 0,370 ;M-45.9 -439.13 C-17.98,-385.45 -1.53,-402.85 -1.35,-316.68 C-1.06,-176.2 0,370 0,370 ;M-18.3 -446.38 C-9.66,-401.82 -1.53,-445.73 -1.35,-359.56 C-1.06,-219.09 0,370 0,370 ;M-1 -450 C-1,-405.25 -1.03,-401.38 -0.98,-380.87 C-0.62,-239.38 0,370 0,370 ;M-1 -450 C-1,-405.25 -1.03,-401.38 -0.98,-380.87 C-0.62,-239.38 0,370 0,370 ;M-18.3 -446.38 C-9.66,-401.82 -1.53,-445.73 -1.35,-359.56 C-1.06,-219.09 0,370 0,370 ;M-45.9 -439.13 C-17.98,-385.45 -1.53,-402.85 -1.35,-316.68 C-1.06,-176.2 0,370 0,370 ;M-89.81 -422.27 C-32.97,-354.91 -1.53,-338.53 -1.35,-252.36 C-1.06,-111.89 0,370 0,370 ;M-166.48 -389.99 C-61.44,-299.83 -1.53,-231.33 -1.35,-145.16 C-1.06,-4.69 0,370 0,370 ;M-262.6 -351.8 C-90.08,-229.72 -1.53,-81.25 -1.35,4.92 C-1.06,145.39 0,370 0,370 ;M-355 -315 C-115,-161 -1.53,68.83 -1.35,155 C-1.06,295.48 0,370 0,370 ;M-355 -315 C-115,-161 -1.53,68.83 -1.35,155 C-1.06,295.48 0,370 0,370 " keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animateTransform repeatCount="indefinite" dur="2.04s" begin="0s" xlink:href="#_R_G_L_0_G" fill="freeze" attributeName="transform" from="8 160.329" to="8 160.329" type="translate" additive="sum" keyTimes="0;0.4117647;0.4901961;0.9019608;1" values="8 160.329;8 -441.671;8 -441.671;8 160.329;8 160.329" keySplines="0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline"/><animateTransform repeatCount="indefinite" dur="2.04s" begin="0s" xlink:href="#_R_G_L_0_G" fill="freeze" attributeName="transform" from="0.38 0.38" to="0.38 0.38" type="scale" additive="sum" keyTimes="0;1" values="0.38 0.38;0.38 0.38" keySplines="0 0 1 1" calcMode="spline"/><animate attributeType="XML" attributeName="opacity" dur="2s" from="0" to="1" xlink:href="#time_group"/></defs><g id="_R_G"><g id="_R_G_L_1_G_N_1_T_0" transform=" translate(494.7, 537) translate(0, 0)"><g id="_R_G_L_1_G"><path id="_R_G_L_1_G_D_0_P_0" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="24" stroke-opacity="1" d=" M-355 -315 C-115,-161 -1.53,68.83 -1.35,155 C-1.06,295.48 0,370 0,370 "/></g></g><g id="_R_G_L_0_G_N_1_T_0" transform=" translate(494.7, 537) translate(0, 0)"><g id="_R_G_L_0_G"><path id="_R_G_L_0_G_D_0_P_0" fill="#000000" fill-opacity="1" fill-rule="nonzero" d=" M0.75 7.25 C0.75,7.25 -53.75,-2.25 -82.25,60 C-90.35,77.7 -80.27,93.7 -73.5,121.5 C-64,160.5 -73.82,181.66 -61.75,193.5 C-48.75,206.25 1.25,202 1.25,202 C1.25,202 0.75,7.25 0.75,7.25z "/><path id="_R_G_L_0_G_D_1_P_0" fill="#000000" fill-opacity="1" fill-rule="nonzero" d=" M52 155.5 C52,155.5 -54.5,155.5 -54.5,155.5 C-54.5,155.5 -63.42,378.5 -64,397.5 C-65,430.5 -43,444 -25,447 C-7,450 16.5,447 31,445.5 C45.5,444 63.5,423.5 62.5,403.5 C61.87,390.98 52,155.5 52,155.5z "/><path id="_R_G_L_0_G_D_2_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="8.3" stroke-opacity="1" d=" M52 155.5 C52,155.5 -54.5,155.5 -54.5,155.5 C-54.5,155.5 -63.42,378.5 -64,397.5 C-65,430.5 -43,444 -25,447 C-7,450 16.5,447 31,445.5 C45.5,444 63.5,423.5 62.5,403.5 C61.87,390.98 52,155.5 52,155.5z "/><path id="_R_G_L_0_G_D_3_P_0" fill="#ffffff" fill-opacity="1" fill-rule="nonzero" d=" M41 190.5 C41,190.5 41,233 41,233 C41,244.04 32.04,253 21,253 C21,253 -24,253 -24,253 C-35.04,253 -44,244.04 -44,233 C-44,233 -44,190.5 -44,190.5 C-44,179.46 -35.04,170.5 -24,170.5 C-24,170.5 21,170.5 21,170.5 C32.04,170.5 41,179.46 41,190.5z "/><path id="_R_G_L_0_G_D_4_P_0" fill="#ffffff" fill-opacity="1" fill-rule="nonzero" d=" M-1.5 345.5 C22.23,345.5 41.5,363.54 41.5,385.75 C41.5,407.96 22.23,426 -1.5,426 C-25.23,426 -44.5,407.96 -44.5,385.75 C-44.5,363.54 -25.23,345.5 -1.5,345.5z "/><path id="_R_G_L_0_G_D_5_P_0" fill="#000000" fill-opacity="1" fill-rule="nonzero" d=" M28.85 1.4 C28.85,1.4 28.85,198.3 28.85,198.3 C28.85,204.26 24.01,209.1 18.05,209.1 C18.05,209.1 -19.55,209.1 -19.55,209.1 C-25.51,209.1 -30.35,204.26 -30.35,198.3 C-30.35,198.3 -30.35,1.4 -30.35,1.4 C-30.35,-4.56 -25.51,-9.4 -19.55,-9.4 C-19.55,-9.4 18.05,-9.4 18.05,-9.4 C24.01,-9.4 28.85,-4.56 28.85,1.4z "/><path id="_R_G_L_0_G_D_6_P_0" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke-width="8.3" stroke-opacity="1" d=" M28.85 1.4 C28.85,1.4 28.85,198.3 28.85,198.3 C28.85,204.26 24.01,209.1 18.05,209.1 C18.05,209.1 -19.55,209.1 -19.55,209.1 C-25.51,209.1 -30.35,204.26 -30.35,198.3 C-30.35,198.3 -30.35,1.4 -30.35,1.4 C-30.35,-4.56 -25.51,-9.4 -19.55,-9.4 C-19.55,-9.4 18.05,-9.4 18.05,-9.4 C24.01,-9.4 28.85,-4.56 28.85,1.4z "/></g></g></g><g id="time_group"/></svg>