Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                /*
Click the title to restart animation.

Part of Title Sequences collection:
https://codepen.io/collection/nNmwgP

Source code:
https://github.com/robole/title-sequences
*/

* {
  box-sizing: border-box;
}

:root {
  --width: calc(100% - 10px);
}

body {
  width: 100%;
  margin: 0;
}

#title-container {
  position: relative;
  overflow: hidden;
  width: var(--width);
  margin: 10px 5px;
  filter: blur(10px);
}

#background {
  width: 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;
}

@media screen and (min-width: 1000px) {
  #title-container {
    width: 1000px;
    margin: 5px auto;
  }
}

              
            
!

JS

              
                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();
}

              
            
!
999px

Console