Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

Save Automatically?

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 class="lettering">

<svg class="welcome isVisible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 300">
  
  <!--
  <path fill="#d35f5f" d="M-.00001 0h749.99998v300H-.00001z"/>
  -->
  
  <g class="letters" id="lettering-welcome" mask="url(#mask-)" fill="#c83737" font-family="Sandra Belhock" font-size="25.4" font-weight="400" letter-spacing="0" word-spacing="0">
    
    <path id="letter-welcome-w" mask="url(#mask-welcome-w)" style="line-height:1.25;-inkscape-font-specification:'Sandra Belhock, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre" d="M203.82021583 36.53798207q1.66866284-.71514116 3.33732568-.71514116 3.33732568-.47676077 5.95951014.47676077 2.62218446.95352155 5.24436892 2.38380387 4.0524669 2.14542348 6.91303176 4.76760773 2.86056487 2.38380387 5.48274933 5.4827489 10.72711824 12.1573997 14.77958514 25.74508174 4.2908473 13.34930165 2.86056486 28.60574024-1.43028243 12.63406664-4.2908473 24.79146636-2.86056486 11.91901933-6.67465135 24.0765129-2.86056487 9.5351216-5.95951014 18.5935763-3.09894527 9.05845469-6.91303176 18.11700323-2.38380405 4.76751388-5.00598851 9.77359585-2.38380406 4.76760773-5.95951014 9.29674122-1.90704324 2.38380387-3.81408649 4.5293212-1.90704324 2.38380386-4.2908473 4.2907531-5.72112973 4.05256043-11.68063987 3.5757058-5.72112973-.23838038-10.72711824-5.2443685-2.38380406-1.9070431-4.0524669-4.29084696-1.43028243-2.38380386-2.62218446-5.00598812-4.2908473-8.8200743-5.48274932-19.30871746-.71514122-5.95950966-.95352163-11.91901933-.2383804-6.19789005.47676081-12.39587395.23838041-1.19180808 0-2.38380387v-2.86056464q-1.66866283.2383804-2.14542365 1.43037617-.4767608.9534277-.95352162 1.90694925-4.7676081 7.62817237-9.29683581 15.01796435-4.5292277 7.1514116-9.29683582 14.77958397-2.62218446 4.05246657-5.24436892 8.34331353-2.38380405 4.05246657-5.24436892 8.10493314-2.86056486 4.29084696-6.43627095 7.86655276-1.19190202 1.19190193-2.38380405 2.14542348l-2.38380406 1.9070431q-4.7676081 2.86056463-9.53521622 1.90704309-4.7676081-.71514116-7.62817297-5.2443685-1.19190203-1.9070431-2.14542365-4.05246658-.71514122-1.9070431-1.19190203-4.05246657-1.19190203-5.2443685-.95352162-10.01197624.4767608-5.00598812 1.66866284-10.25035662 4.05246689-18.59367016 12.39578108-35.5186776 8.3433142-16.92500745 20.73909528-32.65811297 3.81408649-5.00598811 8.10493379-9.77359585 4.2908473-4.76760773 8.820075-9.53521546 2.62218446-2.62218425 5.48274933-4.76760773 2.86056486-2.38380387 5.72112973-4.52922735 1.43028243-1.19190193 3.09894527-1.90704309 1.66866284-.71514116 3.57570608-1.43028232 1.43028244-.47676077 2.86056487-.23838038 1.66866284 0 2.86056487 1.19190193 1.90704324 1.9070431-.95352163 5.00598812l-1.66866283-2.38380387q-1.90704325.95352155-2.62218446 1.6686627-2.62218447 2.38380387-5.48274933 4.76760774-2.62218446 2.14542348-5.00598852 4.76760773-8.5816946 9.53521546-15.25634595 19.78557209-6.43627095 10.25035662-11.44225946 21.69261518-11.20387906 22.8845171-16.20986758 47.19931654-.4767608 3.33732541-.95352162 6.91303121-.2383804 3.33732541-.71514122 6.67465082v2.14542348q.23838041.95352155 1.66866284 1.66866271 2.14542365-1.19190193 3.8140865-2.86056464 1.66866283-1.9070431 2.86056486-3.81408618l9.29683581-14.06444281q8.3433142-15.01796436 17.87853041-29.08240717 9.53521622-14.0644428 19.07043244-28.60564639l1.90704325-2.38380386q2.62218446-2.86056464 5.95951014-1.6686627 3.33732567.47676077 3.81408648 3.5757058.23838041 1.19190192 0 2.38380386v2.38380386l-1.43028243 5.2443685q-.47676081 2.62218426-.71514122 5.24436851-.71514121 5.4827489-1.19190202 11.44225856-.47676081 5.72112928-.95352162 11.20387817-.47676082 6.67465082 0 13.34930165.71514121 6.43627043 2.14542364 13.34930165.71514122 3.3373254 1.90704325 6.67465082 1.43028243 3.09894502 3.33732568 6.19789005.95352162 1.19190193 1.90704324 2.14542348.95352162 1.19190193 2.62218446 1.9070431 1.66866284.23838038 2.62218446-.47676078 1.19190203-.71514116 2.38380406-1.6686627 1.66866283-1.9070431 3.33732567-4.05246658 1.90704325-2.14542348 3.57570609-4.52922734 3.57570608-5.4827489 5.95951013-11.20387817 2.62218446-5.95950967 4.76760811-11.91901933 6.19789055-16.92500745 10.96549866-33.8500149 4.7676081-17.16338783 8.10493378-35.04191682 1.19190203-7.38979199 1.66866284-14.54120359.47676081-7.38979198-.95352162-15.01796435-1.90704324-9.53521546-6.91303176-17.6401486-4.76760811-8.10493315-12.15740068-15.01796436-3.57570608-2.86056464-9.0584554-5.4827489-1.19190204-.23838038-2.14542366-.71514115-.95352162-.71514116-1.90704324-1.19190194z"/>
    
    
        <path id="letter-welcome-e" mask="url(#mask-welcome-e)" style="line-height:1.25;-inkscape-font-specification:'Sandra Belhock, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre" d="M305.26140194 164.30996313c-3.6551975 7.4692834-8.1844252 14.620695-13.58768312 21.4542348-5.4032579 6.83353979-11.52175088 12.39568624-18.35529122 16.68662705-2.70167588 1.74815412-5.64163831 3.09894503-8.820075 4.05246657-3.01945386.79491413-6.27738197.95352155-9.77359663.47676078-7.9460448-.95352155-13.42879413-4.76760773-16.44824798-11.44225856-3.17843669-6.67465082-3.57570608-13.82606242-1.19190203-21.4542348 2.38380406-7.78706134 6.59515994-14.70009255 12.6341615-20.73909362 3.17843669-3.17843644 6.67465135-5.32385992 10.48873784-6.43627044 3.6551975-1.27139335 7.07192074-1.27139335 10.25035743 0 3.1784367 1.27139334 5.48274933 3.65519721 6.91303176 7.1514116 2.70167588 6.8335398 1.27139345 12.63416048-4.2908473 17.40176822-3.17843669 2.86056464-6.59515993 5.40325748-10.25035743 7.62817237-3.6551975 2.22491489-7.62817298 3.97297516-11.91902028 5.2443685-1.27139344.31815335-2.14542365.6353682-2.62218446.95352155-.63536824 4.9264967.71514122 8.58169392 4.0524669 10.96549778 3.49621466 2.38380387 8.02544236 2.94005605 13.58768311 1.6686627 3.97297547-1.58917129 7.62817298-3.81408618 10.96549865-6.67465082 3.33732568-2.86056464 6.43627095-5.95950966 9.29683582-9.29683507 3.01945385-3.33732542 5.72112973-6.8335398 8.10493378-10.48873701 2.54269305-3.65519721 4.84709953-7.23090301 6.91303176-10.7271174.95352163-1.5891713 1.90704325-2.78107323 2.86056487-3.5757058.95352162-.95352154 1.7289149-1.35370027 2.2056757-1.03582847.63536825.15860742.8136843.95633706.65507687 2.2277304 0 1.27139335-.55653378 3.257834-1.66866284 5.95950967zm-55.78101489 11.6805451c.95352162 0 1.58917142-.07508045 1.90704324-.2383804 1.74815426-1.27139334 3.49621467-2.38380386 5.24436892-3.3373254 1.74815426-1.11241053 3.49621467-2.30431246 5.24436893-3.5757058.95352162-.79491413 1.82755182-1.5891713 2.62218446-2.38380387l2.38380405-2.86056464c1.27139345-1.5891713 1.58917142-3.33732541.95352162-5.2443685-.4767608-1.74815412-1.82755182-2.38380387-4.05246689-1.9070431-.95352162.15860742-1.82755183.55653374-2.62218446 1.19190193-2.70167588 1.74815412-5.24436892 4.37033838-7.62817298 7.86655276-2.22491506 3.33723156-3.57570608 6.83344595-4.05246689 10.48864316z"/>
    
    <path id="letter-welcome-l" mask="url(#mask-welcome-l)" style="line-height:1.25;-inkscape-font-specification:'Sandra Belhock, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre" d="M320.75922536 208.17186041c-1.58917142 1.27139335-3.17843669 2.38389772-4.7676081 3.33732541-5.24436893 3.17843644-10.40924643 4.05246657-15.49472636 2.62218425-5.08547994-1.43018846-8.820075-4.76751388-11.20387906-10.01188238-1.27139345-2.8606585-2.14542365-5.72122313-2.62218446-8.58169392-.47676081-2.86065849-.79491419-5.80062069-.95352163-8.8200743.47676082-8.42280494 1.35079102-18.1964008 2.62218447-29.32078755 1.27139344-11.28336958 3.01945385-22.40775634 5.24436892-33.37325412 2.22491506-11.12448061 4.9264971-21.45432865 8.10493378-30.98954411 3.33732568-9.69410444 7.23090359-17.24287925 11.68063987-22.64613672 1.90704325-2.2249149 4.0524669-3.257834 6.43627095-3.09894503 2.54269304 0 4.76760811 1.19190193 6.67465136 3.5757058 1.58917142 2.06593207 2.70167588 4.21135554 3.33732567 6.43627044.63536825 2.22491489 1.03301304 4.52922734 1.19190203 6.9130312.31815338 3.8140862.2383804 7.62817238-.2383804 11.44225856-.47676082 3.81408619-1.11241061 7.54877481-1.90704325 11.20397202-.79491419 3.17834259-1.58917142 6.43617659-2.38380405 9.773502-.7949142 3.17843644-1.74815426 6.35687288-2.86056487 9.53530932-2.70167588 7.62817237-5.56224075 15.09745576-8.5816946 22.40775633-2.86056486 7.15131775-6.43627095 14.30272935-10.72711825 21.4542348-.79491418 1.27139334-1.66866283 2.62218425-2.62218446 4.05246657-.79491418 1.43018847-1.74815425 2.78107323-2.86056486 4.05246657-1.74815426 2.06593207-2.54269304 4.37033837-2.38380406 6.91303121.31815338 2.06593207.55653378 4.13195799.71514122 6.19789005.15860743 1.9070431.39698784 3.8935776.71514122 5.95950967.15860743.79491412.39698784 1.5891713.71514121 2.38380386.31815338.6353682.63536825 1.35079091.95352162 2.14532963 1.58917142 2.70167567 3.89357791 3.73468863 6.91303176 3.09894503 1.11241061-.31815335 2.22491507-.6353682 3.33732568-.9534277 1.1124106-.31815335 2.06593223-.79491412 2.86056487-1.43037617 1.74815425-1.5891713 3.49621466-3.17834259 5.24436892-4.76751388 1.90704324-1.5891713 3.57570608-3.257834 5.00598851-5.00598812 1.58917142-2.06593206 3.25783426-4.37033837 5.00598852-6.9130312 1.90704324-2.5427867 3.73459507-5.16497095 5.48274933-7.86655277 1.74815425-2.86056463 3.49621466-5.5622403 5.24436892-8.10493314 1.74815425-2.70167566 3.4168171-5.08547953 5.00598851-7.1514116 1.43028244.6353682 2.06593223 1.9865345 1.90704325 4.05246657-.15860744 2.06593207-.87374866 4.52922735-2.14542365 7.38979199-1.11241061 2.86056464-2.70167588 5.95950966-4.76760811 9.29683508-2.06593223 3.33723156-4.21135588 6.59506556-6.43627095 9.773502-2.06593223 3.17843643-4.13195831 6.11849248-6.19789055 8.8200743-2.06593223 2.70167566-3.81408648 4.76770158-5.24436892 6.19789005zm-1.43028243-132.06273417c-3.49621466 6.35687288-6.35677953 13.26990409-8.5816946 20.73909364-2.22491507 7.4692834-4.13195831 15.17685332-5.72112973 23.1228975-1.43028243 7.78706134-2.62218446 15.6536141-3.57570608 23.59965827-.95352162 7.78706134-1.98653466 15.17685332-3.09894527 22.16937595 2.54269304-4.44973593 5.08547993-9.53521547 7.62817297-15.25634474 2.54269304-5.88001826 4.9264971-11.91901933 7.15141217-18.11690938 2.22491507-6.19789005 4.13195831-12.3162887 5.72112973-18.35528977 1.58917142-6.19789005 2.70167588-11.83952792 3.33732568-16.92500745.79491418-5.08547953.95352162-9.45572405.4767608-13.11092126-.31815337-3.81408619-1.43028243-6.43627044-3.33732567-7.86655276z"/>
  
