Last active
October 21, 2024 11:39
-
-
Save monirehbastami/56f1d2b6b53f4178b3f772ee36c6516b to your computer and use it in GitHub Desktop.
Simple CSS svg code Arba'in
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- Hossin word designer: Dr.ArianHajian --> | |
| <title>Arba'in</title> | |
| <style> | |
| .container{ | |
| background: #030321; | |
| height: 100vh; | |
| text-align: center; | |
| } | |
| @keyframes draw { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fill { | |
| to { | |
| fill-opacity: 1; | |
| } | |
| } | |
| .squiggle{ | |
| stroke-dasharray: 450; | |
| stroke-dashoffset: 450; | |
| stroke: #b1010d; | |
| fill: #b1010d; | |
| animation: draw 2s linear forwards, fill 1s forwards 2s; | |
| fill-opacity: 0; | |
| } | |
| .squiggle2{ | |
| opacity: 0; | |
| stroke: #b1010d; | |
| fill: #b1010d; | |
| animation: fadeIn 2s linear forwards, fill 1s forwards 2s; | |
| fill-opacity: 0; | |
| } | |
| .path1{ | |
| animation-delay: 0s,2s; | |
| } | |
| .path2{ | |
| animation-delay: 1.5s; | |
| } | |
| .path3{ | |
| animation-delay: 2s; | |
| } | |
| .path4{ | |
| animation-delay: 3s; | |
| } | |
| .path5{ | |
| animation-delay: 4s; | |
| } | |
| .path6{ | |
| animation-delay: 5s; | |
| } | |
| .path7{ | |
| animation-delay: 6s; | |
| } | |
| .path8{ | |
| animation-delay: 7s; | |
| } | |
| .path9{ | |
| animation-delay: 8s; | |
| } | |
| .path10{ | |
| animation-delay:8s; | |
| } | |
| .text-style { | |
| fill: none; | |
| stroke: white; | |
| stroke-dasharray: 8% 29%; | |
| stroke-width: 5px; | |
| stroke-dashoffset: 0%; | |
| animation: stroke-offset 5s infinite linear; | |
| } | |
| .text-style:nth-child(1){ | |
| stroke: #b1010d; | |
| animation-delay: -1; | |
| } | |
| .text-style:nth-child(2){ | |
| stroke: #4f0a10; | |
| animation-delay: -2s; | |
| } | |
| .text-style:nth-child(3){ | |
| stroke: #BD0034; | |
| animation-delay: -3s; | |
| } | |
| .text-style:nth-child(4){ | |
| stroke: #b1010d; | |
| animation-delay: -4s; | |
| } | |
| .text-style:nth-child(5){ | |
| stroke: #591a22; | |
| animation-delay: -5s; | |
| } | |
| @keyframes stroke-offset{ | |
| 100% {stroke-dashoffset: -35%;} | |
| } | |
| .arbaeen { | |
| display: block; | |
| font: 8em 'Montserrat'; | |
| width: 600px; | |
| height: 200px; | |
| margin: 0 auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="129" height="664"> | |
| <path class="squiggle path1" stroke="#7b0303" stroke-width="1"d="M0 0 C1.69268799 1.29852772 1.69268799 1.29852772 3 3 C3.28256135 5.91818301 3.36104193 8.59155909 3.296875 11.50854492 C3.28089264 12.87806321 3.28089264 12.87806321 3.2645874 14.27524853 C3.0224193 28.33410138 2.16141085 42.38124723 1.38456726 56.41863656 C1.15625495 60.56632065 0.93446179 64.7143538 0.71191406 68.86235046 C0.29142782 76.68174555 -0.13474011 84.50081968 -0.56306076 92.31978911 C-1.05122569 101.23642994 -1.53288736 110.15341857 -2.01406097 119.07043898 C-3.00224781 137.3806828 -3.99841245 155.69048456 -5 174 C-5.66 173.67 -6.32 173.34 -7 173 C-7.52815922 156.13324519 -8.04993458 139.26630588 -8.56460571 122.39913464 C-8.80384827 114.56311625 -9.04503311 106.72716735 -9.29101562 98.89135742 C-11.18148986 38.58752543 -11.18148986 38.58752543 -11.35247803 19.63408852 C-11.3672314 18.18750206 -11.38835602 16.74096328 -11.41656494 15.29457664 C-11.45124608 13.40147829 -11.45714617 11.50791416 -11.4609375 9.61450195 C-11.46915527 8.6095015 -11.47737305 7.60450104 -11.48583984 6.56904602 C-10.27365212 0.15918467 -5.84913459 -0.74443531 0 0 Z " fill="#7A170F" transform="translate(76,2)"/> | |
| <path class="squiggle2 path2" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1"d="M0 0 C0.66 0 1.32 0 2 0 C2.93295051 3.60421907 3.00533131 6.39874279 2 10 C-0.45434367 12.76984973 -2.98089976 15.07405324 -5.79345703 17.45703125 C-16.74329271 26.74311098 -23.82142787 38.77728928 -26 53 C-26.912607 72.89483268 -13.37698062 92.29811508 -0.57861328 106.58691406 C0.85674928 108.14845704 2.30102452 109.70108667 3.75 111.25 C16.12416462 124.54069028 23.76892787 141.62976601 24 160 C23.0814402 175.29231961 18.89937318 188.51174382 9.91796875 200.86328125 C1.28916024 213.05596837 -4.75809863 226.48373552 -11 240 C-12.38050978 235.85847065 -10.81400706 233.27051558 -9.1875 229.4375 C-8.87417725 228.69097168 -8.56085449 227.94444336 -8.23803711 227.17529297 C-3.53904413 216.28923587 2.02367984 205.62919878 9.3125 196.25 C13.7843672 190.36881708 15.95921489 184.04773157 18 177 C18.24621094 176.15824219 18.49242187 175.31648437 18.74609375 174.44921875 C22.70150793 158.21838125 19.46574034 143.21635747 11.22265625 128.97509766 C8.43887072 124.40487726 5.200843 120.49009323 1.46875 116.671875 C0 115 0 115 0 113 C-0.57363281 112.75121094 -1.14726563 112.50242187 -1.73828125 112.24609375 C-16.86443428 103.91234105 -32.01588028 80.39796963 -37 64 C-39.53071898 53.73041575 -39.5445803 44.53949234 -34.37109375 35.12109375 C-27.29683374 24.17715305 -17.93813339 15.63657537 -6.9375 8.75 C-3.2327581 6.40097887 -1.50864756 4.22421317 0 0 Z " fill="#7A170F" transform="translate(64,11)"/> | |
| <path class="squiggle path3" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1" d="M0 0 C3 0.125 3 0.125 4 1.125 C4.11978809 3.49100919 4.16525045 5.81662672 4.15625 8.18359375 C4.15365173 9.3053727 4.15365173 9.3053727 4.15100098 10.44981384 C4.05393912 21.05000127 3.23788988 31.61685607 2.5 42.1875 C2.35494719 44.32613656 2.21041265 46.46480835 2.06640625 48.60351562 C1.71689524 53.77776812 1.36042933 58.95149707 1 64.125 C0.34 64.125 -0.32 64.125 -1 64.125 C-1.43468435 57.88566111 -1.86155559 51.64584987 -2.28173828 45.40551758 C-2.42519128 43.29046835 -2.57063952 41.17555334 -2.71826172 39.06079102 C-3.43523815 28.77193539 -4.13235209 18.50130869 -4.15625 8.18359375 C-4.15894897 7.47380875 -4.16164795 6.76402374 -4.16442871 6.0327301 C-4.12195816 0.17174826 -4.12195816 0.17174826 0 0 Z " fill="#7A170F" transform="translate(70.5,177.5)"/> | |
| <path class="squiggle path4" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1"d="M0 0 C3 0.125 3 0.125 4 1.125 C4.11978809 3.49100919 4.16525045 5.81662672 4.15625 8.18359375 C4.15365173 9.3053727 4.15365173 9.3053727 4.15100098 10.44981384 C4.05393912 21.05000127 3.23788988 31.61685607 2.5 42.1875 C2.35494719 44.32613656 2.21041265 46.46480835 2.06640625 48.60351562 C1.71689524 53.77776812 1.36042933 58.95149707 1 64.125 C0.34 64.125 -0.32 64.125 -1 64.125 C-1.43468435 57.88566111 -1.86155559 51.64584987 -2.28173828 45.40551758 C-2.42519128 43.29046835 -2.57063952 41.17555334 -2.71826172 39.06079102 C-3.43523815 28.77193539 -4.13235209 18.50130869 -4.15625 8.18359375 C-4.15894897 7.47380875 -4.16164795 6.76402374 -4.16442871 6.0327301 C-4.12195816 0.17174826 -4.12195816 0.17174826 0 0 Z " fill="#7A170F" transform="translate(70.5,243.5)"/> | |
| <path class="squiggle path5" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1"d="M0 0 C3 0.125 3 0.125 4 1.125 C4.11978809 3.49100919 4.16525045 5.81662672 4.15625 8.18359375 C4.15365173 9.3053727 4.15365173 9.3053727 4.15100098 10.44981384 C4.05393912 21.05000127 3.23788988 31.61685607 2.5 42.1875 C2.35494719 44.32613656 2.21041265 46.46480835 2.06640625 48.60351562 C1.71689524 53.77776812 1.36042933 58.95149707 1 64.125 C0.34 64.125 -0.32 64.125 -1 64.125 C-1.43468435 57.88566111 -1.86155559 51.64584987 -2.28173828 45.40551758 C-2.42519128 43.29046835 -2.57063952 41.17555334 -2.71826172 39.06079102 C-3.43523815 28.77193539 -4.13235209 18.50130869 -4.15625 8.18359375 C-4.15894897 7.47380875 -4.16164795 6.76402374 -4.16442871 6.0327301 C-4.12195816 0.17174826 -4.12195816 0.17174826 0 0 Z " fill="#7A170F" transform="translate(70.5,310.5)"/> | |
| <path class="squiggle path6" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1"d="M0 0 C3.5 0.25 3.5 0.25 5.5 2.25 C5.75 5.75 5.75 5.75 5.5 9.25 C3.5 11.25 3.5 11.25 0 11.5 C-3.5 11.25 -3.5 11.25 -5.5 9.25 C-5.75 5.75 -5.75 5.75 -5.5 2.25 C-3.5 0.25 -3.5 0.25 0 0 Z " fill="#7A170F" transform="translate(70.5,380.75)"/> | |
| <path class="squiggle path7" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1"d="M0 0 C3.5 0.25 3.5 0.25 5.5 2.25 C5.75 5.75 5.75 5.75 5.5 9.25 C3.5 11.25 3.5 11.25 0 11.5 C-3.5 11.25 -3.5 11.25 -5.5 9.25 C-5.75 5.75 -5.75 5.75 -5.5 2.25 C-3.5 0.25 -3.5 0.25 0 0 Z " fill="#7A170F" transform="translate(70.5,393.75)"/> | |
| <path class="squiggle path8" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1"d="M0 0 C4.26649332 0.59880608 5.66777031 1.32606664 8.5625 4.5 C9.0106724 7.6704665 9.11225991 10.25226023 8.984375 13.41455078 C8.96469666 14.36578386 8.94501831 15.31701694 8.92474365 16.29707527 C8.83901596 19.70008208 8.70485301 23.09889603 8.5625 26.5 C8.51053467 27.81162865 8.45856934 29.12325729 8.4050293 30.47463226 C7.99090718 40.7338106 7.47527819 50.98741722 6.94706726 61.24125051 C6.71885454 65.69457897 6.49700139 70.14822463 6.27441406 74.60183716 C5.85382074 82.9984565 5.42767927 91.39478425 4.99943924 99.7910167 C4.51138314 109.36548957 4.0296721 118.94027857 3.54843903 128.51509643 C2.5600822 148.1770854 1.56393584 167.83867311 0.5625 187.5 C-0.0975 187.5 -0.7575 187.5 -1.4375 187.5 C-2.2265682 167.77435494 -3.00917392 148.04846312 -3.78440857 128.32226944 C-4.14463395 119.15987505 -4.50685183 109.9975681 -4.87402344 100.83544922 C-5.19462288 92.83532291 -5.51121619 84.835049 -5.82330227 76.83458591 C-5.98816896 72.61154237 -6.15483436 68.38858982 -6.32632446 64.16580963 C-6.75388742 53.61209631 -7.14182221 43.05829648 -7.4375 32.5 C-7.45752327 31.79991507 -7.47754654 31.09983013 -7.49817657 30.3785305 C-7.62683907 25.73922095 -7.70976308 21.10077 -7.76953125 16.45996094 C-7.79810715 15.29852695 -7.82668304 14.13709297 -7.85612488 12.94046402 C-7.86211197 11.88017864 -7.86809906 10.81989326 -7.87426758 9.72747803 C-7.88686111 8.80858669 -7.89945465 7.88969536 -7.91242981 6.94295883 C-7.01168312 2.30966982 -4.49453709 0.65375085 0 0 Z " fill="#7A170F" transform="translate(70.5,407.5)"/> | |
| <path class="squiggle2 path9" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1"d="M0 0 C4.97249985 0.72181449 6.35988265 2.43997282 9.3671875 6.296875 C15.15019565 14.98636912 15.75262893 25.15484691 13.875 35.25 C9.89679106 51.55707269 1.6617866 66.2460322 -6.48828125 80.77734375 C-17.6756085 100.96773911 -21.81815862 119.43019116 -19.125 142.5625 C-18.40957031 142.11519531 -17.69414062 141.66789063 -16.95703125 141.20703125 C-0.69741396 131.34188182 14.46489273 128.18970842 33.2956543 128.30175781 C35.43892572 128.31250715 37.58136264 128.30177771 39.72460938 128.2890625 C56.27928092 128.27084202 71.4143553 130.21958375 83.80859375 142.15625 C87.80551288 146.81050744 90.26237805 152.43628054 90.875 158.5625 C91.00455078 159.49255859 91.00455078 159.49255859 91.13671875 160.44140625 C91.81953585 168.92351198 87.82563171 175.76883066 82.7421875 182.3046875 C73.4779628 192.36386217 61.5484694 197.7878127 47.96875 198.7734375 C29.46535986 199.36884362 12.64483852 195.15506988 -1.125 182.5625 C-1.83527344 181.94503906 -2.54554687 181.32757812 -3.27734375 180.69140625 C-9.54315081 174.92190074 -17.77464191 165.22193915 -19.125 156.5625 C-19.785 156.5625 -20.445 156.5625 -21.125 156.5625 C-21.393125 157.366875 -21.66125 158.17125 -21.9375 159 C-22.563986 160.879458 -23.19771909 162.75728328 -23.890625 164.61328125 C-27.80086051 175.40476454 -27.81577406 183.89227768 -23.125 194.5625 C-20.774174 198.52290055 -18.07071538 202.02870115 -15.125 205.5625 C-14.49078125 206.37074219 -13.8565625 207.17898438 -13.203125 208.01171875 C-8.60736255 213.54266543 -3.4140518 217.78220422 2.3125 222.0625 C17.95520407 233.80216113 27.94748405 245.67766618 31.48828125 265.34375 C32.02094407 269.7772264 32.15215897 274.10742617 31.875 278.5625 C29.96601647 275.6990247 29.44830065 274.26041219 28.796875 270.9921875 C23.69215522 246.7179189 10.40379058 237.87931924 -9.05712891 224.03417969 C-13.44086884 220.91432322 -17.79465875 217.75612667 -22.125 214.5625 C-23.73375 213.4178125 -23.73375 213.4178125 -25.375 212.25 C-31.79625815 205.97467953 -38.03163662 196.51722415 -38.5234375 187.36328125 C-38.53634597 185.86722279 -38.52785517 184.37085482 -38.5 182.875 C-38.48984863 182.08480469 -38.47969727 181.29460937 -38.46923828 180.48046875 C-38.18321136 169.58927304 -35.72656531 160.38653742 -29.125 151.5625 C-27.6709375 150.3559375 -27.6709375 150.3559375 -26.1875 149.125 C-23.70263437 146.03774271 -23.93186651 145.3172101 -24.3125 141.5 C-24.4465625 140.53449219 -24.580625 139.56898438 -24.71875 138.57421875 C-27.79155209 115.79411863 -20.61892864 92.96608687 -9.46411133 73.45410156 C1.0024614 54.98387304 2.60365101 36.22008375 -1.125 15.5625 C-1.98223756 12.48310296 -3.02330814 9.56711416 -4.125 6.5625 C-4.375 3.5625 -4.375 3.5625 -4.125 1.5625 C-3.125 0.5625 -3.125 0.5625 0 0 Z M-16.125 149.5625 C-12.13403103 164.99424667 -0.72502472 179.93184806 12.9140625 188.03125 C18.07278492 190.69908534 23.36331707 192.7487964 28.875 194.5625 C29.64457031 194.82160156 30.41414063 195.08070313 31.20703125 195.34765625 C44.0372791 198.94202995 58.84093832 195.17003914 70.1875 188.8125 C78.34806299 183.53135517 84.67793031 177.05925807 87.453125 167.58984375 C89.01255773 160.09590312 87.65063889 154.14183113 83.875 147.5625 C77.46014477 137.94021715 66.74176503 134.16891966 55.875 131.5625 C30.76824302 126.99216819 2.90871347 131.79770076 -16.125 149.5625 Z " fill="#7A170F" transform="translate(39.125,385.4375)"/> | |
| <path class="squiggle2 path10" stroke="#7b0303" stroke-miterlimit="10" stroke-width="1"d="M0 0 C3.5 0.25 3.5 0.25 5.5 2.25 C5.75 5.75 5.75 5.75 5.5 9.25 C3.5 11.25 3.5 11.25 0 11.5 C-3.5 11.25 -3.5 11.25 -5.5 9.25 C-5.75 5.75 -5.75 5.75 -5.5 2.25 C-3.5 0.25 -3.5 0.25 0 0 Z " fill="#7A170F" transform="translate(30.5,370.75)"/> | |
| </svg> | |
| <svg class="arbaeen"> | |
| <symbol id="arbaeen-text"> | |
| <text text-anchor="middle" x="50%" y="80%">ARBA'IN</text> | |
| </symbol> | |
| <g> | |
| <use xlink:href="#arbaeen-text" class="text-style"></use> | |
| <use xlink:href="#arbaeen-text" class="text-style"></use> | |
| <use xlink:href="#arbaeen-text" class="text-style"></use> | |
| <use xlink:href="#arbaeen-text" class="text-style"></use> | |
| <use xlink:href="#arbaeen-text" class="text-style"></use> | |
| </g> | |
| </svg> | |
| </div> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2024-07-13_01-40-23.mp4