Add base interactive layout "rive" whit animation

This commit is contained in:
paoloGuagnano
2024-03-08 12:15:47 +01:00
parent 06336bd3d9
commit 2d5fba8897
58 changed files with 1946 additions and 133 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 199 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:overlay">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4243 5.57573C15.1899 5.34142 14.81 5.34142 14.5757 5.57573C14.3414 5.81004 14.3414 6.18994 14.5757 6.42426L19.5515 11.4H2.99999C2.66862 11.4 2.39999 11.6686 2.39999 12C2.39999 12.3314 2.66862 12.6 2.99999 12.6H19.5515L14.5757 17.5757C14.3414 17.81 14.3414 18.1899 14.5757 18.4243C14.81 18.6586 15.1899 18.6586 15.4243 18.4243L21.4243 12.4243C21.4818 12.3667 21.5252 12.3004 21.5545 12.2297C21.5838 12.1589 21.6 12.0813 21.6 12C21.6 11.9186 21.5838 11.8411 21.5545 11.7703C21.5252 11.6996 21.4818 11.6333 21.4243 11.5757L15.4243 5.57573Z" fill="black"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 749 B

View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 11C14.4853 11 16.5 8.98528 16.5 6.5C16.5 4.01472 14.4853 2 12 2C9.51472 2 7.5 4.01472 7.5 6.5C7.5 8.98528 9.51472 11 12 11Z" fill="black" fill-opacity="0.5"/>
<path d="M19 22H5C3.9 22 3 21.1 3 20C3 16.69 5.69 14 9 14H15C18.31 14 21 16.69 21 20C21 21.1 20.1 22 19 22Z" fill="black" fill-opacity="0.7"/>
</svg>

After

Width:  |  Height:  |  Size: 418 B

View File