<path id="letter-welcome-c" mask="url(#mask-welcome-c)" style="line-height:1.25;-inkscape-font-specification:'Sandra Belhock, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre" d="M404.47410665 154.53636728q.71514122.71514116.71514122 2.14532963 0 1.43037617-.47676081 3.33732541-.2383804 1.6686627-.71514122 3.33732541-.47676081 1.6686627-1.19190203 2.86056464-3.33732567 6.19789005-8.10493378 12.39587395-4.5292277 5.95941582-10.48873785 10.72702355-5.95951013 4.52922734-13.3493027 7.38979198-7.38979258 2.62218426-16.68662839 2.14542348-6.19789054-.47676077-10.96549865-5.2443685t-5.72112974-10.7271174v-3.33732541q0-4.52922735 1.90704325-9.05845469 1.90704324-4.76760773 4.7676081-8.8200743 3.09894528-4.05246658 7.15141217-7.1514116 4.0524669-3.33732541 8.820075-5.2443685 2.62218447-1.19190194 5.24436893-1.43028233 2.86056486-.47676077 5.72112973 0 9.05845541 1.43028232 6.91303176 9.53521547-1.19190203 3.81418003-3.33732568 6.91312506-2.14542365 2.86056464-6.19789054 4.76751388-.2383804.23838039-1.90704324.71514116-.47676081 0-.95352163-.23838039-.2383804-.23838038-.95352162-.47676077.71514122-1.6686627 1.66866284-3.09894503 1.19190203-1.66856885 2.14542365-3.09894502 1.19190203-1.66856886 1.90704324-3.5757058.71514122-1.90694924.23838041-4.05237272h-2.86056487q-1.19190202-.23838039-2.38380405.23838039-4.0524669 1.19180808-7.38979257 4.05237272-3.33732568 2.86056464-5.95951014 6.43627043-2.38380405 3.5757058-3.57570608 7.62817238-1.19190203 3.81408618-.71514122 7.62817237 1.19190203 7.1514116 8.820075 7.86655275 8.3433142.47676078 15.97148717-3.5757058 7.62817298-4.05246657 13.82606352-9.77359585 6.19789055-5.95950966 10.72711825-11.91901932 4.76760811-5.95950967 7.38979257-9.29674123z"/>
    
    <path id="letter-welcome-o" mask="url(#mask-welcome-o)" style="line-height:1.25;-inkscape-font-specification:'Sandra Belhock, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre" d="M434.30910371 183.85715483l-2.86056487 8.34331353q-1.19190202 3.33732541-3.09894527 6.67455697-1.90704324 3.09894503-4.7676081 5.72112928-3.09894528 2.86056464-6.67465136 4.29094081-3.57570608 1.43018847-8.3433142 0-8.5816946-2.86056464-10.48873784-11.68063894-1.43028243-6.91312506 1.19190203-14.06444281.47676081-1.9070431 1.19190203-3.5757058l1.43028243-3.81408618q-.71514122-1.19190194-1.66866284-2.14542348-.95352162-.95352155-1.66866284-2.14542348-5.72112973-8.10493315 1.43028244-15.25634474 6.19789054-5.72112928 14.77958514-6.43627044 6.43627095-.47676078 11.20387906 2.38380386 4.7676081 2.62218426 7.15141216 8.10493315.71514122 1.90704309.95352162 3.5757058.47676082 1.6686627.95352163 3.5757058l.4767608 7.38979198q3.09894528 0 4.2908473-.23838039 5.72112974-1.9070431 10.72711825-4.52922734 5.00598852-2.62218426 9.77359663-5.95950967 1.19190203-.95352154 2.14542365-1.6686627 1.19190203-.95352155 2.62218446-1.9070431.71514122-.47676077 1.66866284-.47676077.95352162-.23838039 2.14542365-.71514116 0 1.19190193.2383804 1.9070431.2383804.71514115-.2383804 1.19190193l-2.86056487 3.81408618q-1.19190203 1.6686627-3.09894527 3.09894503-6.19789054 4.76760773-13.1109223 8.8200743-6.67465136 4.05246657-15.49472636 5.72112928zm-27.89050744-15.49481898l5.72112973-.95352155q.2383804 1.43028232.2383804 2.6222781.2383804.9534277.2383804 2.14532964 3.09894528 1.19190193 4.76760812 1.90704309 1.90704324.47676077 3.33732568.71514116 1.43028243.23838038 2.62218446.23838038 1.43028243 0 3.33732567-.47676077.47676081-2.62218425.2383804-5.2443685 0-2.86056464-1.19190202-5.4827489-3.09894527-7.38979198-11.91902027-5.95950966-4.2908473.71514116-7.15141217 3.33732541-1.90704324 1.6686627-2.14542365 3.09894503 0 1.19190193 1.90704325 4.05246657zm18.11691081 15.49481898l-7.86655338-2.14551733q-1.90704324-.47676077-3.81408649-1.19180808-1.66866283-.71514116-4.2908473-.71514116-1.19190202 3.3373254-1.90704324 6.43627043-.71514121 3.09894503-.2383804 6.43627044.2383804 2.86056464 2.38380405 6.1977962.95352162 1.19190194 2.38380406 1.6686627 1.66866283.2383804 2.86056486-.71514115 3.33732568-1.66856886 5.00598852-4.05237272 4.5292277-4.76770158 5.48274932-11.91901933z"/>
    
    <path id="letter-welcome-m" mask="url(#mask-welcome-m)" style="line-height:1.25;-inkscape-font-specification:'Sandra Belhock, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre" d="M465.74246954 185.04896291q2.62218446-1.19180808 3.8140865-2.62218425 1.43028242-1.66856886 2.62218445-3.09894503 9.05845541-10.48864316 21.2158561-19.30871746l3.09894526-2.14542348q4.76760811-2.38380386 7.86655338 1.9070431 2.14542365 3.3373254 2.14542365 7.1514116l-.71514121 15.7331055-.71514122 5.95950967q1.43028243.71514116 2.14542365.23838039.71514122-.71514116 1.19190203-1.19199579l11.20387906-12.87244702q1.19190202-1.19199578 2.38380405-2.38380387 1.43028243-1.43037617 2.86056487-2.62218425 1.90704324-1.19199578 3.81408649-.71514116 2.14542365.23838039 3.33732567 2.14532963.47676081 1.19199578.71514122 2.62218425.2383804 1.43037617.71514122 2.86056464.95352162 2.86056464 1.43028243 5.95950967.71514122 2.86056463 1.90704324 5.95950966.47676081 1.9070431 1.43028244 3.5757058.95352162 1.43028232 2.14542365 3.09894502 3.09894527 4.05246658 7.62817297 1.66866271 4.76760811-2.38380387 9.05845541-6.91303121 4.5292277-4.52922735 8.3433142-10.25035662 4.05246689-5.72112928 7.38979256-11.68063895 3.33732568-6.19789005 5.72112974-11.44225855 1.43028243-.95352155 1.90704324-.71514116.71514122.23838038.95352162 1.19190193.47676081.9536154.47676081 2.38380387v2.14542348q.47676081 5.48284274-3.33732567 12.87254087-3.8140865 7.1514116-9.53521622 13.82606242-5.48274933 6.43627044-11.20387906 11.44225856-5.48274933 4.76760773-8.5816946 5.4827489-4.2908473 2.14542347-8.5816946.47676076-4.0524669-1.90694924-7.62817298-5.2443685-5.00598851-5.2443685-7.62817297-12.63416049l-.95352162-2.38380387q-.47676081-1.43028232-.95352163-2.62218425-1.43028243-.47676077-2.14542364.47676078-.47676082.71514115-.95352163 1.19190193-2.38380405 2.62218425-4.5292277 5.48274889-2.14542365 2.86056464-4.5292277 5.72112928-.95352163 1.19190193-2.14542366 2.38380386-.95352162.95352155-2.38380405 2.14542348-2.62218446 1.9070431-5.48274933 1.6686627-2.86056486-.47676076-4.7676081-3.09894502-.95352163-1.19190193-1.43028244-2.38380386-.47676081-1.43028232-.95352162-2.62218426-1.19190203-3.3373254-1.19190203-6.67465082.2383804-3.5757058.71514122-6.91303121.2383804-2.62218425.2383804-4.76760773.2383804-2.38380387.71514122-4.76760773 0-.71514116-.2383804-1.43028232 0-.71514116-.23838041-1.9070431-1.19190203.71514116-2.14542365 1.19190194l-1.43028243.95352154-6.19789055 5.72112928q-2.86056486 2.62218425-5.72112973 5.72112928-3.09894527 3.5757058-5.95951014 7.1514116-2.62218446 3.5757058-5.72112973 7.38979198-.95352162 1.19190193-1.90704324 2.14542348-.71514122.95352155-1.90704325 1.9070431-2.62218446 2.14542347-5.48274932 1.43028231-2.86056487-.71514116-4.0524669-3.81408618-.71514121-1.6686627-.71514121-4.05246657.2383804-1.9070431.4767608-3.5757058.23838041-1.9070431.71514122-3.81408619 1.66866284-6.19789005 4.0524669-11.91901933 2.14542365-5.72112928 5.00598851-11.20387817 1.19190203-1.90704309 2.62218446-3.5757058l2.86056487-3.81408618q.47676081-.47676077 1.43028243-.47676077.95352162-.2383804 1.43028243 0 1.43028244.47676077 1.43028244 2.14542347 0 1.9070431-.71514122 4.05246658l-5.72112973 20.50071324z"/>
    
    <path id="letter-welcome-e2" mask="url(#mask-welcome-e2)" d="M637.39738403 164.30996313c-3.6551975 7.4692834-8.1844252 14.620695-13.58768311 21.4542348-5.40325791 6.83353979-11.52175089 12.39568624-18.35529123 16.68662705-2.70167588 1.74815412-5.64163831 3.09894503-8.820075 4.05246657-3.01945385.79491413-6.27738196.95352155-9.77359663.47676078-7.9460448-.95352155-13.42879412-4.76760773-16.44824798-11.44225856-3.17843669-6.67465082-3.57570608-13.82606242-1.19190202-21.4542348 2.38380405-7.78706134 6.59515993-14.70009255 12.63416149-20.73909362 3.17843669-3.17843644 6.67465135-5.32385992 10.48873784-6.43627044 3.6551975-1.27139335 7.07192075-1.27139335 10.25035744 0 3.17843669 1.27139334 5.48274932 3.65519721 6.91303176 7.1514116 2.70167587 6.8335398 1.27139344 12.63416048-4.2908473 17.40176822-3.1784367 2.86056464-6.59515994 5.40325748-10.25035744 7.62817237s-7.62817298 3.97297516-11.91902028 5.2443685c-1.27139344.31815335-2.14542364.6353682-2.62218446.95352155-.63536824 4.9264967.71514122 8.58169392 4.0524669 10.96549778 3.49621466 2.38380387 8.02544237 2.94005605 13.58768311 1.6686627 3.97297548-1.58917129 7.62817298-3.81408618 10.96549865-6.67465082 3.33732568-2.86056464 6.43627095-5.95950966 9.29683582-9.29683507 3.01945385-3.33732542 5.72112973-6.8335398 8.10493379-10.48873701 2.54269304-3.65519721 4.84709953-7.23090301 6.91303176-10.7271174.95352162-1.5891713 1.90704324-2.78107323 2.86056486-3.5757058.95352162-.95352154 1.94439577-1.84012765 2.42115658-1.52225585.63536824.15860742.59782802 1.44276444.43922059 2.71415778 0 1.27139335-.55653378 3.257834-1.66866284 5.95950967zm-55.78101489 11.6805451c.95352162 0 1.58917142-.07508045 1.90704325-.2383804 1.74815425-1.27139334 3.49621466-2.38380386 5.24436892-3.3373254 1.74815425-1.11241053 3.49621466-2.30431246 5.24436892-3.5757058.95352162-.79491413 1.82755182-1.5891713 2.62218446-2.38380387l2.38380405-2.86056464c1.27139345-1.5891713 1.58917142-3.33732541.95352163-5.2443685-.47676082-1.74815412-1.82755183-2.38380387-4.0524669-1.9070431-.95352162.15860742-1.82755182.55653374-2.62218446 1.19190193-2.70167588 1.74815412-5.24436892 4.37033838-7.62817297 7.86655276-2.22491507 3.33723156-3.57570609 6.83344595-4.0524669 10.48864316z" style="line-height:1.25;-inkscape-font-specification:'Sandra Belhock, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre"/>
  
  </g>
  
  
  
  
  

  <g class="masks" id="masks-welcome" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round">
    
    <mask id="mask-welcome-w">
    <path class="mask" stroke-width="1.85208" d="M198.14462 608.12461c8.25335 3.53032.43628 19.38944-1.04406 19.27899-2.61522-1.19561-2.41917-5.14392-1.52134-9.77939-3.31812 5.87611-5.5138 9.47626-7.03273 9.9455-2.07317-5.27084 5.12345-13.92537 6.49933-14.0603" transform="matrix(9.38506 0 0 9.38505 -1652.44068148 -5671.45982138)"/>  
    </mask>
  
  <mask id="mask-welcome-e">
  <path class="mask" stroke-width="1.32292" d="M202.42241 623.79003c.20804-.0189 3.59242-1.54725 2.57999-2.90713-.87827-1.17968-2.00276.15984-2.6447 1.22828-.5171.86065-1.18508 3.02335.66301 3.76259 1.98111.79246 5.75491-4.69355 5.75491-4.69355" transform="matrix(9.38506 0 0 9.38505 -1652.44068148 -5671.45982138)"/>
  </mask>
    
  <mask id="mask-welcome-l">
  <path class="mask" stroke-width="1.32292" d="M207.40931 623.15336s.50666.13603 2.40771-4.32607c1.87366-4.3978 1.41288-7.22352.49412-6.86604-1.36551.5313-2.63785 6.09121-3.05368 10.62918-.80851 8.8233 5.24721.85445 5.63329-.52121" transform="matrix(9.38506 0 0 9.38505 -1652.44068148 -5671.45982138)"/>
  </mask>
    
    <mask id="mask-welcome-c">
    <path class="mask" stroke-width="1.32292" d="M215.02897 622.37401s1.45434-1.01063.89554-1.79805c-.5588-.7874-3.69638.96642-3.39348 2.8078.73865 3.32892 4.92384.76711 6.66354-2.02575" transform="matrix(9.38506 0 0 9.38505 -1652.44068148 -5671.45982138)"/>
    </mask>
      
      
  <mask id="mask-welcome-o">
  <path class="mask" stroke-width="1.32292" d="M219.90291 622.0762s-1.84625 3.5972-.0884 3.91557c1.92081.34788 2.2977-2.94826 2.2977-2.94826s.42399-1.6106-.9689-2.20081c-1.97085-.8351-2.81487 1.14049-2.21466 1.77172.60887.64032 1.54382 1.10616 2.92056.91357 1.59422-.22302 4.18192-1.91598 4.18192-1.91598" transform="matrix(9.38506 0 0 9.38505 -1652.44068148 -5671.45982138)"/>
  </mask>
    
  <mask id="mask-welcome-m">
  <path class="mask" stroke-width="1.45521" d="M225.94762 620.94139c-.0939.68592-1.31334 5.5356-1.19408 4.87416.081-.44907 3.78555-4.87957 4.38478-4.24776.68248.71958-.16572 4.4197.0196 4.30647 0 0 3.30447-3.76902 3.19071-3.19072-.24647 1.25288 1.17025 3.36431 1.76174 3.22988 2.14331-.62494 3.05016-2.62678 3.95413-4.91332" transform="matrix(9.38506 0 0 9.38505 -1652.44068148 -5671.45982138)"/>
  </mask>
     
  <mask id="mask-welcome-e2">
  <path class="mask" stroke-width="1.32292" d="M237.81229 623.79003c.20804-.0189 3.59242-1.54725 2.57999-2.90713-.87827-1.17968-2.00276.15984-2.6447 1.22828-.5171.86065-1.18508 3.02335.66301 3.76259 1.98111.79246 5.75491-4.69355 5.75491-4.69355" transform="matrix(9.38506 0 0 9.38505 -1652.44068148 -5671.45982138)"/>
  </mask>
    
  </g>  
    
  </svg>
  
