import React from 'react' ; export default function AnimatedIntro ( ) { React . useEffect ( ( ) => { let currCount = 0 ; const colors = [ '#312F31' ] ; const texts = document . querySelectorAll ( '#textClip text' ) ; const blobs = document . querySelectorAll ( '#background path' ) ; function colorBlobs ( accentColor ) { const currentColorSet = Array ( 2 ) . fill ( accentColor ) . concat ( colors ) ; blobs . forEach ( blob => { blob . style . fill = currentColorSet [ Math . floor ( Math . random ( ) * currentColorSet . length ) ] ; } ) ; } function nextIteration ( ) { const nextCount = currCount === texts . length - 1 ? 0 : currCount + 1 ; const prevText = texts [ currCount ] ; const nextText = texts [ nextCount ] ; colorBlobs ( nextText . getAttribute ( 'data-accent-color' ) ) ; prevText . style . display = 'none' ; nextText . style . display = 'inline' ; currCount = nextCount ; } blobs [ 0 ] . addEventListener ( 'animationiteration' , nextIteration ) ; texts . forEach ( ( t , i ) => { if ( i > 0 ) { t . style . display = 'none' ; } } ) ; colorBlobs ( texts [ 0 ] . getAttribute ( 'data-accent-color' ) ) ; return ( ) => blobs [ 0 ] . removeEventListener ( 'animationIteration' , nextIteration ) ; } , [ ] ) ; return ( < svg viewBox = "0 0 600 200" style = { { width : '100%' } } height = { 200 } > < title > Frontend Indonesia < /title> < style jsx global > { `
          .filled-heading {
            font-family: Inter, sans-serif;
            font-weight: 700;
            font-size: 5em;
            line-height: 0.9;
          }

          #background path {
            animation: pulse 4s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
            transform-origin: 50% 50%;
            transform-box: fill-box;
          }
          #textClip text {
            display: none;
          }
          #textClip text:nth-of-type(n + 1):nth-of-type(-n + 3) {
            display: inline;
          }

          @keyframes pulse {
            0%,
            100% {
              transform: scale(0) rotate(33deg);
            }
            35%,
            65% {
              transform: scale(1) rotate(0deg);
            }
          }
        ` } < /style> < clipPath id = "textClip" className = "filled-heading" > < text x = "50%" y = "50%" dominantBaseline = "middle" textAnchor = "middle" data - accent - color = "#e34f26" > HTML < /text> < text x = "50%" y = "50%" dominantBaseline = "middle" textAnchor = "middle" data - accent - color = "#1B73BA" > CSS < /text> < text x = "50%" y = "50%" dominantBaseline = "middle" textAnchor = "middle" data - accent - color = "#F0DA50" > JS < /text> < text x = "50%" y = "50%" dominantBaseline = "middle" textAnchor = "middle" data - accent - color = "#00d8ff" > React < /text> < text x = "50%" y = "50%" dominantBaseline = "middle" textAnchor = "middle" data - accent - color = "#42b883" > Vue < /text> < text x = "50%" y = "50%" dominantBaseline = "middle" textAnchor = "middle" data - accent - color = "#FF3E00" > Svelte < /text> < text x = "50%" y = "50%" dominantBaseline = "middle" textAnchor = "middle" data - accent - color = "#b52e31" > Angular < /text> < text x = "50%" y = "50%" dominantBaseline = "middle" textAnchor = "middle" data - accent - color = "#C0392B" > Frontend ID < /text> < /clipPath> < g id = "background" clipPath = "url(#textClip)" > < path d = "M64.2463 121.708C72.5343 129.266 82.5453 135.266 83.1013 141.713C83.6574 148.161 74.7584 155.056 66.7694 162.247C58.7282 169.488 51.5958 176.975 42.435 178.821C33.2742 180.668 22.0319 176.875 18.0592 169.744C14.1397 162.614 17.4357 152.097 17.9823 142.343C18.5832 132.64 16.4327 123.6 20.0543 116.031C23.729 108.462 33.2279 102.314 41.2318 103.723C49.2899 105.183 55.9061 114.2 64.2463 121.708Z" strokeWidth = ".25" / > < path d = "M110.735 23.53C117.459 26.358 121.61 33.7999 122.721 41.3907C123.774 48.9815 121.844 56.6219 116.933 62.0793C112.08 67.4871 104.303 70.712 95.3576 75.2763C86.4117 79.8407 76.238 85.8439 67.2336 84.9013C58.2293 83.9586 50.3358 76.1198 47.4124 67.7848C44.4889 59.4994 46.5353 50.6683 49.6342 43.0775C52.6746 35.4868 56.7091 29.0867 62.8484 26.1595C68.9292 23.2324 77.0565 23.8277 85.827 23.1827C94.5975 22.5378 103.953 20.7021 110.735 23.53Z" strokeWidth = ".25" / > < path d = "M341.735 133.53C348.459 136.358 352.61 143.8 353.721 151.391C354.774 158.981 352.844 166.622 347.933 172.079C343.08 177.487 335.303 180.712 326.358 185.276C317.412 189.841 307.238 195.844 298.234 194.901C289.229 193.959 281.336 186.12 278.412 177.785C275.489 169.499 277.535 160.668 280.634 153.078C283.675 145.487 287.709 139.087 293.848 136.16C299.929 133.232 308.057 133.828 316.827 133.183C325.597 132.538 334.953 130.702 341.735 133.53Z" strokeWidth = ".25" / > < path d = "M185.202 123.428C191.888 129.297 192.147 139.529 193.056 148.858C193.9 158.187 195.328 166.613 191.239 173.083C187.149 179.503 177.543 183.917 166.704 187.829C155.929 191.691 143.922 195.052 136.912 191.49C129.902 187.929 127.89 177.497 124.515 169.372C121.139 161.246 116.531 155.478 114.259 147.403C112.053 139.328 112.247 128.895 118.933 123.027C125.683 117.209 138.989 115.905 152.165 116.005C165.406 116.106 178.452 117.56 185.202 123.428Z" strokeWidth = ".25" / > < path d = "M573.202 123.428C579.888 129.297 580.147 139.529 581.056 148.858C581.9 158.187 583.328 166.613 579.239 173.083C575.149 179.503 565.543 183.917 554.704 187.829C543.929 191.691 531.922 195.052 524.912 191.49C517.902 187.929 515.89 177.497 512.515 169.372C509.139 161.246 504.531 155.478 502.259 147.403C500.053 139.328 500.247 128.895 506.933 123.027C513.683 117.209 526.989 115.905 540.165 116.005C553.406 116.106 566.452 117.56 573.202 123.428Z" strokeWidth = ".25" / > < path d = "M303.202 69.4284C309.888 75.2967 310.147 85.5285 311.056 94.8576C311.9 104.187 313.328 112.613 309.239 119.083C305.149 125.503 295.543 129.917 284.704 133.829C273.929 137.691 261.922 141.052 254.912 137.49C247.902 133.929 245.89 123.497 242.515 115.372C239.139 107.246 234.531 101.478 232.259 93.4031C230.053 85.3279 230.247 74.8954 236.933 69.0271C243.683 63.209 256.989 61.9049 270.165 62.0052C283.406 62.1056 296.452 63.5601 303.202 69.4284Z" strokeWidth = ".25" / > < path d = "M268.075 35.8531C274.184 39.0969 279.101 45.4348 282.518 53.6192C285.934 61.8036 287.902 71.7845 283.294 76.9247C278.739 82.0649 267.661 82.3643 258.395 84.1609C249.129 85.9575 241.675 89.2512 235.929 87.5045C230.235 85.708 226.197 78.871 220.555 71.7845C214.913 64.6981 207.665 57.412 207.044 49.5769C206.423 41.7419 212.428 33.3579 220.244 30.4135C228.061 27.4192 237.689 29.9145 246.127 31.212C254.616 32.5095 261.967 32.6093 268.075 35.8531Z" strokeWidth = ".25" / > < path d = "M449.075 39.8531C455.184 43.0969 460.101 49.4348 463.518 57.6192C466.934 65.8036 468.902 75.7845 464.294 80.9247C459.739 86.0649 448.661 86.3643 439.395 88.1609C430.129 89.9575 422.675 93.2512 416.929 91.5045C411.235 89.708 407.197 82.871 401.555 75.7845C395.913 68.6981 388.665 61.412 388.044 53.5769C387.423 45.7419 393.428 37.3579 401.244 34.4135C409.061 31.4192 418.689 33.9145 427.127 35.212C435.616 36.5095 442.967 36.6093 449.075 39.8531Z" strokeWidth = ".25" / > < path d = "M338.075 92.8531C344.184 96.0969 349.101 102.435 352.518 110.619C355.934 118.804 357.902 128.785 353.294 133.925C348.739 139.065 337.661 139.364 328.395 141.161C319.129 142.957 311.675 146.251 305.929 144.505C300.235 142.708 296.197 135.871 290.555 128.785C284.913 121.698 277.665 114.412 277.044 106.577C276.423 98.7419 282.428 90.3579 290.244 87.4135C298.061 84.4192 307.689 86.9145 316.127 88.212C324.616 89.5095 331.967 89.6093 338.075 92.8531Z" strokeWidth = ".25" / > < path d = "M229.584 36.4056C240.011 44.2002 248.678 53.5937 246.723 61.4383C244.703 69.2828 232.125 75.5785 221.699 80.4251C211.207 85.2718 202.996 88.6195 194.263 88.9692C185.531 89.319 176.408 86.6708 168.913 81.8242C161.484 76.9775 155.684 69.9824 153.729 61.4383C151.774 52.8942 153.599 42.8511 161.028 35.0565C168.522 27.2619 181.621 21.6658 194.263 22.0155C206.906 22.3653 219.157 28.611 229.584 36.4056Z" strokeWidth = ".25" / > < path d = "M427.584 73.4056C438.011 81.2002 446.678 90.5937 444.723 98.4383C442.703 106.283 430.125 112.578 419.699 117.425C409.207 122.272 400.996 125.619 392.263 125.969C383.531 126.319 374.408 123.671 366.913 118.824C359.484 113.978 353.684 106.982 351.729 98.4383C349.774 89.8942 351.599 79.8511 359.028 72.0565C366.522 64.2619 379.621 58.6658 392.263 59.0155C404.906 59.3653 417.157 65.611 427.584 73.4056Z" strokeWidth = ".25" / > < path d = "M411.584 129.406C422.011 137.2 430.678 146.594 428.723 154.438C426.703 162.283 414.125 168.578 403.699 173.425C393.207 178.272 384.996 181.619 376.263 181.969C367.531 182.319 358.408 179.671 350.913 174.824C343.484 169.978 337.684 162.982 335.729 154.438C333.774 145.894 335.599 135.851 343.028 128.057C350.522 120.262 363.621 114.666 376.263 115.016C388.906 115.365 401.157 121.611 411.584 129.406Z" strokeWidth = ".25" / > < path d = "M130.584 96.4056C141.011 104.2 149.678 113.594 147.723 121.438C145.703 129.283 133.125 135.578 122.699 140.425C112.207 145.272 103.996 148.619 95.2634 148.969C86.531 149.319 77.4076 146.671 69.9134 141.824C62.4844 136.978 56.6845 129.982 54.7295 121.438C52.7745 112.894 54.5991 102.851 62.0282 95.0565C69.5224 87.2619 82.621 81.6658 95.2634 82.0155C107.906 82.3653 120.157 88.611 130.584 96.4056Z" strokeWidth = ".25" / > < path d = "M243.21 137.259C248.178 140.935 247.197 149.898 246.154 157.955C245.112 166.062 244.13 173.363 239.162 179.758C234.255 186.204 225.362 191.793 216.285 191.994C207.207 192.196 197.823 187.009 190.892 180.564C183.9 174.169 179.362 166.465 178.258 157.904C177.153 149.344 179.546 139.877 186.476 136.201C193.468 132.475 204.999 134.54 216.223 134.842C227.386 135.094 238.303 133.533 243.21 137.259Z" strokeWidth = ".25" / > < path d = "M519.21 124.259C524.178 127.935 523.197 136.898 522.154 144.955C521.112 153.062 520.13 160.363 515.162 166.758C510.255 173.204 501.362 178.793 492.285 178.994C483.207 179.196 473.823 174.009 466.892 167.564C459.9 161.169 455.362 153.465 454.258 144.904C453.153 136.344 455.546 126.877 462.476 123.201C469.468 119.475 480.999 121.54 492.223 121.842C503.386 122.094 514.303 120.533 519.21 124.259Z" strokeWidth = ".25" / > < path d = "M160.977 35.2951C164.714 43.0679 166.087 48.5694 170.044 55.6355C174.001 62.7016 180.54 71.3829 178.672 76.7834C176.803 82.2344 166.637 84.4552 157.954 84.9095C149.272 85.3637 142.128 84.1019 136.413 81.2755C130.753 78.449 126.521 74.0579 119.213 68.4555C111.959 62.8026 101.573 55.8879 101.023 49.175C100.474 42.4622 109.761 35.9513 118.718 28.9861C127.675 22.0714 136.303 14.8033 143.667 16.1661C151.085 17.5289 157.185 27.5224 160.977 35.2951Z" strokeWidth = ".25" / > < path d = "M326.501 42.2665C334.288 47.7037 343.421 52.7885 346.113 60.3403C348.804 67.8416 345.055 77.8099 339.143 84.6568C333.231 91.4534 325.203 95.1285 317.369 97.243C309.534 99.3072 301.891 99.8106 295.162 97.3437C288.432 94.9272 282.664 89.4899 278.242 82.6934C273.772 75.8465 270.647 67.6403 271.032 59.0816C271.417 50.5734 275.262 41.7127 281.655 36.0741C288.048 30.3851 296.988 27.8678 304.679 29.4789C312.37 31.0899 318.714 36.8292 326.501 42.2665Z" strokeWidth = ".25" / > < path d = "M452.501 136.266C460.288 141.704 469.421 146.789 472.113 154.34C474.804 161.842 471.055 171.81 465.143 178.657C459.231 185.453 451.203 189.129 443.369 191.243C435.534 193.307 427.891 193.811 421.162 191.344C414.432 188.927 408.664 183.49 404.242 176.693C399.772 169.846 396.647 161.64 397.032 153.082C397.417 144.573 401.262 135.713 407.655 130.074C414.048 124.385 422.988 121.868 430.679 123.479C438.37 125.09 444.714 130.829 452.501 136.266Z" strokeWidth = ".25" / > < path d = "M64.5801 63.2665C71.9571 68.7037 80.6092 73.7885 83.1593 81.3403C85.7093 88.8416 82.1574 98.8099 76.5564 105.657C70.9553 112.453 63.3506 116.129 55.9281 118.243C48.5055 120.307 41.2651 120.811 34.8899 118.344C28.5147 115.927 23.0503 110.49 18.8609 103.693C14.6259 96.8465 11.666 88.6403 12.0303 80.0816C12.3946 71.5734 16.0376 62.7127 22.094 57.0741C28.1504 51.3851 36.6203 48.8678 43.9063 50.4789C51.1922 52.0899 57.2031 57.8292 64.5801 63.2665Z" strokeWidth = ".25" / > < path d = "M506.58 82.2665C513.957 87.7037 522.609 92.7885 525.159 100.34C527.709 107.842 524.157 117.81 518.556 124.657C512.955 131.453 505.351 135.129 497.928 137.243C490.506 139.307 483.265 139.811 476.89 137.344C470.515 134.927 465.05 129.49 460.861 122.693C456.626 115.846 453.666 107.64 454.03 99.0816C454.395 90.5734 458.038 81.7127 464.094 76.0741C470.15 70.3851 478.62 67.8678 485.906 69.4789C493.192 71.0899 499.203 76.8292 506.58 82.2665Z" strokeWidth = ".25" / > < path d = "M364.58 79.2665C371.957 84.7037 380.609 89.7885 383.159 97.3403C385.709 104.842 382.157 114.81 376.556 121.657C370.955 128.453 363.351 132.129 355.928 134.243C348.506 136.307 341.265 136.811 334.89 134.344C328.515 131.927 323.05 126.49 318.861 119.693C314.626 112.846 311.666 104.64 312.03 96.0816C312.395 87.5734 316.038 78.7127 322.094 73.0741C328.15 67.3851 336.62 64.8678 343.906 66.4789C351.192 68.0899 357.203 73.8292 364.58 79.2665Z" strokeWidth = ".25" / > < path d = "M117.58 63.2665C124.957 68.7037 133.609 73.7885 136.159 81.3403C138.709 88.8416 135.157 98.8099 129.556 105.657C123.955 112.453 116.351 116.129 108.928 118.243C101.506 120.307 94.2651 120.811 87.8899 118.344C81.5147 115.927 76.0503 110.49 71.8609 103.693C67.6259 96.8465 64.666 88.6403 65.0303 80.0816C65.3946 71.5734 69.0376 62.7127 75.094 57.0741C81.1504 51.3851 89.6203 48.8678 96.9063 50.4789C104.192 52.0899 110.203 57.8292 117.58 63.2665Z" strokeWidth = ".25" / > < path d = "M454.58 101.266C461.957 106.704 470.609 111.789 473.159 119.34C475.709 126.842 472.157 136.81 466.556 143.657C460.955 150.453 453.351 154.129 445.928 156.243C438.506 158.307 431.265 158.811 424.89 156.344C418.515 153.927 413.05 148.49 408.861 141.693C404.626 134.846 401.666 126.64 402.03 118.082C402.395 109.573 406.038 100.713 412.094 95.0741C418.15 89.3851 426.62 86.8678 433.906 88.4789C441.192 90.0899 447.203 95.8292 454.58 101.266Z" strokeWidth = ".25" / > < path d = "M304.842 119.062C311.674 125.628 310.859 137.169 307.349 145.875C303.839 154.631 297.633 160.55 290.801 167.863C283.969 175.126 276.509 183.733 265.853 186.22C255.26 188.707 241.47 185.076 235.327 177.763C229.247 170.5 230.689 159.556 232.945 150.452C235.202 141.298 238.148 133.936 244.291 127.369C250.434 120.753 259.711 114.933 271.62 112.843C283.467 110.754 298.009 112.445 304.842 119.062Z" strokeWidth = ".25" / > < path d = "M567.842 46.0616C574.674 52.6282 573.859 64.1695 570.349 72.8752C566.839 81.6306 560.633 87.5505 553.801 94.8633C546.969 102.126 539.509 110.733 528.853 113.22C518.26 115.707 504.47 112.076 498.327 104.763C492.247 97.4998 493.689 86.5555 495.945 77.4519C498.202 68.2984 501.148 60.9359 507.291 54.3693C513.434 47.753 522.711 41.9326 534.62 39.8432C546.467 37.7539 561.009 39.4453 567.842 46.0616Z" strokeWidth = ".25" / > < path d = "M570.842 89.0616C577.674 95.6282 576.859 107.169 573.349 115.875C569.839 124.631 563.633 130.55 556.801 137.863C549.969 145.126 542.509 153.733 531.853 156.22C521.26 158.707 507.47 155.076 501.327 147.763C495.247 140.5 496.689 129.556 498.945 120.452C501.202 111.298 504.148 103.936 510.291 97.3693C516.434 90.753 525.711 84.9326 537.62 82.8432C549.467 80.7539 564.009 82.4453 570.842 89.0616Z" strokeWidth = ".25" / > < path d = "M495.842 48.0616C502.674 54.6282 501.859 66.1695 498.349 74.8752C494.839 83.6306 488.633 89.5505 481.801 96.8633C474.969 104.126 467.509 112.733 456.853 115.22C446.26 117.707 432.47 114.076 426.327 106.763C420.247 99.4998 421.689 88.5555 423.945 79.4519C426.202 70.2984 429.148 62.9359 435.291 56.3693C441.434 49.753 450.711 43.9326 462.62 41.8432C474.467 39.7539 489.009 41.4453 495.842 48.0616Z" strokeWidth = ".25" / > < path d = "M402.842 25.0616C409.674 31.6282 408.859 43.1695 405.349 51.8752C401.839 60.6306 395.633 66.5505 388.801 73.8633C381.969 81.1263 374.509 89.7325 363.853 92.2198C353.26 94.7072 339.47 91.0757 333.327 83.7629C327.247 76.4998 328.689 65.5555 330.945 56.4519C333.202 47.2984 336.148 39.9359 342.291 33.3693C348.434 26.753 357.711 20.9326 369.62 18.8432C381.467 16.7539 396.009 18.4453 402.842 25.0616Z" strokeWidth = ".25" / > < path d = "M182.842 71.0616C189.674 77.6282 188.859 89.1695 185.349 97.8752C181.839 106.631 175.633 112.55 168.801 119.863C161.969 127.126 154.509 135.733 143.853 138.22C133.26 140.707 119.47 137.076 113.327 129.763C107.247 122.5 108.689 111.556 110.945 102.452C113.202 93.2984 116.148 85.9359 122.291 79.3693C128.434 72.753 137.711 66.9326 149.62 64.8432C161.467 62.7539 176.009 64.4453 182.842 71.0616Z" strokeWidth = ".25" / > < path d = "M114.758 133.943C121.148 140.688 126.316 147.532 128.65 156.526C131.039 165.469 130.65 176.56 124.26 182.456C117.869 188.352 105.533 189.051 95.6417 186.853C85.7504 184.654 78.3041 179.558 70.5244 173.663C62.8002 167.767 54.7427 161.072 53.2423 153.078C51.7975 145.034 56.9655 135.741 64.6896 128.947C72.4693 122.202 82.8052 118.005 91.8074 119.204C100.81 120.453 108.423 127.148 114.758 133.943Z" strokeWidth = ".25" / > < path d = "M252.758 86.9428C259.148 93.6877 264.316 100.532 266.65 109.526C269.039 118.469 268.65 129.56 262.26 135.456C255.869 141.352 243.533 142.051 233.642 139.853C223.75 137.654 216.304 132.558 208.524 126.663C200.8 120.767 192.743 114.072 191.242 106.078C189.798 98.0344 194.965 88.7414 202.69 81.9466C210.469 75.2017 220.805 71.0048 229.807 72.2039C238.81 73.453 246.423 80.1479 252.758 86.9428Z" strokeWidth = ".25" / > < path d = "M537.758 21.9428C544.148 28.6877 549.316 35.5325 551.65 44.5257C554.039 53.4689 553.65 64.5605 547.26 70.456C540.869 76.3516 528.533 77.051 518.642 74.8527C508.75 72.6544 501.304 67.5582 493.524 61.6627C485.8 55.7672 477.743 49.0722 476.242 41.0783C474.798 33.0344 479.965 23.7414 487.69 16.9466C495.469 10.2017 505.805 6.00485 514.807 7.20394C523.81 8.45299 531.423 15.1479 537.758 21.9428Z" strokeWidth = ".25" / > < path d = "M211.758 96.9428C218.148 103.688 223.316 110.532 225.65 119.526C228.039 128.469 227.65 139.56 221.26 145.456C214.869 151.352 202.533 152.051 192.642 149.853C182.75 147.654 175.304 142.558 167.524 136.663C159.8 130.767 151.743 124.072 150.242 116.078C148.798 108.034 153.965 98.7414 161.69 91.9466C169.469 85.2017 179.805 81.0048 188.807 82.2039C197.81 83.453 205.423 90.1479 211.758 96.9428Z" strokeWidth = ".25" / > < /g> < /svg>); }