@@ -0,0 +1,5 @@
<svg width="64" height="70" viewBox="0 0 64 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38 4.1547C34.2872 2.01111 29.7128 2.01111 26 4.1547L8.28719 14.3812C4.57437 16.5248 2.28719 20.4863 2.28719 24.7735V45.2265C2.28719 49.5137 4.57437 53.4752 8.28719 55.6188L26 65.8453C29.7128 67.9889 34.2872 67.9889 38 65.8453L55.7128 55.6188C59.4256 53.4752 61.7128 49.5137 61.7128 45.2265V24.7735C61.7128 20.4863 59.4256 16.5248 55.7128 14.3812L38 4.1547Z" fill="black" stroke="white" stroke-width="4"/>
<path d="M43.985 32.4751C42.9207 30.6704 39.8026 29 37.9438 29C35.4853 29 34.451 30.4915 32.757 30.4915C31.0031 30.4915 29.3991 29.0895 27.2854 29.0895C24.3923 29.1044 20 31.7592 20 38.0085C20 43.6909 25.1868 49.9999 28.1249 49.9999C29.9088 50.0148 30.3435 48.8813 32.757 48.8813C35.1705 48.8663 35.6952 50.0148 37.4791 49.9999C39.4878 49.9849 41.0468 47.7925 42.2011 46.0624C43.0256 44.8245 43.3554 44.1831 44 42.7812C39.263 41.6029 38.3186 34.0412 43.985 32.4751Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36.9006 24.395C37.95 23.255 38.7295 21.65 38.4447 20C36.7357 20.105 34.7869 21.05 33.6177 22.25C32.5683 23.345 31.7439 24.98 32.0736 26.555C33.9325 26.6 35.7913 25.625 36.9006 24.395Z" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1,6 @@
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 4.1547C26.2872 2.01111 21.7128 2.01111 18 4.1547L8.94744 9.3812C5.23463 11.5248 2.94744 15.4863 2.94744 19.7735V30.2265C2.94744 34.5137 5.23463 38.4752 8.94744 40.6188L18 45.8453C21.7128 47.9889 26.2872 47.9889 30 45.8453L39.0526 40.6188C42.7654 38.4752 45.0526 34.5137 45.0526 30.2265V19.7735C45.0526 15.4863 42.7654 11.5248 39.0526 9.3812L30 4.1547Z" fill="#3789FF" stroke="#76AEFF" stroke-width="4"/>
<g style="mix-blend-mode:overlay">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7 19.7L29.29 15.29C29.11 15.11 28.85 15 28.59 15H15C14.45 15 14 15.45 14 16V34C14 34.55 14.45 35 15 35H33C33.55 35 34 34.55 34 34V20.41C34 20.15 33.89 19.89 33.7 19.7ZM26.0252 19.4362C26.3366 19.5495 26.4971 19.8938 26.3838 20.2052L22.7438 30.2052C22.6304 30.5166 22.2861 30.6772 21.9747 30.5638C21.6633 30.4505 21.5028 30.1062 21.6161 29.7948L25.2561 19.7948C25.3695 19.4834 25.7138 19.3229 26.0252 19.4362ZM20.4243 22.4243C20.6586 22.19 20.6586 21.8101 20.4243 21.5757C20.19 21.3414 19.8101 21.3414 19.5758 21.5757L16.5758 24.5757C16.3414 24.8101 16.3414 25.19 16.5758 25.4243L19.5758 28.4243C19.8101 28.6586 20.19 28.6586 20.4243 28.4243C20.6586 28.19 20.6586 27.8101 20.4243 27.5757L17.8486 25L20.4243 22.4243ZM28.4243 21.5757C28.19 21.3414 27.8101 21.3414 27.5758 21.5757C27.3414 21.8101 27.3414 22.19 27.5758 22.4243L30.1515 25L27.5758 27.5757C27.3414 27.8101 27.3414 28.19 27.5758 28.4243C27.8101 28.6586 28.19 28.6586 28.4243 28.4243L31.4243 25.4243C31.6586 25.19 31.6586 24.8101 31.4243 24.5757L28.4243 21.5757Z" fill="black"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1,7 @@
<svg width="38" height="40" viewBox="0 0 38 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.75 3.01036C20.8107 1.31335 17.1893 1.31335 14.25 3.01036L6.66154 7.39156C3.72223 9.08857 1.91154 12.2248 1.91154 15.6188V24.3812C1.91154 27.7752 3.72223 30.9114 6.66154 32.6084L14.25 36.9896C17.1893 38.6867 20.8107 38.6866 23.75 36.9896L31.3385 32.6084C34.2778 30.9114 36.0885 27.7752 36.0885 24.3812V15.6188C36.0885 12.2248 34.2778 9.08857 31.3385 7.39156L23.75 3.01036Z" fill="#FFC5C8" stroke="#FFEDEE" stroke-width="3"/>
<g style="mix-blend-mode:overlay">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6667 18.1012V25H27.3333V18.1012L19.6575 23.1288L19 23.5595L18.3425 23.1288L10.6667 18.1012ZM26.1333 15H19H11.8667V16.0182L19 20.6905L26.1333 16.0182V15Z" fill="black"/>
<path d="M10.6667 15V16.6667L19 22.125L27.3333 16.6667V15H10.6667Z" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 885 B

View File

@@ -0,0 +1,4 @@
<svg width="64" height="70" viewBox="0 0 64 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38 4.1547C34.2872 2.01111 29.7128 2.01111 26 4.1547L8.28719 14.3812C4.57437 16.5248 2.28719 20.4863 2.28719 24.7735V45.2265C2.28719 49.5137 4.57437 53.4752 8.28719 55.6188L26 65.8453C29.7128 67.9889 34.2872 67.9889 38 65.8453L55.7128 55.6188C59.4256 53.4752 61.7128 49.5137 61.7128 45.2265V24.7735C61.7128 20.4863 59.4256 16.5248 55.7128 14.3812L38 4.1547Z" fill="white" stroke="black" stroke-width="4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 30.4345V44H47V30.4345L32.6575 39.8288L32 40.2595L31.3425 39.8288L17 30.4345ZM45.8 26H32H18.2V28.3515L32 37.3905L45.8 28.3515V26Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 716 B

View File