</div>
			

<a class="button">Please Wait...</a>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
body { 
  font-family: "Signika Negative", sans-serif; 
  font-weight: 300;
  margin: 0;
  padding: 0;
  overflow: hidden;
}





.lettering {
  position: relative;

  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0 !important;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


@media screen and (min-width:600px) {
  .lettering {
    top: 0;
  }
}

@media screen and (min-width:900px) {
  .lettering {
    top: 0;
  }
}





.lettering svg {
  float: left;
  max-width: 100%;

  position: absolute;
  display: block;
  top: calc(50vh - 125px) !important;
  left: calc(50vw - 375px) !important;
  border-radius: 5px;  
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.2));
  
  width: 750px;
}

.lettering .welcome,
.lettering .home,
.lettering .buddy {
  cursor: pointer;
  fill: #d83e00;
  position: absolute;
  left: 370px;
  top: 0;
  visibility: hidden;
  opacity: 0;
  height: 250px;

  background-color: #fff;
}





.lettering .welcome .mask,
.lettering .home .mask,
.lettering .buddy .mask {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;  
}










a.button {
  position: absolute;
  left: calc(50vw - 125px);
  bottom: 25px;
  width: 250px;
  height: 50px;
  background-color: #f0f0f0;
  border-radius: 5px;
  border: 2px solid teal;
  cursor: pointer;
  z-index: 999;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 20px;
  color: teal;
  text-transform: uppercase;
}

