║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
title: Other animated distributions
description: Other animated distributions that are not part of Animate UI.
Animate UI is not the only distribution of animated components.
Our mission is to help you build animated UIs quickly and effortlessly. That’s why we also want to highlight other complementary distributions that can help you animate your interfaces with the same simplicity and flexibility.
React Distributions
<Cards>
<Card
icon={
<svg
width="256"
height="256"
viewBox="0 0 256 256"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="256"
height="256"
rx="128"
fill="url(#paint0_linear_601_4643)"
/>
<rect
width="256"
height="256"
rx="128"
fill="url(#paint1_linear_601_4643)"
/>
<path
d="M124.157 193.675C123.939 193.783 123.722 193.837 123.505 193.837C123.287 193.837 122.852 193.837 122.2 193.837C120.678 193.837 118.884 193.567 116.818 193.025C114.862 192.591 112.905 191.995 110.948 191.236C109.099 190.586 107.469 189.828 106.055 188.961C104.751 188.094 103.935 187.335 103.609 186.685C103.501 185.167 103.446 183.596 103.446 181.97C103.446 180.345 103.446 178.773 103.446 177.256C103.446 165.118 104.316 152.438 106.055 139.217C107.904 125.995 110.893 111.69 115.025 96.3005C115.459 94.7833 115.894 92.8867 116.329 90.6108C116.873 88.2266 117.416 85.6798 117.96 82.9704C115.351 85.0296 112.252 88.335 108.665 92.8867C105.077 97.3301 101.272 102.64 97.2492 108.818C93.3354 114.887 89.3672 121.606 85.3446 128.975C81.4308 136.236 77.8431 143.66 74.5815 151.246C71.32 158.724 68.4933 166.148 66.1015 173.517C63.8185 180.887 62.4051 187.714 61.8615 194C56.6431 192.483 53.001 190.966 50.9354 189.448C48.9785 187.931 48 186.089 48 183.921C48 181.97 48.5979 179.207 49.7938 175.631C50.9897 172.054 52.6749 167.828 54.8492 162.951C57.0236 158.074 59.6872 152.655 62.84 146.695C65.9928 140.626 69.4718 134.123 73.2769 127.187C77.6256 119.276 81.8656 111.852 85.9969 104.916C90.2369 97.9803 94.3682 91.6946 98.3908 86.0591C102.413 80.4236 106.327 75.5468 110.132 71.4286C114.046 67.3104 117.906 64.1675 121.711 62C123.233 62 125.244 62.3793 127.745 63.1379C130.354 63.8966 132.854 64.8177 135.246 65.9015C137.747 66.9852 139.921 68.1232 141.769 69.3153C143.726 70.399 144.813 71.3202 145.031 72.0788C143.509 75.1133 141.715 79.665 139.649 85.734C137.584 91.803 135.464 98.6847 133.289 106.379C131.224 114.074 129.212 122.256 127.255 130.926C125.407 139.488 123.939 147.724 122.852 155.635C125.353 149.675 128.234 143.498 131.495 137.103C134.866 130.601 138.399 124.207 142.095 117.921C145.792 111.527 149.543 105.35 153.348 99.3892C157.262 93.4286 161.067 88.0099 164.763 83.133C168.459 78.1478 171.884 73.8128 175.037 70.1281C178.298 66.4434 181.179 63.734 183.68 62C185.202 62 187.213 62.3793 189.714 63.1379C192.323 63.8966 194.824 64.8177 197.215 65.9015C199.716 66.9852 201.89 68.1232 203.738 69.3153C205.695 70.399 206.783 71.3202 207 72.0788C203.521 78.2562 200.477 85.7882 197.868 94.6749C195.258 103.562 193.03 112.882 191.182 122.635C189.442 132.389 188.083 142.089 187.105 151.734C186.235 161.271 185.8 169.833 185.8 177.419C185.8 179.911 185.8 182.512 185.8 185.222C185.8 187.931 185.909 190.749 186.126 193.675C184.604 193.675 182.756 193.458 180.582 193.025C178.516 192.7 176.45 192.212 174.385 191.562C172.428 190.911 170.634 190.153 169.003 189.286C167.372 188.527 166.231 187.66 165.578 186.685C165.47 185.167 165.415 183.596 165.415 181.97C165.415 180.345 165.415 178.773 165.415 177.256C165.415 165.118 166.285 152.438 168.025 139.217C169.873 125.995 172.863 111.69 176.994 96.3005C177.429 94.7833 177.918 92.7241 178.462 90.1232C179.005 87.5222 179.549 84.8128 180.092 81.9951C177.048 83.5123 173.569 86.4384 169.655 90.7734C165.85 95 161.936 100.202 157.914 106.379C154 112.448 150.086 119.222 146.172 126.7C142.367 134.177 138.888 141.818 135.735 149.621C132.691 157.315 130.082 165.01 127.908 172.704C125.842 180.291 124.592 187.281 124.157 193.675Z"
fill="white"
/>
<defs>
<linearGradient
id="paint0_linear_601_4643"
x1="128"
y1="0"
x2="128"
y2="256"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EF786F" />
<stop offset="1" stopColor="#D8595E" />
</linearGradient>
<linearGradient
id="paint1_linear_601_4643"
x1="78"
y1="3.7012e-06"
x2="236"
y2="256"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#9E7AFF" />
<stop offset="0.333333" stopColor="#FE8BBB" />
<stop offset="0.666667" stopColor="#FFBD7A" />
<stop offset="1" stopColor="#F8EAC3" />
</linearGradient>
</defs>
</svg>
}
href="https://magicui.design"
title="Magic UI"
/>
<Card
icon={
<svg
width="23"
height="23"
viewBox="0 0 25 23"
className="fill-black dark:fill-white"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M15.6317 0.571987C16.3759 0.228574 17.2363 0.0550841 18.033 0.38644L18.1922 0.459682L18.1942 0.460659L18.41 0.587612C18.8912 0.905222 19.2097 1.37902 19.407 1.8923C19.602 2.39947 19.6967 2.98342 19.7195 3.60226L19.7244 3.86886L19.7293 4.82101L17.825 4.83078L17.8201 3.87863L17.8045 3.47042C17.7767 3.09113 17.7136 2.79437 17.6297 2.57589C17.5217 2.29489 17.4024 2.19635 17.3289 2.15792L17.284 2.13937C17.1618 2.09871 16.9051 2.08256 16.4305 2.30148C15.8996 2.5465 15.2436 3.02482 14.5086 3.74874C13.7215 4.524 12.8888 5.53694 12.0692 6.73507C12.2359 6.73273 12.4038 6.73019 12.5721 6.73019C15.8011 6.73022 18.765 7.16566 20.9539 7.89523C22.0431 8.25833 22.9938 8.71183 23.6912 9.26144C24.3778 9.80264 24.9519 10.5493 24.952 11.4919C24.9519 12.3043 24.5214 12.9748 23.9715 13.4831C23.4218 13.9912 22.6749 14.416 21.824 14.7673L20.9432 15.1306L20.2166 13.3698L21.0975 13.0066C21.833 12.7029 22.3554 12.3832 22.6785 12.0847C23.0011 11.7865 23.0476 11.5861 23.0477 11.4919C23.0476 11.3827 22.9814 11.1272 22.5125 10.7575C22.0535 10.3958 21.3298 10.028 20.3514 9.70187C18.4042 9.05287 15.6534 8.6355 12.5721 8.63546C11.9839 8.63546 11.4073 8.65026 10.8465 8.67941C10.5662 9.16529 10.292 9.6716 10.0252 10.195C9.8036 10.6298 9.59539 11.0625 9.40021 11.49C9.59576 11.9183 9.80411 12.3521 10.0262 12.7878H10.0272L10.2918 13.2976C11.6276 15.814 13.1379 17.8859 14.5086 19.236C15.2432 19.9595 15.8989 20.4376 16.4295 20.6823C16.9715 20.9322 17.23 20.8755 17.3279 20.8259L17.4061 20.7712C17.4946 20.6921 17.6094 20.5285 17.699 20.1902C17.8183 19.7396 17.8576 19.0916 17.7781 18.2556C17.6198 16.5909 17.0111 14.39 15.9705 12.0017L16.8436 11.6218L17.7166 11.2409C18.809 13.7484 19.4914 16.1499 19.6746 18.0749C19.7658 19.0336 19.7391 19.9287 19.5408 20.6775C19.343 21.4244 18.9388 22.1417 18.1932 22.5222L18.1922 22.5232C17.3525 22.9505 16.4266 22.7778 15.6326 22.4118C14.8262 22.04 13.9897 21.3992 13.1717 20.5935C11.5669 19.0128 9.8785 16.6456 8.43536 13.8562C7.94269 15.2332 7.60957 16.5119 7.44415 17.611C7.29073 18.6308 7.29006 19.4422 7.40411 20.0153C7.52086 20.6015 7.71887 20.7763 7.81622 20.8259H7.8172L7.88947 20.8523C8.09827 20.9026 8.58562 20.8602 9.46173 20.239L10.2381 19.6882L11.3397 21.2419L10.5633 21.7927L10.3582 21.9323C9.31984 22.6214 8.06557 23.0899 6.95197 22.5222V22.5232C6.11192 22.0955 5.70676 21.2449 5.53595 20.3874C5.36259 19.5163 5.38948 18.4625 5.56036 17.3269C5.81724 15.6203 6.41817 13.6025 7.31818 11.49C6.99301 10.7266 6.7076 9.97508 6.46271 9.24679C5.85761 9.38078 5.298 9.53349 4.79279 9.70187C3.81426 10.028 3.09071 10.3958 2.63165 10.7575C2.16243 11.1274 2.09658 11.3827 2.0965 11.4919C2.09671 11.6513 2.25906 12.068 3.17462 12.5876L3.36798 12.6921L4.21271 13.1335L3.3299 14.822L2.48615 14.3806L2.2674 14.2614C1.17979 13.6487 0.192367 12.742 0.1922 11.4919C0.192288 10.5492 0.766185 9.80266 1.45294 9.26144C2.15046 8.7118 3.10094 8.25834 4.19025 7.89523C4.72343 7.71753 5.30301 7.55645 5.92072 7.41574C5.76557 6.80139 5.64509 6.21178 5.56134 5.65597C5.39035 4.52081 5.36283 3.46829 5.53595 2.59738C5.70654 1.7396 6.11162 0.888515 6.95197 0.460659V0.461635C7.83252 0.0128116 8.80234 0.2186 9.65021 0.63937L10.0057 0.831752L10.8279 1.31222L9.86603 2.95675L9.04376 2.47628L8.78009 2.33371C8.20699 2.05202 7.91997 2.1051 7.81622 2.15792V2.1589C7.71887 2.20847 7.52073 2.38226 7.40411 2.96847C7.29019 3.54153 7.29149 4.35303 7.44513 5.37277C7.52452 5.89955 7.64219 6.46785 7.79767 7.06808C8.41596 6.97652 9.06014 6.90151 9.72443 6.8464C10.8365 5.04912 12.0257 3.5201 13.1717 2.39132C13.9899 1.58545 14.8252 0.944189 15.6317 0.571987ZM17.7166 11.2409L15.9705 12.0017L15.5906 11.1286L17.3367 10.3679L17.7166 11.2409ZM8.4422 7.94406C7.87898 7.94428 7.42287 8.40036 7.42267 8.96359C7.42267 9.52698 7.87886 9.98388 8.4422 9.9841C9.00573 9.9841 9.46271 9.52712 9.46271 8.96359C9.46251 8.40023 9.00561 7.94406 8.4422 7.94406Z"></path>
</svg>
}
href="https://reactbits.dev"
title="React Bits"
/>
<Card
icon={
<div
className="relative z-10 grid size-[40px] place-content-center border-b border-neutral-950 bg-indigo-600 text-white"
style={{
clipPath:
'polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% 100%, calc(100% - 12px) 100%, 12px 100%, 0 100%, 0 0)',
}}
>
<svg className="!size-[30px]" viewBox="0 0 90 90">
<path
d="M49.5 30.5C65.7924 30.5 79 43.7076 79 60H49.5V30.5Z"
fill="white"
></path>
<path
d="M20 60C20 43.7076 33.2076 30.5 49.5 30.5L49.5 60L20 60Z"
fill="white"
></path>
<path
d="M79 89.5C62.7076 89.5 49.5 76.2924 49.5 60L79 60L79 89.5Z"
fill="white"
></path>
<g filter="url(#filter0_d_328_2)">
<rect
x="20"
y="30.5"
width="29.5"
height="29.5"
fill="white"
></rect>
</g>
<path
d="M20 60H49.5C49.5 76.2924 36.2924 89.5 20 89.5V60Z"
fill="white"
></path>
<path
d="M20 15.75C20 7.60379 26.6038 1 34.75 1C42.8962 1 49.5 7.6038 49.5 15.75V30.5H20V15.75Z"
fill="white"
></path>
<defs>
<filter
id="filter0_d_328_2"
x="0"
y="0.5"
width="89.5"
height="89.5"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
></feColorMatrix>
<feOffset dx="10"></feOffset>
<feGaussianBlur stdDeviation="15"></feGaussianBlur>
<feComposite in2="hardAlpha" operator="out"></feComposite>
<feColorMatrix
type="matrix"
values="0 0 0 0 0.879379 0 0 0 0 0.879379 0 0 0 0 0.879379 0 0 0 1 0"
></feColorMatrix>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_328_2"
></feBlend>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_328_2"
result="shape"
></feBlend>
</filter>
</defs>
</svg>
</div>
}
href="https://www.hover.dev/"
title="Hover"
/>
<Card
icon={
<div className="size-[40px] rounded-[7px] p-1.5 flex items-center justify-center bg-[#83e6f7]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1260 454">
<path
d="M475.753 0L226.8 453.6L0 453.6L194.392 99.4116C224.526 44.5081 299.724 0 362.353 0L475.753 0Z"
stroke="none"
></path>
<path
d="M1031.93 113.4C1031.93 50.7709 1082.7 0 1145.33 0C1207.96 0 1258.73 50.7709 1258.73 113.4C1258.73 176.029 1207.96 226.8 1145.33 226.8C1082.7 226.8 1031.93 176.029 1031.93 113.4Z"
stroke="none"
></path>
<path
d="M518.278 0L745.078 0L496.125 453.6L269.325 453.6L518.278 0Z"
stroke="none"
></path>
<path
d="M786.147 0L1012.95 0L818.555 354.188C788.422 409.092 713.223 453.6 650.594 453.6L537.194 453.6L786.147 0Z"
stroke="none"
></path>
</svg>
</div>
}
title="Motion Examples"
href="https://examples.motion.dev/react"
/>
<Card
icon={<img width={40} height={40} src="https://ui.aceternity.com/logo.png" alt="Aceternity UI" />}
href="https://ui.aceternity.com"
title="Aceternity UI"
/>
<Card
icon={<img width={40} height={40} src="https://ui.paceui.com/images/logo.png" alt="Pace UI" />}
href="https://ui.paceui.com/"
title="Pace UI"
/>
</Cards>
Vue Distributions
<Cards>
<Card
icon={
<svg
width="30"
height="30"
viewBox="0 0 47 41"
className="fill-black dark:fill-white"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0.345215 0.450195H15.6363C15.6363 0.450195 22.0583 12.3486 26.6885 19.6614C26.8836 19.9694 26.9797 20.151 27.1894 20.4493C27.3852 20.7278 27.4954 20.8853 27.7214 21.1399C27.9339 21.3795 27.8963 21.356 28.1397 21.6249C28.2726 21.7719 28.3875 21.8829 28.6738 22.068C28.933 22.2355 29.377 22.3481 29.7138 22.2345C29.9746 22.1465 30.0451 22.1136 30.2668 21.9894C31.043 21.5543 31.8402 19.9698 31.8402 19.9698L40.7527 3.71523H32.9372V0.450859L46.3206 0.450195L35.594 19.0675C35.594 19.0675 34.5027 20.8176 33.7209 22.1763C33.5935 22.3977 33.0493 23.1986 32.8374 23.4686C32.4369 23.9791 32.2132 24.2841 31.8402 24.6523C31.4828 25.005 31.1302 25.1777 30.8799 25.2783C30.4928 25.4337 30.0788 25.5121 29.663 25.546C29.3087 25.5749 29.0702 25.5934 28.7179 25.546C28.2786 25.4868 28.2472 25.4717 27.7214 25.2783C27.5003 25.197 27.131 24.9776 26.783 24.7266C26.3964 24.4478 26.1328 24.1992 25.6981 23.7395C25.3155 23.3347 25.1467 23.0947 24.8373 22.6316C24.5125 22.1455 24.2598 21.8766 23.953 21.379C19.7839 14.6168 13.8639 3.71523 13.8639 3.71523H5.99112L23.3635 33.9098L26.6885 28.1777C26.6885 28.1777 27.1444 28.7994 28.7438 28.7475C30.2137 28.6998 30.5672 28.1777 30.5672 28.1777L23.3635 40.437L3.53103 6.05657L2.19899 3.71523L0.345215 0.450195Z"></path>
</svg>
}
href="https://vue-bits.dev"
title="Vue Bits"
/>
<Card
icon={
<div className="size-[40px] rounded-full p-2 flex items-center justify-center bg-black">
<svg
xmlns="http://www.w3.org/2000/svg"
width="150"
height="150"
viewBox="0 0 150 150"
fill="none"
>
<g clipPath="url(#clip0_13_102)">
<path
d="M15.9288 21.2779C14.8902 17.4217 18.4217 13.8902 22.2779 14.9288L98.7834 35.5349C102.631 36.5712 103.917 41.382 101.099 44.1996L45.1996 100.099C42.382 102.917 37.5712 101.631 36.5349 97.7834L15.9288 21.2779Z"
fill="url(#paint0_radial_13_102)"
/>
<path
d="M15.9288 21.2779C14.8902 17.4217 18.4217 13.8902 22.2779 14.9288L98.7834 35.5349C102.631 36.5712 103.917 41.382 101.099 44.1996L45.1996 100.099C42.382 102.917 37.5712 101.631 36.5349 97.7834L15.9288 21.2779Z"
fill="url(#paint1_radial_13_102)"
fillOpacity="0.5"
/>
<path
d="M16.429 21.1432C15.4943 17.6726 18.6726 14.4943 22.1432 15.429L98.6487 36.0351C102.111 36.9677 103.269 41.2975 100.733 43.8333L44.8333 99.7328C42.2975 102.269 37.9677 101.111 37.0351 97.6487L16.429 21.1432Z"
fill="url(#paint2_radial_13_102)"
fillOpacity="0.5"
stroke="url(#paint3_linear_13_102)"
strokeWidth="1.03602"
strokeLinejoin="round"
/>
<path
d="M134.663 129.313C135.701 133.17 132.17 136.701 128.314 135.663L51.808 115.057C47.9604 114.02 46.6747 109.209 49.4923 106.392L105.392 50.4923C108.209 47.6747 113.02 48.9604 114.057 52.808L134.663 129.313Z"
fill="url(#paint4_radial_13_102)"
/>
<path
d="M134.663 129.313C135.701 133.17 132.17 136.701 128.314 135.663L51.808 115.057C47.9604 114.02 46.6747 109.209 49.4923 106.392L105.392 50.4923C108.209 47.6747 113.02 48.9604 114.057 52.808L134.663 129.313Z"
fill="url(#paint5_radial_13_102)"
fillOpacity="0.5"
/>
<path
d="M134.162 129.448C135.097 132.919 131.919 136.097 128.448 135.162L51.9427 114.556C48.4799 113.624 47.3228 109.294 49.8586 106.758L105.758 50.8586C108.294 48.3228 112.624 49.4799 113.556 52.9427L134.162 129.448Z"
fill="url(#paint6_radial_13_102)"
fillOpacity="0.5"
stroke="url(#paint7_linear_13_102)"
strokeWidth="1.03602"
strokeLinejoin="round"
/>
</g>
<defs>
<radialGradient
id="paint0_radial_13_102"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(41.752 99.2994) rotate(-77.1419) scale(69.1305 68.9235)"
>
<stop stopColor="#FFF" stopOpacity="0" />
<stop offset="1" stopColor="#FFF" stopOpacity="0.46" />
</radialGradient>
<radialGradient
id="paint1_radial_13_102"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(52.0081 50.9494) rotate(-135) scale(102.566 102.259)"
>
<stop stopColor="#FFF" stopOpacity="0" />
<stop offset="1" stopColor="#FFF" />
</radialGradient>
<radialGradient
id="paint2_radial_13_102"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(43.9498 42.891) rotate(45) scale(69.4133 69.2054)"
>
<stop stopColor="#FFF" stopOpacity="0" />
<stop offset="1" stopColor="#FFF" />
</radialGradient>
<linearGradient
id="paint3_linear_13_102"
x1="73.9854"
y1="70.7289"
x2="15.013"
y2="11.7565"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFF" stopOpacity="0.6" />
<stop offset="0.494792" stopColor="#FFF" stopOpacity="0" />
<stop offset="1" stopColor="#FFF" stopOpacity="0.38" />
</linearGradient>
<radialGradient
id="paint4_radial_13_102"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(108.839 51.292) rotate(102.858) scale(69.1305 68.9235)"
>
<stop offset="0.09" stopColor="#FFF" />
<stop offset="1" stopColor="#FFF" stopOpacity="0" />
</radialGradient>
<radialGradient
id="paint5_radial_13_102"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(98.5833 99.642) rotate(45) scale(102.566 102.259)"
>
<stop stopColor="#FFF" stopOpacity="0" />
<stop offset="0.0001" stopColor="#FFF" />
</radialGradient>
<radialGradient
id="paint6_radial_13_102"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(106.642 107.7) rotate(-135) scale(69.4133 69.2054)"
>
<stop stopColor="#FFF" stopOpacity="0" />
<stop offset="1" stopColor="#FFF" />
</radialGradient>
<linearGradient
id="paint7_linear_13_102"
x1="76.606"
y1="79.8625"
x2="135.578"
y2="138.835"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFF" stopOpacity="0.6" />
<stop offset="0.494792" stopColor="#FFF" stopOpacity="0" />
<stop offset="1" stopColor="#FFF" stopOpacity="0.38" />
</linearGradient>
<clipPath id="clip0_13_102">
<rect width="150" height="150" fill="#FFF" />
</clipPath>
</defs>
</svg>
</div>
}
href="https://inspira-ui.com/"
title="Inspira UI"
/>
</Cards>
Add your distribution
If you have a distribution of animated components, please <a href="https://github.com/imskyleen/animate-ui/blob/main/apps/www/content/docs/other-animated-distributions.mdx">create a pull request to add it to this page.</a>
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║