@@ -0,0 +1,9 @@
<svg width="64" height="70" viewBox="0 0 64 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38 4.1547C34.2872 2.01111 29.7128 2.01111 26 4.1547L8.28719 14.3812C4.57437 16.5248 2.28719 20.4863 2.28719 24.7735V45.2265C2.28719 49.5137 4.57437 53.4752 8.28719 55.6188L26 65.8453C29.7128 67.9889 34.2872 67.9889 38 65.8453L55.7128 55.6188C59.4256 53.4752 61.7128 49.5137 61.7128 45.2265V24.7735C61.7128 20.4863 59.4256 16.5248 55.7128 14.3812L38 4.1547Z" fill="#EF9699" stroke="#FFE1E2" stroke-width="4"/>
<g style="mix-blend-mode:overlay">
<path d="M19.715 43.52C18.005 41.105 17 38.18 17 35C17 32.645 17.555 30.41 18.545 28.43" stroke="black" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M32.36 35H47C47 38.03 46.175 40.865 44.705 43.205" stroke="black" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.57 47.3C26.06 48.995 29.105 50 32.375 50C35.705 50 38.675 48.965 41.045 47.21" stroke="black" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.935 23.975C24.68 21.515 28.325 20 32.36 20C35.54 20 38.51 20.945 40.955 22.55" stroke="black" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1,7 @@
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 4.1547C26.2872 2.01111 21.7128 2.01111 18 4.1547L8.94744 9.3812C5.23463 11.5248 2.94744 15.4863 2.94744 19.7735V30.2265C2.94744 34.5137 5.23463 38.4752 8.94744 40.6188L18 45.8453C21.7128 47.9889 26.2872 47.9889 30 45.8453L39.0526 40.6188C42.7654 38.4752 45.0526 34.5137 45.0526 30.2265V19.7735C45.0526 15.4863 42.7654 11.5248 39.0526 9.3812L30 4.1547Z" fill="#F9B8D6" stroke="#FBD3E6" stroke-width="4"/>
<g style="mix-blend-mode:overlay">
<path d="M38.9548 26.215C38.2798 34.48 31.0498 40.615 22.7848 39.955C14.5348 39.28 8.3848 32.05 9.0448 23.785C9.7198 15.535 16.9498 9.38501 25.2148 10.045C33.4648 10.72 39.6148 17.965 38.9548 26.215Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9998 18.3849C15.3312 18.3849 15.5998 18.6536 15.5998 18.9849V18.9999C15.5998 19.3313 15.3312 19.5999 14.9998 19.5999C14.6685 19.5999 14.3998 19.3313 14.3998 18.9999V18.9849C14.3998 18.6536 14.6685 18.3849 14.9998 18.3849ZM19.3637 25.4263C19.4316 24.3068 19.8342 23.3581 20.3942 22.7231C20.9526 22.09 21.6422 21.7888 22.3318 21.8617L22.3323 21.8617C23.036 21.9355 23.7003 22.3896 24.1875 23.1548C24.6735 23.9181 24.9538 24.9535 24.8859 26.0737C24.8181 27.1932 24.4155 28.1419 23.8555 28.7769C23.2971 29.41 22.6075 29.7112 21.9179 29.6383L21.9174 29.6383C21.2137 29.5645 20.5494 29.1104 20.0622 28.3453C19.5761 27.5819 19.2958 26.5466 19.3637 25.4263ZM19.4942 21.9294C20.252 21.0701 21.3024 20.5463 22.4577 20.6683C23.6138 20.7896 24.5695 21.5205 25.1997 22.5103C25.8312 23.5019 26.1659 24.7916 26.0837 26.1463C26.0016 27.5018 25.5117 28.7131 24.7555 29.5706C23.9977 30.4299 22.9475 30.9537 21.7923 30.8317C20.636 30.7105 19.6803 29.9796 19.05 28.9898C18.4185 27.9981 18.0838 26.7085 18.1659 25.3537C18.2481 23.9982 18.738 22.7869 19.4942 21.9294ZM15.5998 23.5C15.5998 23.1686 15.3312 22.9 14.9998 22.9C14.6685 22.9 14.3998 23.1686 14.3998 23.5V29.5C14.3998 29.8313 14.6685 30.1 14.9998 30.1C15.3312 30.1 15.5998 29.8313 15.5998 29.5V23.5ZM35.2229 22.8702C34.5268 21.5799 33.0147 20.4659 31.3663 20.6696L31.3654 20.6697C30.127 20.8245 28.7141 21.6793 28.4215 23.1424L28.4211 23.1442C28.2925 23.7983 28.489 24.3562 28.81 24.7917C29.1187 25.2105 29.5465 25.5251 29.9299 25.7538C30.3941 26.0368 30.9646 26.2308 31.4578 26.3986L31.4579 26.3986C31.6094 26.4501 31.7537 26.4992 31.8853 26.5476C32.5049 26.7754 32.9532 27.013 33.2312 27.4032L33.2329 27.4056C33.5746 27.8802 33.5102 28.4371 33.0456 28.8908L33.0455 28.8908L33.0383 28.8981C31.949 29.9994 30.1312 29.8312 29.1643 28.6164C28.9579 28.3571 28.5805 28.3142 28.3212 28.5206C28.0619 28.727 28.019 29.1044 28.2254 29.3637C29.5975 31.0877 32.2469 31.4003 33.8879 29.7456C34.7099 28.9397 34.9437 27.7293 34.2077 26.7057C33.7056 26.0017 32.9544 25.6621 32.2994 25.4213C32.1008 25.3483 31.9141 25.2846 31.7379 25.2245L31.7379 25.2245L31.7379 25.2245C31.2806 25.0685 30.894 24.9366 30.5527 24.7281L30.5527 24.7281L30.5469 24.7246C30.2261 24.5335 29.9502 24.3161 29.7759 24.0797C29.6134 23.8592 29.5474 23.6374 29.5984 23.3768C29.7562 22.5904 30.5928 21.9758 31.5139 21.8605C32.5353 21.7345 33.6329 22.4503 34.1668 23.4399C34.3241 23.7316 34.6881 23.8404 34.9797 23.6831C35.2714 23.5258 35.3802 23.1618 35.2229 22.8702Z" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@@ -0,0 +1,7 @@
<svg width="38" height="40" viewBox="0 0 38 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.75 3.01036C20.8107 1.31335 17.1893 1.31335 14.25 3.01036L6.66154 7.39156C3.72223 9.08857 1.91154 12.2248 1.91154 15.6188V24.3812C1.91154 27.7752 3.72223 30.9114 6.66154 32.6084L14.25 36.9896C17.1893 38.6867 20.8107 38.6866 23.75 36.9896L31.3385 32.6084C34.2778 30.9114 36.0885 27.7752 36.0885 24.3812V15.6188C36.0885 12.2248 34.2778 9.08857 31.3385 7.39156L23.75 3.01036Z" fill="#FFC5C8" stroke="#FFEDEE" stroke-width="3"/>
<g style="mix-blend-mode:overlay">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6 16.6667C14.6 14.2397 16.573 12.2667 19 12.2667C21.427 12.2667 23.4 14.2397 23.4 16.6667H14.6ZM13.4 16.6667C13.4 13.577 15.9103 11.0667 19 11.0667C22.0897 11.0667 24.6 13.577 24.6 16.6667L24.8333 16.6667C25.2917 16.6667 25.6667 17.0417 25.6667 17.5V27.5C25.6667 27.9583 25.2917 28.3333 24.8333 28.3333H13.1667C12.7083 28.3333 12.3333 27.9583 12.3333 27.5V17.5C12.3333 17.0417 12.7083 16.6667 13.1667 16.6667L13.4 16.6667Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6 19.1667V18.5667H18.4V19.1667V21.0515L17.0659 19.7174L16.6416 19.2931L15.7931 20.1416L16.2174 20.5659L17.5515 21.9H15.6667H15.0667V23.1H15.6667H17.5514L16.2174 24.434L15.7931 24.8583L16.6416 25.7068L17.0659 25.2825L18.4 23.9484V25.8333V26.4333H19.6V25.8333V23.9485L20.934 25.2825L21.3583 25.7068L22.2068 24.8583L21.7825 24.434L20.4485 23.1H22.3333H22.9333V21.9H22.3333H20.4484L21.7825 20.5659L22.2068 20.1416L21.3583 19.2931L20.934 19.7174L19.6 21.0514V19.1667Z" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 688 B