a.button.blocked {
  color: #808080;
  border: 2px solid #808080;
  cursor: no-drop;
}

a.button.stop {
  color: firebrick;
  border: 2px solid firebrick;
  cursor: pointer;
}
              
            
!

JS

              
                
// Clicked
// First off just setting up the scene
$('a.button').addClass('blocked');
$('a.button').text( "Please wait..." );
gsap.set('.lettering svg.isVisible', { autoAlpha: 1 });	


// Applying the animation to the mask, so the actual text gets revealed
// This is done with GSAP's drawSVG Plugin

// First we set it up, so the masks hide the letters
gsap.set(".lettering svg:first-of-type g.masks path", { drawSVG: 0 });

// Then we animate each mask's path to reveal the letters - done with stagger
// The stagger is set to each and the same amount as the animation for each letter-mask itself
// This way the next letter gets revealed when the one before finishes

var animation = gsap.to('svg.isVisible g.masks path', { drawSVG: "100%", duration: 0.3, stagger: { each: 0.25, from: "start", }, onComplete:function() {	
  $('a.button').on('click', animateFunction);
  $('a.button').removeClass('blocked');
  $('a.button').text( "Re-Run" );
} }); 





// Just the function for clicky button
function animateFunction(e) {

  e.preventDefault();

  gsap.to('svg.isVisible g.masks path', { duration: 0.3, drawSVG: 0, onComplete:function() {	
    animation.totalProgress(0).pause();
  } });


  // just blocking the button for the duration of the animation
  $('a.button').off('click', animateFunction);
  $('a.button').addClass('blocked');
  $('a.button').text( "Please wait..." );


  gsap.delayedCall(0.6, function() {
    animation.play()
  }); 

}




// Hope this helps :)
              
            
!
999px

Console