<div id="title-container">
<img id="background" src="https://raw.githubusercontent.com/robole/title-sequences/main/better-call-saul/img/lady-liberity-l.png" />
<div id="animatable-content">
<img id="animatable-background" src="https://raw.githubusercontent.com/robole/title-sequences/main/better-call-saul/img/lady-liberity-l.png" />
<svg id="title" viewBox="0 0 1200 800">
<g id="better-shadow" class="bg-layer">
<path id="path2" d="M215.626 326.414c-10.025 3.979-20.504 3.476-29.665.128 3.11-6.563 6.213-9.163 9.607-15.586 8.97-1.198 25.35-2.19 34.071 1.259.829 4.718-10.54 12.321-14.013 14.2zm31.639-46.497c-5.445 9.352-23.705 14.466-33.848 16.266-3.565 1.593-7.972-3.93-5.677-6.029 3.5-5.874 6.971-11.784 11.046-17.285 5.473.013 20.807-2.028 25.764.884.852.851 3.12 5.072 2.715 6.164zm9.804.345c.146-9.79-7.278-16.203-16.439-16.377-6.035-.385-20.75.041-26.79-.031-4.866 2.545-9.77-5.539-14.12-1.039-2.743 4.406-8.196 2.89-11.926 5.517-5.358 3.076.155 7.788 4.272 7.549-12.17 19.983-27.25 39.24-34.515 57.716-.955 5.537 5.543 8.204 10.121 7.532 4.29.523 14.041-3.097 17.752.544 11.824 5.043 31.817 1.947 42.914-3.91 6.799-3.45 14.084-8.32 16.292-16.042 1.767-7.783-2.486-16.835-10.027-19.807-.63-1.983 5.37-2.246 6.936-3.903 7.195-3.46 14.832-9.116 15.53-17.75z" />
<path id="path4" d="M366.748 259.71c-.36-5.465-3.882-4.255-10.707-4.784-15.097-.074-52.161-2.86-53.179-.148-9.286 19.714-26.649 47.046-37.085 68.974-3.008 4.447 1.591 8.75 5.135 10.993 3.575 2.503 17.259 5.097 21.386 3.39 11.487-1.889 23.053-3.662 34.714-3.783 4.623.317 5.813-7.447.394-6.42-10.782.07-21.592-.505-32.334.709a505.48 505.48 0 0110.387-23.37c8.746-2.293 17.805-3.148 26.822-3.247 4.412-2.884-1.749-6.832-5.075-6.316-5.63-.248-11.278-.107-16.908-.47 5.077-10.486 10.483-20.891 17.35-30.335 8.45-1.374 27.912-1.614 36.452-1.711 1.674-.185 2.695-1.91 2.648-3.482z" />
<path id="path6" d="M454.818 256.921c-.558-4.32-4.116-4.288-7.501-4.832-16.44-.902-39.42 3.042-55.868 3.76-6.733.584-17.257.503-23.738 2.584-4.583.549-5.853 6.096-.637 6.715 13.333 1.747 20.149-1.71 28.885 2.512-10.45 19.483-18.536 38.557-26.26 59.261-.92 4.772 4.284 7.772 8.434 7.792 4.438.966 12.282-1.083 12.1-6.062 1.98-5.767 5.003-11.161 7.56-16.704 8.047-16.422 17.213-31.79 28.016-46.571 7.473-.648 16.781-3.971 24.223-4.772 1.901-.54 4.562-1.341 4.786-3.683z" />
<path id="path8" d="M538.489 255.417c-.464-4.418-6.235-4.65-9.673-5.287-16.737-1.32-44.748.483-61.533.814-6.88.427-13.947.311-20.606 2.27-4.685.448-6.115 6.072-.813 6.83 5.272 1.832 10.774 2.985 16.372 2.89 3.407.445 17.22-.69 19.324.524-11.128 19.607-22.266 39.216-30.644 60.135-1.055 4.841 4.177 8.027 8.408 8.148 2.917.294 7.764.446 8.274-3.356 1.206-5.604 4.394-10.458 6.802-15.594 9.154-17.993 21.028-34.63 33.345-50.659 7.636-.457 18.165-2.473 25.775-3.078 1.95-.503 4.683-1.256 4.969-3.637z" />
<path id="path4960-6" stroke-width="1" d="M613.501 253.822c-.206-5.564-7.437-4.056-11.198-4.828-10.6-.758-30.063 1.247-40.682.95-3.656-2.023-8.872-1.213-10.765 2.815-8.757 16.622-27.203 43.44-38.496 65.68-2.699 4.477 2.311 8.574 5.618 10.887 3.75 2.884 16.343 5.947 20.728 4.503 11.427-1.539 24.446-7.722 35.993-7.513 5.14.413 5.837-7.876.115-6.526-10.799-.266-22.122-.348-32.915.553 3.544-7.91 7.295-14.97 11.234-22.691 8.955-2.076 23.236-2.177 32.404-2.016 4.567-2.804-1.58-6.994-4.975-6.567-5.714-.415-15.247-.435-20.958-.968 5.464-10.509 11.764-18.654 19.018-28.052 8.626-1.15 23.406-2.914 32.087-2.766 1.711-.142 2.791-1.858 2.792-3.461z" />
<path id="path4962-2" stroke-width="1" d="M699.921 262.285c-1.158 8.765-11.292 16.427-18.512 20.45-3.38 2.89-16.19 4.368-20.33 5.13 2.428 9.523 4.533 18.833 7.89 28.062.508 4.98-5.321 7.562-9.466 7.756-4.105.683-10.996 1.36-11.98-2.596-4.49-9.217-9.545-18.18-15.422-26.588l-10.565 24.821c-.15 4.888-10.582 6.35-15.564 5.543-4.202-.3-8.048-1.676-8.505-6.742-.108-4.215 2.329-7.953 3.503-11.905 11.763-21.738 26.177-42.852 37.148-63.95 2.212-3.59 6.576-3.097 10.182-2.935 10.815.434 34 .58 43.152 6.776 5.27 3.632 8.575 9.748 8.47 16.178zm-22.14-6c-4.056-.66-14.423-1.74-19.82 1.635-3.511 4.15-7.69 9.624-12.844 17.959 14.638-.885 29.726-3.06 38.07-9.818 5.229-6.237.246-8.74-5.405-9.776z" />
</g>
<g id="call-shadow" class="bg-layer">
<path id="path13" d="M481.97 374.029q-.49 7.45-3.343 13.12-2.722 5.679-8.806 10.834-4.673 3.564-11.05 3.248-4.686-.232-7.67-2.515-2.854-2.277-2.582-6.416 1.355-.763 6.015-6.107 5.51-6.37 5.697-9.208.116-1.774-1.576-1.858-1.692-.084-5.062 1.528-1.762.98-3.516 1.843-21.023 15.922-30.178 32.076-2.193 3.569-3.865 7.163-2.585 5.566-2.802 8.877-.148 2.247.793 3.836 1.078 1.477 3.741 2.677 2.802 1.087 6.055 1.249 7.419.368 17.988-3.498 9.098-3.345 13.764-6.791 1.908-1.21 3.6-1.126 2.342.116 2.21 2.126-.093 1.419-2.023 2.984-8.666 6.688-17.39 10.289-9.933 4.134-18.783 3.695-12.234-.606-19.72-3.943-7.346-3.449-9.379-8.295-.794-1.819-1.053-3.848-.25-2.148-.134-3.922.163-2.483.685-4.474.53-2.109 1.934-5.598 6.906-17.69 20.18-32.928 14.4-16.487 29.09-21.453.941-.428 3.935-.28 4.035.2 9.561 1.542 5.535 1.224 8.94 3.053 7.586 1.8 11.289 5.068 3.335 2.894 3.454 7.052z" />
<path id="path15" d="M530.817 382.06q-1.992 6.292-3.72 14.712-1.202 5.983-2.48 14.306-8.297 1.288-13.125 2.244-4.716.96-12.04 3.171 5.466-6.735 9.757-11.724 6.263-7.266 10.426-11.702 4.852-5.082 11.182-11.007zm21.397-9.555q.605-1.43 1.562-3.406.961-2.087.98-2.644.032-.891-1.296-1.27-1.326-.379-5.003-.5-3.05-2.22-7.507-2.367-2.785-.093-6.495.789l-.137.776q-31.346 33.876-58.736 69.556-.587.873-.612 1.653-.062 1.894 1.776 3.628 1.73 1.619 3.402 1.674.891.031 1.47-.62l9.697-13.288q8.222-2.405 16.09-4.265 6.073-1.472 16.174-3.37l-1.065 15.358q-.472.765-.498 1.545-.069 2.117 2.557 3.654 2.626 1.536 6.526 1.665 2.662.423 6.722-.893 4.173-1.424 3.987-2.545.678-20.501 2.582-34.269 2.49-17.987 7.824-30.86z" />
<path id="path17" d="M635.39 365.549c-14.89 17.992-27.226 37.985-37.72 58.816 9.35.335 24.398-.474 33.673.708 3.793.599 5.074 6.281 1.412 8.054-3.43 1.584-13.064 2.405-16.717 2.766-11.83.215-23.68.902-35.394 2.539-3.966.239-9.166-2.618-7.666-7.261 1.424-4.426 4.74-7.907 6.94-11.959 11.302-18.718 21.72-37.979 31.254-57.656 1.69-2.878 1.88-7.411 6.051-7.742 5.266-1.56 10.964-.515 16.039 1.246 2.963 1.017 5.097 4.37 3.704 7.415-.388 1.088-.955 2.103-1.576 3.074z" />
<path id="path19" d="M697.897 364.344q-9.844 12.757-18.986 28.472-7.837 13.502-14.937 29.173 3.731-.214 9.85-.12 6.237.097 7.076.125l9.947.336q2.517.084 3.777 1.368 1.386 1.175 1.306 2.865-.164 3.492-4.886 4.349-15.66 1.165-27.016 2.7-8.818 1.17-15.37 2.642-.605.09-1.923.048-3.356-.113-5.33-1.533-1.859-1.304-1.732-4.008.064-1.352 1.134-3.685 6.105-9.837 14.57-26.477 7.015-13.868 12.762-26.313 5.752-12.556 7.283-17.018.074-1.577 3.608-2.7 3.54-1.234 7.015-1.117 6.112.206 9.066 1.208 4.605 1.622 4.436 5.227-.085 1.803-1.65 4.458z" />
</g>
<g id="saul-shadow" class="bg-layer">
<path id="path4999-3" d="M167.902 649.481c-27.318.448-58.28-3.54-71.611-29.238-7.35-16.362-6.507-34.072 4.115-49.305 9.7-13.61 34.98-20.183 50.913-20.678-15.097 15.889-26.38 36.136-17.915 57.999 8.104 20.91 30.863 22.392 49.975 21.777 17.86-1.095 63.806-12.886 73.266-33.391 6.368-15.295 10.745-30.246-1.799-40.972-25.116-23.305-85.568-17.668-108.625-43.629-16.383-17.815-12.73-45.33-2.199-65.145 16.579-33.704 77.01-70.042 114.899-68.189 13.698-.195 34.422 4.146 39.774 18.011 7.66 20.056-5.031 42.563-12.472 61.5-4.486 10.218-9.23 20.366-15.03 29.917-10.953-.91-21.068-13.584-18.52-23.72 2.984-21.93 21.547-39.671 21.648-62.121-1.65-14.138-19.32-6.696-29.368-5.19-29.801 6.446-70.33 41.755-76.1 71.54-6.454 37.134 98.115 40.197 116.8 69.06 19.094 22.623 7.379 53.153-20.21 78.491-18.97 18.756-71.21 32.635-97.54 33.283z" />
<path id="path5001-6" d="M351.68 607.484c-14.423 1.604-28.723-9.489-28.913-24.144 2.85-51.081 67.46-104.918 113.824-119.278 12.963-2.006 55.16-2.39 59.966 16.29 3.679 10.27-4.323 19.107-14.874 21.862-8.873-.862-12.334-7.66-5.54-10.205.402-7.596.756-14.047-7.962-15.984-15.497-1.815-72.015 36.446-81.344 47.322-21.558 22.254-36.796 64.36-19.917 58.91 33.857-15.725 72.435-43.537 93.625-73.126 15.743 7.267 25.395 6.18 26.366 8.916 1.758 4.951-13.074 14.082-26.616 30.097-4.61 4.37-8.671 11.366-2.878 20.74 2.771 3.852 10.456 2.723 10.49 2.748 3.317-.065 51.18-29.55 59.158-48.016 4.886 3.303-1.696 18.09-5.058 24.497-2.602 8.464-38.635 34.325-61.18 45.307-24.15 6.875-37.162-2.393-47.909-21.215-9.737 12.505-23.798 24.234-49.825 32.459-3.6 1.6-7.48 2.578-11.413 2.82z" />
<path id="path49" d="M536.049 566.23c-5.153-33.05 16.583-54.83 33.15-82.582 5.172-7.51 28.903.211 24.916 3.375-6.54 15.811-25.527 40.359-26.71 57.804-6.274 57.427 49.691-8.279 67.044-35.054 3.857-8.303 15.154-22.627 18.788-31.032 6.712 1.124 14.392 2.273 19.234 7.457-.296 22.093-20.812 42.532-22.576 60.735-.727 6.12-2.254 14.986 5.898 13.94 12.895-2.035 20.832-5.618 28.544-10.72 13.665-9.092 31.565-22.722 37.649-36.231 1.632 1.985 3.517 15.276 1.022 18.403-9.937 24.154-49.661 40.253-57.707 42.885-6.917 2.73-41.389 5.313-48.154-13.843-1.376-2.939-1.225-3.34-2.208-2.427-3.784 3.744-7.97 8.307-23.216 18.734-20.77 11.114-48.321 13.567-55.674-11.443z" />
<path id="path51" d="M774.515 558.726c-12.462-.077-25.444-5.223-30.424-12.452-4.712-7.459-7.028-16.18-6.947-26.164.092-11.377 1.498-25.298 7.784-40.27 14.557-36.185 41.564-66.128 65.565-97.593 12.991-15.665 26.089-29.973 37.729-41.593 10.256-8.796 40.406-38.099 53.412-38.329 3.447.022 6.35 1.665 8.71 4.93 4.677 7.187 7.768 15.129 7.769 23.035-1.008 21.271-10.064 40.583-22.656 57.684-37.662 39.399-64.127 64.884-112.931 101.28-3.762 7.45-7.223 20.152-7.332 22.32-2.654 11.553-4.61 26.818 10.268 27.121 14.666-1.396 27.91-12.616 30.525-15.979 23.506-14.53 6.83 10.067-3.182 18.522-14.148 11.754-22.912 17.583-38.29 17.488zm23.265-105.667c18.764-17.232 38.525-32.95 55.204-53.025 13.455-15.127 24.419-28.496 33.131-46.469 3.006-7.948 1.621-6.926.104-6.31-14.122 13.194-27.811 30.385-38.289 41.92-20.678 22.65-45.553 57.749-50.15 63.884z" />
</g>
<g id="better" aria-label="Better" fill="#ff0">
<path id="path4952" d="M182.349 311.323c-10.517 4.174-17.578 7.394-27.19 3.881 3.264-6.886 6.52-9.614 10.08-16.353 9.411-1.256 20.227-3.983 29.377-.365.87 4.95-8.623 10.867-12.267 12.837zm31.697-48.036c-5.713 9.813-23.747 14.99-34.39 16.88-3.74 1.67-4.054-.938-1.646-3.14 3.671-6.164 7.314-12.365 11.59-18.136 5.742.013 18.644-2.127 23.845.927.895.893 1.025 2.324.6 3.47zm15.72 3.36c.153-10.27-7.637-17-17.248-17.182-6.333-.404-21.77.041-28.108-.031-5.106 2.67-10.25-5.811-14.814-1.09-2.878 4.622-8.6 3.032-12.513 5.788-5.621 3.228.162 8.171 4.481 7.92-12.768 20.966-28.589 41.17-36.212 60.555-1.001 5.81 5.815 8.608 10.619 7.903 4.5.549 14.732-3.25 18.625.57 12.405 5.292 33.383 2.043 45.024-4.102 7.134-3.62 14.777-8.73 17.095-16.83 1.853-8.167-2.609-17.663-10.521-20.783-.66-2.08 5.634-2.355 7.277-4.094 7.55-3.63 15.562-9.564 16.295-18.624z" />
<path id="path4954" d="M335.74 252.283c-.366-5.556-3.947-4.326-10.886-4.864-15.349-.076-53.031-2.908-54.066-.15-9.44 20.042-27.093 47.83-37.703 70.123-3.059 4.521 1.617 8.897 5.22 11.177 3.635 2.545 17.547 5.182 21.742 3.446 11.68-1.92 23.438-3.723 35.294-3.845 4.7.322 5.91-7.572.4-6.527-10.961.071-21.952-.514-32.873.72a513.858 513.858 0 0110.56-23.76c8.892-2.33 18.102-3.2 27.27-3.3 4.485-2.933-1.778-6.946-5.16-6.422-5.724-.252-11.466-.108-17.19-.478 5.162-10.66 10.658-21.24 17.64-30.84 8.59-1.397 28.377-1.641 37.059-1.74 1.702-.188 2.74-1.941 2.692-3.54z" />
<path id="path4956" d="M427.445 249.417c-.57-4.406-4.197-4.374-7.65-4.928-16.764-.92-40.198 3.102-56.97 3.834-6.866.596-17.598.513-24.208 2.635-4.673.56-5.968 6.216-.65 6.848 13.598 1.782 20.548-1.743 29.456 2.562-10.655 19.867-18.902 39.318-26.778 60.43-.94 4.867 4.368 7.926 8.6 7.946 4.526.986 12.525-1.104 12.339-6.18 2.019-5.882 5.102-11.383 7.709-17.035 8.207-16.746 17.554-32.418 28.57-47.491 7.62-.66 17.113-4.05 24.702-4.866 1.938-.55 4.651-1.368 4.88-3.755z" />
<path id="path4958" d="M512.093 250.084c-.463-4.418-6.234-4.65-9.673-5.286-16.737-1.32-44.748.483-61.532.814-6.88.426-13.947.31-20.606 2.27-4.685.448-6.115 6.072-.813 6.83 5.272 1.831 10.774 2.985 16.372 2.89 3.407.445 17.22-.69 19.323.523-11.127 19.607-22.265 39.216-30.644 60.135-1.054 4.842 4.178 8.027 8.409 8.149 2.916.294 7.763.446 8.274-3.356 1.206-5.604 4.394-10.459 6.801-15.594 9.155-17.993 21.028-34.63 33.346-50.66 7.636-.456 18.165-2.472 25.775-3.077 1.95-.503 4.682-1.256 4.968-3.638z" />
<path id="path4960" d="M595.167 244.217c-.207-5.565-7.437-4.056-11.199-4.828-10.599-.758-30.062 1.247-40.682.95-3.656-2.024-8.871-1.213-10.764 2.815-8.757 16.622-27.203 43.44-38.497 65.68-2.698 4.477 2.312 8.574 5.619 10.887 3.75 2.884 16.342 5.947 20.727 4.502 11.427-1.538 24.446-7.722 35.994-7.512 5.14.413 5.837-7.876.114-6.526-10.798-.267-22.12-.348-32.914.553 3.544-7.91 7.294-14.97 11.233-22.692 8.955-2.075 23.237-2.176 32.404-2.016 4.568-2.803-1.58-6.993-4.975-6.566-5.714-.415-15.246-.435-20.957-.968 5.464-10.51 11.764-18.654 19.017-28.052 8.627-1.151 23.407-2.914 32.088-2.766 1.711-.142 2.791-1.858 2.792-3.461z" />
<path id="path4962" d="M689.815 256.068c-1.158 8.765-11.293 16.428-18.513 20.452-3.38 2.888-16.19 4.367-20.33 5.13 2.428 9.522 4.533 18.832 7.89 28.061.509 4.98-5.321 7.562-9.466 7.755-4.105.684-10.995 1.362-11.979-2.595-4.49-9.217-9.546-18.18-15.423-26.588l-10.564 24.821c-.151 4.888-10.583 6.35-15.564 5.542-4.202-.299-10.049-1.675-10.505-6.742-.108-4.214 2.328-7.952 3.502-11.904 11.763-21.738 28.178-42.852 39.148-63.95 2.212-3.59 6.576-3.097 10.182-2.935 10.815.434 34 .579 43.152 6.776 5.271 3.632 8.576 9.748 8.47 16.177zm-28.926-6.356c-4.056-.66-7.638-1.383-13.034 1.991-3.512 4.15-7.691 9.625-12.845 17.96 10.353-4.1 21.155-6.274 29.499-13.033 5.229-6.236 2.032-5.882-3.62-6.918z" />
</g>
<g id="call" aria-label="Call" fill="#ff0">
<path id="path22" d="M460.154 374.623q-.677 7.533-3.65 13.204-2.844 5.68-9.005 10.742-4.723 3.488-11.033 2.999-4.637-.36-7.534-2.751-2.769-2.382-2.393-6.567 1.363-.738 6.118-6.03 5.624-6.307 5.882-9.177.16-1.794-1.513-1.923-1.675-.13-5.055 1.414-1.771.947-3.532 1.774-21.24 15.575-30.728 31.699-2.265 3.557-4.015 7.155-2.705 5.57-3.005 8.919-.204 2.272.686 3.906 1.03 1.525 3.638 2.81 2.748 1.177 5.968 1.426 7.34.568 17.912-3.069 9.101-3.148 13.813-6.516 1.921-1.176 3.596-1.046 2.318.179 2.135 2.212-.129 1.435-2.082 2.97-8.758 6.546-17.495 9.964-9.949 3.926-18.706 3.248-12.106-.938-19.436-4.515-7.19-3.688-9.08-8.651-.74-1.864-.944-3.926-.193-2.183-.031-3.977.225-2.51.794-4.514.58-2.123 2.061-5.62 7.3-17.738 20.844-32.825 14.694-16.323 29.376-20.966.945-.409 3.907-.18 3.992.31 9.434 1.815 5.452 1.385 8.779 3.329 7.47 2.023 11.054 5.431 3.23 3.02 3.24 7.236z" />
<path id="path24" d="M514.096 377.1q-2.145 6.773-4.005 15.837-1.293 6.44-2.67 15.4-8.93 1.386-14.127 2.415-5.077 1.033-12.96 3.414 5.882-7.25 10.502-12.62 6.742-7.822 11.222-12.597 5.224-5.47 12.038-11.849zm23.032-10.285q.651-1.54 1.682-3.666 1.035-2.247 1.055-2.847.031-.96-1.396-1.367-1.427-.407-5.385-.538-3.283-2.39-8.08-2.548-2.999-.1-6.992.85l-.148.835Q484.122 394 454.638 432.407q-.632.94-.66 1.78-.067 2.039 1.913 3.905 1.863 1.742 3.662 1.802.96.032 1.583-.668l10.438-14.303q8.85-2.59 17.32-4.591 6.537-1.585 17.41-3.627l-1.146 16.53q-.508.825-.535 1.664-.076 2.279 2.751 3.933t7.025 1.793q2.866.455 7.235-.962 4.494-1.532 4.293-2.74.73-22.067 2.78-36.888 2.68-19.362 8.421-33.22z" />
<path id="path4969" stroke-width="1" d="M614.444 364.045q-10.213 13.223-19.81 29.618-8.23 14.087-15.785 30.509 3.736-.093 9.85.225 6.232.327 7.07.387l9.934.713q2.514.18 3.736 1.592 1.35 1.3 1.221 3.095-.266 3.71-5.011 4.453-15.689.678-27.086 1.906-8.85.929-15.442 2.26-.607.077-1.923-.017-3.352-.24-5.283-1.823-1.82-1.454-1.615-4.327.103-1.436 1.241-3.881 6.39-10.249 15.339-27.653 7.417-14.506 13.526-27.543 6.117-13.155 7.778-17.849.12-1.675 3.685-2.743 3.575-1.187 7.046-.938 6.104.438 9.027 1.61 4.557 1.891 4.282 5.721-.137 1.916-1.78 4.685z" />
<path id="path4971" stroke-width="1" d="M688.756 360.866q-10.11 13.3-19.584 29.769-8.121 14.15-15.55 30.628 3.735-.122 9.85.15 6.235.28 7.073.333l9.94.637q2.515.162 3.748 1.563 1.36 1.29 1.245 3.086-.238 3.713-4.978 4.491-15.683.799-27.07 2.113-8.842.996-15.424 2.378-.606.082-1.924-.003-3.353-.215-5.297-1.782-1.831-1.44-1.647-4.314.092-1.437 1.211-3.89 6.312-10.298 15.127-27.77 7.307-14.563 13.316-27.645 6.017-13.202 7.641-17.908.107-1.677 3.665-2.771 3.565-1.215 7.038-.992 6.107.391 9.04 1.541 4.57 1.856 4.325 5.688-.123 1.916-1.744 4.698z" />
</g>
<g id="saul" aria-label="Saul" fill="red">
<path id="path4999" d="M184.397 644.24c-27.319.447-58.28-3.542-71.612-29.24-7.35-16.362-6.507-34.072 4.115-49.304 9.7-13.61 34.98-20.183 50.913-20.679-15.096 15.89-26.38 36.137-17.915 58 8.104 20.91 30.863 22.392 49.975 21.777 17.861-1.096 63.806-12.886 73.266-33.392 6.368-15.294 10.746-30.245-1.799-40.97-25.116-23.307-85.568-17.67-108.625-43.63-16.383-17.815-12.729-45.33-2.199-65.146 16.579-33.703 77.01-70.04 114.899-68.188 13.698-.196 34.422 4.146 39.774 18.011 7.66 20.056-5.031 42.563-12.472 61.5-4.486 10.218-9.23 20.365-15.03 29.916-10.953-.91-21.068-13.584-18.52-23.72 2.984-21.93 21.547-39.67 21.648-62.12-1.65-14.138-19.32-6.696-29.368-5.19-29.801 6.446-70.33 41.755-76.1 71.539-6.454 37.135 98.115 40.198 116.8 69.06 19.094 22.623 7.379 53.153-20.21 78.492-18.97 18.756-71.21 32.634-97.54 33.283z" />
<path id="path5001" d="M361.103 600.221c-14.423 1.604-28.723-9.488-28.913-24.144 2.85-51.08 63.925-100.372 110.289-114.732 14.925-4.146 39.837-1.029 49.241 12.632 5.108 7.77-.417 19.734-9.706 24.51-5.59 5.199-13.596 4.21-12.105-6.67.402-7.595.756-14.047-7.963-15.983-15.497-1.816-56.357 29.375-65.686 40.25-21.558 22.254-36.796 64.361-19.917 58.911 33.858-15.725 66.363-44.966 87.554-74.555 15.743 7.267 19.68 7.966 20.652 10.702 1.757 4.95-5.582 10.946-19.124 26.962-4.61 4.37-8.672 11.366-2.878 20.74 2.771 3.851 10.456 2.723 10.49 2.747 3.316-.064 49.664-26.267 57.642-44.732 4.887 3.302-.18 14.806-3.542 21.214-2.602 8.463-38.635 34.324-61.18 45.306-24.15 6.876-32.87.385-43.616-18.436-9.737 12.505-23.798 24.234-49.825 32.458-3.6 1.6-7.48 2.579-11.413 2.82z" />
<path id="path5003" d="M527.868 546.775c-5.153-33.052 16.584-54.83 33.15-82.583 5.173-7.51 28.904.211 24.917 3.375-6.54 15.811-25.527 40.359-26.71 57.803-6.274 57.428 49.69-8.278 67.043-35.053 3.858-8.303 15.155-22.627 18.79-31.033 6.71 1.125 14.39 2.273 19.232 7.458-.295 22.092-20.81 42.532-22.576 60.734-.726 6.121-2.253 14.987 5.9 13.94 12.894-2.034 20.831-5.617 28.542-10.719 13.665-9.092 31.566-22.722 37.65-36.232 1.631 1.986 3.517 15.277 1.022 18.403-9.937 24.155-49.662 40.253-57.707 42.886-6.917 2.73-41.389 5.313-48.154-13.843-1.376-2.939-1.225-3.341-2.208-2.427-3.784 3.744-7.97 8.307-23.216 18.734-20.77 11.114-48.322 13.566-55.675-11.443z" />
<path id="path5005" d="M743.508 548.188c-10.444-.074-21.324-4.999-25.497-11.918-3.95-7.139-5.89-15.486-5.823-25.041.077-10.89 1.255-24.213 6.524-38.543 12.2-34.632 34.835-63.291 54.95-93.406 10.887-14.993 21.864-28.686 31.62-39.808 8.595-8.418 33.864-36.465 44.765-36.685 2.888.02 5.322 1.594 7.3 4.719 3.92 6.878 6.51 14.48 6.51 22.047-.844 20.358-8.434 38.841-18.987 55.209-31.565 37.708-53.745 62.1-94.647 96.933-3.153 7.132-6.054 19.29-6.145 21.363-2.225 11.058 1.165 25.668 13.634 25.958 5.555.04 11.24-2.476 17.054-7.546 6.037-5.29 10.323-7.988 15.713-15.95 6.52-13.487 11.875 4.552-9.851 25.93-11.858 11.25-24.231 16.83-37.12 16.738zm19.5-101.134c15.725-16.493 32.287-31.536 46.265-50.75 11.277-14.478 20.466-27.273 27.767-44.475 2.52-7.607 1.359-6.629.087-6.039-11.835 12.627-23.308 29.081-32.09 40.12-17.33 21.679-38.178 55.272-42.03 61.144z" />
</g>
<path id="left-cup-shadow" d="M729.617 278.59c37.29 2.816 72.785 9.128 111.693 2.44 0 0-26.703 14.865-49.42 17.35-31.83 1.43-36.757-5.318-62.273-19.79z" class="bg-layer" />
<path id="left-arm-shadow" d="M770.447 236.587l56.568-60.104 22.476 97.733-3.788 2.272-19.973-93.413c-.338-.397-.723-.518-1.202-.07z" class="bg-layer" />
<path id="top-shadow" d="M820.498 149.53c-4.688.057-9.107.835-13.182 2.456-16.014 10.623-3.305 30.278 2.528 37.881l10.543 9.787c-16.496-23.46-25.067-49.807 4.148-42.498h.002c26.649 10.2 42.15 24.295 58.162 35.87 26.353 21.367 53.252 46.384 77.428 68.064l.084-.31.617.636-29.781 128.842-19.453 99.558 64.027-214.582 13.844 10.301c34.587 22.892 65.424 43.755 104.642 58.75 23.064 8.017 41.06 18.366 55.358-1.605 7.569-10.573-5.299-31.934-14.822-43.215-9.724-11.519-27.117-20.345-30.223-22.02l-.18 3.94c21.182 8.897 36.28 28.57 39.885 39.437 4.736 10.28-3.14 20.307-9.125 22.035-7.554 1.534-23.809-3.335-33.928-9.287-41.983-25.075-81.968-47.86-118.877-80.363v-.004c-5.766-5.405-10.572-8.506-16.205-13.596-29.637-23.83-100.176-90.633-145.492-90.078z" class="bg-layer" />
<path id="right-arm-shadow" d="M1054.464 390.179l61.786-76.25 24.509 111.517h-4.822L1114.822 322.5z" class="bg-layer" />
<path id="right-arm" d="M1145 422.5l5-.179-22.143-100-48.036 49.108 45.179-42.5z" />
<path id="right-cup-shadow" d="M1029.93 435.966l107.834-1.136c-14.583 4.746-27.934 9.697-44.32 14.142-11.029 2.65-21.896 2.776-33.462.758-12.559-3.275-28.244-9.31-30.052-13.764z" class="bg-layer" />
<path id="base-shadow" d="M807.823 503.288c52.544 8.72 114.15 2.886 158.218.311 29.017-3.423 58.186-7.318 81.44-15.968 2.118-1.768 4.503-3.536 1.768-5.304-39.751-14.087-75.74-12.447-117.43-13.89v-4.292c41.913-4.425 69.925-2.657 111.601 1.823 15.864 3.482 22.456 11.374 23.507 17.875-.317 4.583-3.604 8.563-8.334 11.869-50.125 20.263-91.946 19.65-146.472 21.718l-49.75-1.01c-17.782-1.909-35.14-3.856-52.023-9.596z" class="bg-layer" />
<path id="left-cup" stroke-width=".806" d="M728.967 277.838c30.05 2.255 67.175 1.205 97.203 1.33 0 0-28.72 12.614-47.025 14.616-25.648 1.153-29.618-4.285-50.178-15.946z" />
<path id="left-arm" d="M776.792 214.339l40.678-46.545 22.476 97.733L816.679 173c-.375-.45-.837-.511-1.412-.064z" />
<path id="right-cup" d="M1029.93 435.966l107.834-1.136c-14.583 4.746-27.934 5.697-44.32 10.142-11.029 2.65-21.896 2.776-33.462.758-12.559-3.275-28.244-5.31-30.052-9.764z" />
<path id="top" d="M820.498 139.53c-11.162-.205-26.26 1.837-25.58 11.024 3.13-2.637 5.87-12.055 35.085-4.746 46.827 15.09 96.18 74.802 130.124 105.282l.084-.31.617.636-28.283 127.943-20.951 110.457 64.027-224.582 13.844 10.301c34.587 22.892 65.424 43.755 104.642 58.75 23.064 8.017 41.06 18.366 55.358-1.605 7.569-10.573-5.299-31.934-14.822-43.215-9.724-11.519-27.117-20.345-30.223-22.02l-.18 3.94c21.182 8.897 36.28 28.57 39.885 39.437 4.736 10.28-3.14 20.307-9.125 22.035-7.554 1.534-23.809-3.335-33.928-9.287-41.983-25.075-81.968-47.86-118.877-80.363v-.004c-5.766-5.405-10.572-8.506-16.205-13.596-29.637-23.83-100.176-90.633-145.492-90.078z" />
<path id="base" d="M807.823 503.288c52.544 8.72 121.777 7.31 165.845 4.735 29.017-3.423 56.067-13.437 79.321-22.087 22.694-22.56-105.504-17.04-121.17-17.499v-4.292c41.913-4.425 69.925-2.657 111.601 1.823 15.864 3.482 22.456 11.374 23.507 17.875-.317 4.583-3.604 8.563-8.334 11.869-50.125 20.263-91.946 19.65-146.472 21.718l-49.75-1.01c-17.782-1.909-35.14-3.856-52.023-9.596z" />
</svg>
<svg id="color-card" viewBox="0 0 1200 800">
<path fill="#bababa" d="M0 0h168.376v535.183H0z" />
<path fill="#b4c615" d="M168.376 0h168.376v535.183H168.376z" />
<path fill="#20cab7" d="M336.752 0h168.376v535.183H336.752z" />
<path fill="#19d113" d="M505.128 0h177.576v535.183H505.128z" />
<path fill="#9e00a4" d="M681.304 0H855.88v535.183H681.304z" />
<path fill="#0200a0" d="M1024.256 0h180v535.183h-180z" />
<path fill="#9c0007" d="M855.88 0h168.376v535.183H855.88z" />
<path fill="#0000a0" d="M0 535.183h168.376v64.393H0z" />
<path fill="#20cab5" d="M682.704 535.183h173.163v64.393H682.704z" />
<path d="M506.542 535.183h176.063v64.393H506.542z" />
<path fill="#9f00a6" d="M336.752 535.183h170.763v64.393H336.752z" />
<path fill="#000201" d="M168.376 535.183h170.763v64.393H168.376z" />
<path d="M855.88 535.183h170.763v64.393H855.88z" />
<path fill="#b9bbba" d="M1026.643 535.183h173.763v64.393h-173.763z" />
<path d="M644.068 599.256H1200v200.746H644.068z" />
<path fill="#24003c" d="M422.466 599.254h221.601V800H422.466z" />
<path fill="#f4f6f6" d="M200.865 599.254h221.601V800H200.865z" />
<path fill="#020a2c" d="M0 599.254h200.865V800H0z" />
</svg>
<svg id="credits-sequence" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 800">
<defs>
<clipPath id="diamondClip">
<path stroke="#ebfc84" stroke-width="28.367" d="M251.012 404.607L597.18 58.44l313.717 313.717-346.167 346.167z" class="diamond" />
<path stroke="#cb00e8" stroke-width="13.015" d="M277.67 405.135L595.828 86.977 884.16 375.309 566.002 693.467z" class="diamond" />
</clipPath>
<symbol id="diamond">
<path fill="none" stroke="#ebfc84" stroke-width="28.367" d="M251.012 404.607L597.18 58.44l313.717 313.717-346.167 346.167z" class="diamond" />
<path fill="none" stroke="#cb00e8" stroke-width="13.015" d="M277.67 405.135L595.828 86.977 884.16 375.309 566.002 693.467z" class="diamond" />
</symbol>
</defs>
<g id="credit-title" fill="#ecd65a" stroke="#d54c22" stroke-width="2" aria-label="MADE FOR THE WEB BY" class="credits" clip-path="url(#diamondClip)">
<path id="path4915" d="M365.557 443.51H361v-31.9h4.557v4.557h2.279v2.278h2.279v2.279h4.557v-2.279h2.279v-2.278h2.278v-4.558h4.557v31.901h-4.557v-20.507h-2.278v2.278h-2.28v4.557h-4.556v-4.557h-2.28v-2.278h-2.278z" />
<path id="path4917" d="M390.901 429.838h13.672v-6.835h-2.279v-2.28h-2.278v-2.278h-4.558v2.279h-2.278v2.279H390.9zm0 13.672h-4.557v-22.786h2.278v-2.279h2.279v-2.278h2.279v-2.28h2.278v-2.278h4.558v2.279h2.278v2.279h2.279v2.278h2.279v2.279h2.278v22.786h-4.557v-9.114H390.9z" />
<path id="path4919" d="M416.245 416.167v22.786h11.393v-2.279h2.279v-18.229h-2.279v-2.278zm-4.558 27.343v-31.9h18.23v2.278h2.278v2.279h2.279v22.786h-2.279v2.279h-2.278v2.278z" />
<path id="path4921" d="M459.818 411.61v4.557h-18.23v9.114h13.672v4.557H441.59v9.115h18.229v4.557H437.03v-31.9z" />
<path id="path4923" d="M510.505 411.61v4.557h-18.229v9.114h13.672v4.557h-13.672v13.672h-4.557v-31.9z" />
<path id="path4925" d="M529.013 416.167h-9.115v2.278h-2.278v18.23h2.278v2.278h9.115v-2.279h2.279v-18.229h-2.279zm-11.393-2.28v-2.278h13.672v2.279h2.278v2.279h2.279v22.786h-2.279v2.279h-2.278v2.278H517.62v-2.278h-2.279v-2.279h-2.279v-22.786h2.28v-2.28z" />
<path id="path4927" d="M542.964 416.167v9.114h11.393v-2.278h2.278v-4.558h-2.278v-2.278zm2.278 13.671h-2.278v13.672h-4.558v-31.9h18.23v2.278h2.278v2.279h2.279v9.114h-2.279v2.279h-2.279v2.278h-4.557v2.28h2.279v2.278h2.278v2.278h2.279v2.279h2.279v4.557h-4.558v-2.278h-2.278v-2.279h-2.279v-2.279H549.8v-2.278h-2.278v-2.279h-2.279z" />
<path id="path4929" d="M598.208 416.167h-9.114v-4.558h22.786v4.558h-9.114v27.343h-4.558z" />
<path id="path4931" d="M618.995 429.838v13.672h-4.558v-31.9h4.558v13.671h13.672V411.61h4.557v31.901h-4.557v-13.672z" />
<path id="path4933" d="M662.568 411.61v4.557h-18.23v9.114h13.672v4.557H644.34v9.115h18.229v4.557H639.78v-31.9z" />
<path id="path4935" d="M690.469 411.61h4.557v25.064h4.557v-11.393h4.558v11.393h4.557V411.61h4.557v27.344h-2.278v2.279h-2.28v2.278h-4.556v-2.278h-4.558v2.278h-4.557v-2.278h-2.279v-2.279h-2.278z" />
<path id="path4937" d="M738.599 411.61v4.557h-18.23v9.114h13.673v4.557H720.37v9.115h18.229v4.557h-22.787v-31.9z" />
<path id="path4939" d="M745.714 425.281h11.393v-2.278h2.278v-4.558h-2.278v-2.278h-11.393zm-4.558 18.23v-31.902h18.23v2.279h2.278v2.279h2.279v9.114h-2.279v4.557h2.279v9.115h-2.279v2.279h-2.279v2.278zm4.558-4.558h11.393v-2.279h2.278v-4.557h-2.278v-2.279h-11.393z" />
<path id="path4941" d="M796.401 425.281h11.393v-2.278h2.279v-4.558h-2.279v-2.278h-11.393zm-4.557 18.23v-31.902h18.229v2.279h2.279v2.279h2.278v9.114h-2.278v4.557h2.278v9.115h-2.278v2.279h-2.28v2.278zm4.557-4.558h11.393v-2.279h2.279v-4.557h-2.279v-2.279h-11.393z" />
<path id="path4943" d="M830.86 443.51h-4.558v-11.393h-2.279v-2.279h-2.278v-2.278h-2.279v-2.279h-2.279V411.61h4.558v11.394h2.278v2.278h2.28v2.279h4.556v-2.279h2.279v-2.278h2.279v-11.394h4.557v13.672h-2.279v2.279h-2.278v2.278h-2.279v2.28h-2.279z" />
</g>
<g id="credit-name" fill="#ecd65a" stroke="#d54c22" stroke-width="2" aria-label="ROB O'LEARY" class="credits" clip-path="url(#diamondClip)">
<path id="path4946" d="M374.661 482.456v14.323h17.904v-3.58h3.58v-7.162h-3.58v-3.58zm3.581 21.485h-3.58v21.484H367.5v-50.13h28.646v3.58h3.58v3.581h3.581v14.323h-3.58v3.58h-3.581v3.582h-7.162v3.58h3.581v3.581h3.58v3.58h3.582v3.581h3.58v7.162h-7.161v-3.58h-3.58v-3.582h-3.582v-3.58h-3.58v-3.581h-3.581v-3.58h-3.58z" />
<path id="path4948" d="M435.534 482.456H421.21v3.58h-3.58v28.647h3.58v3.58h14.323v-3.58h3.58v-28.646h-3.58zm-17.904-3.58v-3.581h21.485v3.58h3.58v3.581h3.581v35.807h-3.58v3.581h-3.581v3.58H417.63v-3.58h-3.58v-3.58h-3.581v-35.808h3.58v-3.58z" />
<path id="path4950" d="M460.599 496.78h17.904v-3.582h3.58v-7.161h-3.58v-3.58h-17.904zm-7.161 28.645v-50.13h28.645v3.58h3.581v3.581h3.58v14.323h-3.58v7.162h3.58v14.322h-3.58v3.581h-3.58v3.58zm7.161-7.162h17.904v-3.58h3.58v-7.162h-3.58v-3.58h-17.904z" />
<path id="path4952" d="M564.44 482.456h-14.323v3.58h-3.58v28.647h3.58v3.58h14.323v-3.58h3.58v-28.646h-3.58zm-17.904-3.58v-3.581h21.485v3.58h3.58v3.581h3.581v35.807h-3.58v3.581h-3.581v3.58h-21.485v-3.58h-3.58v-3.58h-3.581v-35.808h3.58v-3.58z" />
<path id="path4954" d="M603.828 475.295v10.742h-3.58v3.58h-3.581v-3.58h-3.581v-10.742z" />
<path id="path4956" d="M625.313 525.425v-50.13h7.161v42.968h28.646v7.162z" />
<path id="path4958" d="M704.089 475.295v7.161h-28.646v14.323h21.484v7.162h-21.484v14.322h28.646v7.162H668.28v-50.13z" />
<path id="path4960" d="M718.411 503.94h21.485v-10.742h-3.58v-3.58h-3.582v-3.581h-7.161v3.58h-3.58v3.581h-3.582zm0 21.485h-7.161v-35.807h3.58v-3.581h3.581v-3.58h3.581v-3.582h3.58v-3.58h7.162v3.58h3.581v3.581h3.58v3.58h3.582v3.582h3.58v35.807h-7.161v-14.323H718.41z" />
<path id="path4962" d="M761.38 482.456v14.323h17.904v-3.58h3.58v-7.162h-3.58v-3.58zm3.581 21.485h-3.58v21.484h-7.162v-50.13h28.646v3.58h3.58v3.581h3.581v14.323h-3.58v3.58h-3.581v3.582h-7.162v3.58h3.58v3.581h3.582v3.58h3.58v3.581h3.581v7.162h-7.161v-3.58h-3.581v-3.582h-3.58v-3.58h-3.582v-3.581h-3.58v-3.58h-3.581z" />
<path id="path4964" d="M818.672 525.425h-7.162V507.52h-3.58v-3.58h-3.581v-3.581h-3.58v-3.581h-3.581v-21.484h7.161v17.903h3.58v3.581h3.581v3.58h7.162v-3.58h3.58v-3.58h3.581v-17.904h7.162v21.484h-3.58v3.58h-3.582v3.582h-3.58v3.58h-3.581z" />
</g>
<use id="diamondUse" xlink:href="#diamond" />
</svg>
</div>
</div>* {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100dvh;
margin: 0;
background-color: black;
}
#title-container {
position: relative;
overflow: hidden;
width: 100%;
max-width: 1920px;
aspect-ratio: 1920/ 1080;
filter: blur(10px);
}
#background {
height: 100%;
}
#animatable-background,
#title,
#color-card,
#credits-sequence {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#animatable-background {
opacity: 0.5;
}
#title {
opacity: 0;
filter: blur(1px);
}
#color-card,
#credits-sequence {
opacity: 0;
}
let tl1 = new TimelineMax();
let tl2 = new TimelineMax();
// for lady liberity swaying in background
tl1.to("#animatable-background", {
duration: 0.75,
delay: 1,
repeat: 20,
yoyo: true,
x: 3,
y: 1,
ease: "power2.in",
});
// main animation
tl2.set(".diamond", { transformOrigin: "center", scale: 0 });
tl2.to("#title-container", {
duration: 2,
filter: "blur(0px)",
ease: "power2.inOut",
});
tl2.to("#title", {
delay: 1,
duration: 0.1,
opacity: 1,
});
tl2.to(".bg-layer", {
duration: 0.25,
repeat: 12,
yoyo: true,
x: 2,
ease: "power2.in",
});
tl2.to(".bg-layer", {
duration: 0.3,
opacity: 0,
ease: "power2.in",
});
tl2.to("#title", {
duration: 0.2,
filter: "blur(0)",
ease: "power2.in",
});
tl2.to("#title", {
delay: 0.3,
duration: 0.1,
opacity: 0,
});
tl2.to("#color-card", {
duration: 0.1,
opacity: 1,
});
tl2.to("#color-card", {
delay: 0.1,
duration: 0.1,
opacity: 0,
});
tl2.to("#diamondUse", {
duration: 0.1,
opacity: 1,
});
tl2.to("#credits-sequence", {
duration: 0.1,
opacity: 1,
});
tl2.to(".diamond", {
duration: 2,
scale: 5,
ease: "power4.out",
});
tl2.to("#credit-name", {
delay: 0.5,
duration: 0.3,
opacity: 0,
repeatDelay: 1,
repeat: 3,
yoyo: true,
ease: "power2.in",
});
let container = document.getElementById("title-container");
container.addEventListener("click", replay);
function replay() {
tl2.restart();
tl1.restart();
}
External CSS
This Pen doesn't use any external CSS resources.