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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <svg id="letter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="70px" viewBox="0 0 400 70">
  
<defs>
  
	<clipPath id="clip-i-1">
		<path d="M17.078,45.808c-2.934-1.45-5.184-3.508-6.75-6.175c-1.567-2.667-2.35-5.767-2.35-9.3c0-4.9,0.925-9.25,2.775-13.05
			c1.85-3.8,4.358-6.741,7.525-8.825c3.167-2.083,6.683-3.125,10.55-3.125c3.6,0,6.333,0.925,8.2,2.775
			c1.866,1.85,2.8,4.292,2.8,7.325c0,2.033-0.358,3.667-1.075,4.9c-0.717,1.233-1.742,1.85-3.075,1.85
			c-0.934,0-1.667-0.217-2.2-0.65c-0.534-0.433-0.8-1.066-0.8-1.9c0-0.3,0.066-0.85,0.2-1.65c0.2-1,0.3-1.8,0.3-2.4
			c0-3.033-1.617-4.55-4.85-4.55c-2.2,0-4.3,0.717-6.3,2.15c-2,1.434-3.617,3.542-4.85,6.325c-1.233,2.784-1.85,6.092-1.85,9.925
			c0,4,1.117,7.092,3.35,9.274c2.233,2.184,5.533,3.275,9.9,3.275c2.167,0,4.358-0.275,6.575-0.825
			c2.216-0.55,4.675-1.392,7.375-2.524c0.5-0.2,0.917-0.301,1.25-0.301c0.533,0,0.933,0.2,1.2,0.601c0.266,0.399,0.4,0.917,0.4,1.55
			c0,2.033-1.1,3.533-3.3,4.5c-2.367,1.033-4.825,1.792-7.375,2.275c-2.55,0.482-4.975,0.725-7.275,0.725
			C23.46,47.982,20.011,47.258,17.078,45.808z"/>    
  </clipPath>
  
  <clipPath id="clip-i-2">
		<path d="M102.052,37.183c0.25,0.399,0.375,0.95,0.375,1.649c0,1.301-0.317,2.334-0.95,3.101c-3.3,4.033-6.817,6.05-10.55,6.05
			c-3.234,0-5.817-1.25-7.75-3.75c-1.934-2.5-2.9-6.083-2.9-10.75c0-1.133,0.05-2.267,0.15-3.4c-2.2,0.4-4.6,0.7-7.2,0.9
			c-1.733,0.134-2.917,0.217-3.55,0.25c-0.667,3.4-1.6,7.567-2.8,12.5c-0.7,2.9-2.033,4.35-4,4.35c-2.133,0-3.2-0.966-3.2-2.899
			c0-0.433,0.083-1.033,0.25-1.8c1.133-4.566,2.033-8.433,2.7-11.601l-2.4,0.1c-1.1,0-1.9-0.191-2.4-0.575
			c-0.5-0.383-0.75-1.008-0.75-1.875c0-1.1,0.316-1.908,0.95-2.425c0.633-0.516,1.683-0.808,3.15-0.875l2.65-0.1
			c0.866-4.7,1.3-8.283,1.3-10.75c0-1.566-0.233-2.633-0.7-3.2c-0.467-0.566-1.083-0.85-1.85-0.85c-2.333,0-4.967,1.95-7.9,5.85
			c-0.434,0.567-0.917,0.85-1.45,0.85c-0.467,0-0.867-0.217-1.2-0.65c-0.333-0.433-0.5-0.982-0.5-1.65c0-1.033,0.417-2.133,1.25-3.3
			c1.466-2.033,3.316-3.708,5.55-5.025c2.233-1.316,4.5-1.975,6.8-1.975c2.167,0,3.842,0.742,5.025,2.225
			c1.183,1.483,1.775,3.792,1.775,6.925c0,2.767-0.4,6.517-1.2,11.25l4.9-0.25c2.1-0.1,3.9-0.267,5.4-0.5
			c0.6-3.667,1.516-7.1,2.75-10.3c1.232-3.2,2.766-5.8,4.6-7.8c1.833-2,3.883-3,6.15-3c1.666,0,2.982,0.659,3.95,1.975
			c0.966,1.317,1.45,3.042,1.45,5.175c0,8.268-4.217,14-12.65,17.2c-0.1,1.333-0.15,2.717-0.15,4.15c0,3.5,0.433,5.984,1.3,7.45
			c0.866,1.468,2.083,2.2,3.65,2.2c1.366,0,2.616-0.357,3.75-1.075c1.133-0.716,2.417-1.941,3.85-3.675c0.4-0.466,0.85-0.7,1.35-0.7
			C101.46,36.582,101.802,36.782,102.052,37.183z M91.952,10.232c-0.817,1.333-1.592,3.15-2.325,5.45
			c-0.733,2.3-1.317,4.817-1.75,7.55c2.667-1.1,4.633-2.667,5.9-4.7c1.266-2.033,1.9-4.65,1.9-7.85c0-0.767-0.134-1.367-0.4-1.8
			c-0.268-0.433-0.6-0.65-1-0.65C93.543,8.232,92.769,8.899,91.952,10.232z"/>   
  </clipPath>
  
  <clipPath id="clip-i-3">    
		<path d="M131.376,33.032c0.233,0.434,0.35,0.984,0.35,1.65c0,1.6-0.483,2.55-1.45,2.85c-2,0.7-4.2,1.101-6.6,1.2
			c-0.634,2.8-1.884,5.042-3.75,6.725c-1.867,1.684-3.984,2.525-6.35,2.525c-2,0-3.708-0.482-5.125-1.45
			c-1.417-0.966-2.492-2.25-3.225-3.85c-0.733-1.601-1.1-3.333-1.1-5.2c0-2.533,0.483-4.792,1.45-6.775
			c0.966-1.983,2.3-3.533,4-4.65c1.7-1.117,3.583-1.675,5.65-1.675c2.533,0,4.575,0.875,6.125,2.625s2.458,3.909,2.725,6.475
			c1.566-0.1,3.433-0.433,5.6-1c0.266-0.066,0.5-0.1,0.7-0.1C130.809,32.382,131.143,32.6,131.376,33.032z M116.751,41.383
			c0.783-0.867,1.308-2.117,1.575-3.75c-1.034-0.7-1.825-1.617-2.375-2.75c-0.55-1.133-0.825-2.333-0.825-3.6
			c0-0.533,0.05-1.066,0.15-1.6h-0.25c-1.333,0-2.442,0.642-3.325,1.925c-0.884,1.284-1.325,3.092-1.325,5.425
			c0,1.834,0.358,3.233,1.075,4.2c0.716,0.967,1.558,1.45,2.525,1.45C115.042,42.683,115.967,42.25,116.751,41.383z"/>
  </clipPath>
  
  <clipPath id="clip-i-4"> 
		<path d="M155.025,33.032c0.233,0.434,0.35,0.984,0.35,1.65c0,0.833-0.117,1.475-0.35,1.925c-0.233,0.45-0.6,0.759-1.1,0.925
			c-2,0.7-4.2,1.101-6.6,1.2c-0.667,2.768-1.925,5-3.775,6.7s-3.892,2.55-6.125,2.55c-3.367,0-5.817-1.283-7.35-3.85
			s-2.3-6.283-2.3-11.15c0-4.3,0.533-8.975,1.6-14.025c1.066-5.05,2.625-9.35,4.675-12.9c2.05-3.55,4.492-5.325,7.325-5.325
			c1.533,0,2.766,0.659,3.7,1.975c0.933,1.317,1.4,3.025,1.4,5.125c0,2.733-0.518,5.45-1.55,8.15c-1.034,2.7-2.75,5.534-5.15,8.5
			c2.233,0.167,4.05,1.092,5.45,2.775c1.4,1.684,2.232,3.759,2.5,6.225c1.566-0.1,3.433-0.433,5.6-1c0.2-0.066,0.433-0.1,0.7-0.1
			C154.458,32.382,154.792,32.6,155.025,33.032z M140.375,41.383c0.8-0.867,1.333-2.117,1.6-3.75c-1.034-0.7-1.825-1.617-2.375-2.75
			c-0.55-1.133-0.825-2.333-0.825-3.6c0-0.466,0.066-1.1,0.2-1.9h-0.15c-1.367,0-2.508,0.675-3.425,2.025
			c-0.917,1.35-1.375,3.159-1.375,5.425c0,1.9,0.358,3.351,1.075,4.351c0.716,1,1.558,1.5,2.525,1.5
			C138.658,42.683,139.575,42.25,140.375,41.383z M138.05,8.657c-0.784,1.984-1.508,4.675-2.175,8.075
			c-0.667,3.4-1.167,7.117-1.5,11.15c2.2-4.033,3.958-7.591,5.275-10.675c1.316-3.083,1.975-5.825,1.975-8.225
			c0-1.066-0.125-1.883-0.375-2.45c-0.25-0.566-0.592-0.85-1.025-0.85C139.558,5.683,138.833,6.675,138.05,8.657z"/>
  </clipPath>
  
  <clipPath id="clip-i-5">     
		<path d="M189.85,37.183c0.25,0.399,0.375,0.95,0.375,1.649c0,1.334-0.317,2.367-0.95,3.101c-3.3,4.033-6.384,6.05-9.25,6.05
			c-2.167,0-3.742-0.767-4.725-2.3c-0.983-1.533-1.475-3.566-1.475-6.101v-0.75c-1.833,2.768-3.858,4.984-6.075,6.65
			c-2.217,1.667-4.542,2.5-6.975,2.5c-2.9,0-5.208-0.866-6.925-2.6s-2.575-3.967-2.575-6.7c0-2,0.15-3.9,0.45-5.7
			c0.3-1.8,0.767-3.716,1.4-5.75c0.3-0.966,0.791-1.675,1.475-2.125c0.683-0.45,1.675-0.675,2.975-0.675c1.5,0,2.25,0.4,2.25,1.2
			c0,0.333-0.25,1.534-0.75,3.6l-0.35,1.5l-0.7,3c0.9-0.9,1.975-1.642,3.225-2.225c1.25-0.583,2.525-0.875,3.825-0.875
			c1.533,0,2.8,0.458,3.8,1.375c1,0.917,1.566,2.208,1.7,3.875c1.3-1.566,2.367-3.042,3.2-4.425c0.833-1.383,1.55-2.825,2.15-4.325
			c0.3-1,0.691-1.7,1.175-2.1c0.483-0.4,1.275-0.6,2.375-0.6c1.7,0,2.55,0.567,2.55,1.7c0,0.833-0.317,2.767-0.95,5.8
			c-0.8,3.667-1.2,6.149-1.2,7.45c0,1,0.133,1.767,0.4,2.3c0.266,0.533,0.716,0.8,1.35,0.8c0.6,0,1.35-0.416,2.25-1.25
			c0.9-0.833,2.1-2.15,3.6-3.95c0.4-0.466,0.85-0.7,1.35-0.7C189.258,36.582,189.6,36.782,189.85,37.183z M162.575,35.882
			c-1.133,0-2.125,0.317-2.975,0.95c-0.85,0.634-1.525,1.367-2.025,2.2c0.133,1.233,0.483,2.15,1.05,2.75
			c0.566,0.601,1.433,0.9,2.6,0.9c1.333,0,2.367-0.366,3.1-1.101c0.733-0.732,1.1-1.75,1.1-3.05
			C165.425,36.766,164.475,35.882,162.575,35.882z"/>
  </clipPath>
  
  <clipPath id="clip-i-6"> 
		<path d="M226.55,37.183c0.25,0.399,0.375,0.95,0.375,1.649c0,1.367-0.317,2.418-0.95,3.15c-1.533,1.8-3.025,3.25-4.475,4.35
			c-1.45,1.101-3.043,1.65-4.775,1.65c-1.768,0-3.033-0.666-3.8-2c-0.767-1.333-1.149-3.267-1.149-5.8c0-2.2,0.266-4.95,0.799-8.25
			h-0.1c-0.834,1.434-1.617,3.05-2.35,4.85c-0.734,1.8-1.551,3.934-2.45,6.4l-0.851,2.25c-0.367,1-0.799,1.675-1.299,2.024
			c-0.5,0.351-1.101,0.525-1.801,0.525c-0.733,0-1.268-0.2-1.6-0.6c-0.334-0.4-0.634-1.033-0.9-1.9c-0.3-1-0.55-2.375-0.75-4.125
			c-0.2-1.75-0.3-3.525-0.3-5.325c0-1.1,0.05-2.15,0.15-3.15h-0.1c-0.834,3.234-1.65,5.892-2.45,7.975
			c-0.8,2.084-1.884,3.783-3.25,5.1c-1.367,1.317-3.1,1.976-5.2,1.976c-1.767,0-3.125-0.616-4.075-1.851
			c-0.95-1.232-1.425-2.782-1.425-4.649c0-1.667,0.383-3.058,1.15-4.175c0.766-1.117,1.85-1.675,3.25-1.675c1.333,0,2,0.45,2,1.35
			c0,0.167-0.018,0.3-0.05,0.399c-0.267,1.601-0.4,2.734-0.4,3.4c0,1.134,0.25,1.7,0.75,1.7c0.466,0,0.933-0.342,1.4-1.025
			c0.466-0.683,1.117-2.175,1.95-4.475c1.133-3.1,2.2-6.267,3.2-9.5c0.333-1.033,0.825-1.792,1.475-2.275
			c0.65-0.482,1.525-0.725,2.625-0.725c0.933,0,1.708,0.184,2.325,0.55c0.616,0.367,0.925,0.967,0.925,1.8
			c0,4.834,0.116,8.518,0.351,11.05h0.1c0.566-1.899,1.449-4.083,2.65-6.55c1.199-2.466,2.149-4.083,2.85-4.85
			c0.633-0.667,1.275-1.175,1.925-1.525c0.649-0.35,1.375-0.525,2.175-0.525c1.2,0,2.017,0.259,2.45,0.775
			c0.433,0.518,0.649,1.475,0.649,2.875c0,0.768-0.017,1.525-0.049,2.275c-0.034,0.75-0.068,1.442-0.101,2.075
			c-0.134,2.467-0.2,4.3-0.2,5.5c0,1.899,0.133,3.184,0.4,3.85c0.266,0.667,0.766,1,1.5,1c1.332,0,3.016-1.75,5.05-5.25
			c0.366-0.6,0.816-0.9,1.351-0.9C225.957,36.582,226.3,36.782,226.55,37.183z"/>
  </clipPath>
  
  <clipPath id="clip-i-7"> 
		<path d="M275.949,5.458c0.45,0.417,0.676,1.075,0.676,1.975c0,1.033-0.275,1.817-0.825,2.35c-0.55,0.534-1.509,0.867-2.875,1
			c-2.534,0.268-4.867,0.442-7,0.525c-2.134,0.083-5.117,0.125-8.95,0.125h-0.1c-1.434,7.2-2.567,13.35-3.4,18.45
			c-0.4,2.434-0.792,5.125-1.175,8.075c-0.384,2.95-0.643,5.293-0.775,7.025c-0.067,0.967-0.467,1.709-1.2,2.225
			c-0.733,0.518-1.617,0.775-2.649,0.775c-1.101,0-1.95-0.267-2.55-0.8c-0.601-0.533-0.9-1.233-0.9-2.101
			c0-0.8,0.125-2.125,0.375-3.975s0.541-3.791,0.875-5.825c0.366-2.033,0.65-3.8,0.85-5.3c0.533-3.633,1.367-8.25,2.5-13.85l0.9-4.4
			c-2.934,0.3-5.05,0.875-6.35,1.725c-1.301,0.85-1.95,2.059-1.95,3.625c0,1.133,0.333,2.217,1,3.25c0.2,0.3,0.3,0.6,0.3,0.9
			c0,0.6-0.334,1.125-1,1.575c-0.667,0.45-1.417,0.675-2.25,0.675c-0.9,0-1.667-0.267-2.3-0.8c-0.468-0.4-0.867-1.142-1.2-2.225
			c-0.334-1.083-0.5-2.175-0.5-3.275c0-4.033,1.783-6.992,5.35-8.875c3.566-1.883,9.117-2.825,16.65-2.825
			c4.2,0,7.441-0.033,9.725-0.1c2.283-0.066,4.476-0.2,6.575-0.4C274.774,4.882,275.5,5.041,275.949,5.458z"/>
  </clipPath>
  
  <clipPath id="clip-i-8"> 
		<path d="M294.374,33.032c0.233,0.434,0.351,0.984,0.351,1.65c0,1.6-0.484,2.55-1.451,2.85c-2,0.7-4.199,1.101-6.6,1.2
			c-0.633,2.8-1.883,5.042-3.75,6.725c-1.867,1.684-3.983,2.525-6.35,2.525c-2,0-3.709-0.482-5.125-1.45
			c-1.418-0.966-2.492-2.25-3.225-3.85c-0.734-1.601-1.101-3.333-1.101-5.2c0-2.533,0.483-4.792,1.45-6.775
			c0.967-1.983,2.3-3.533,4-4.65c1.699-1.117,3.582-1.675,5.65-1.675c2.532,0,4.574,0.875,6.125,2.625
			c1.549,1.75,2.457,3.909,2.725,6.475c1.566-0.1,3.433-0.433,5.6-1c0.267-0.066,0.5-0.1,0.7-0.1
			C293.807,32.382,294.141,32.6,294.374,33.032z M279.749,41.383c0.782-0.867,1.308-2.117,1.575-3.75
			c-1.033-0.7-1.825-1.617-2.375-2.75c-0.551-1.133-0.825-2.333-0.825-3.6c0-0.533,0.05-1.066,0.149-1.6h-0.25
			c-1.333,0-2.441,0.642-3.324,1.925c-0.884,1.284-1.325,3.092-1.325,5.425c0,1.834,0.358,3.233,1.075,4.2s1.558,1.45,2.525,1.45
			C278.041,42.683,278.965,42.25,279.749,41.383z"/>
  </clipPath>
  
  <clipPath id="clip-i-9"> 
		<path d="M317.049,37.308c0.25,0.417,0.375,0.942,0.375,1.575c0,0.767-0.117,1.367-0.351,1.8c-0.233,0.434-0.6,0.817-1.1,1.149
			c-2.867,1.934-4.968,3.367-6.3,4.301l-3.2,2.149c-1.268,6.9-2.925,12.325-4.976,16.275c-2.05,3.95-4.658,5.925-7.824,5.925
			c-1.7,0-3.084-0.525-4.15-1.575c-1.067-1.05-1.6-2.425-1.6-4.125c0-2.367,0.933-4.908,2.8-7.625
			c1.866-2.717,5.366-6.059,10.5-10.024l0.3-1.95c-0.567,0.899-1.309,1.592-2.225,2.075c-0.918,0.482-1.825,0.725-2.726,0.725
			c-2.067,0-3.717-0.75-4.95-2.25s-1.85-3.467-1.85-5.9c0-2.666,0.616-5.191,1.85-7.575c1.233-2.383,2.875-4.3,4.926-5.75
			c2.05-1.45,4.225-2.175,6.524-2.175c0.733,0,1.226,0.142,1.476,0.425c0.25,0.284,0.457,0.792,0.625,1.525
			c0.633-0.133,1.366-0.2,2.199-0.2s1.426,0.125,1.775,0.375s0.525,0.742,0.525,1.475c0,0.4-0.018,0.717-0.051,0.95
			c-0.133,1.034-0.55,3.65-1.25,7.85c-0.133,0.8-0.274,1.675-0.425,2.625c-0.149,0.95-0.309,1.959-0.475,3.025
			c2.566-2,5.032-3.767,7.399-5.301c0.434-0.266,0.816-0.399,1.15-0.399C316.456,36.683,316.799,36.891,317.049,37.308z
			 M297.049,62.633c1.05-2,2.058-5.184,3.024-9.551c-2.567,2.2-4.417,4.184-5.55,5.95c-1.134,1.767-1.7,3.316-1.7,4.65			c0,0.566,0.108,1.032,0.325,1.399s0.575,0.551,1.075,0.551C295.057,65.633,295.998,64.633,297.049,62.633z M300.573,41.532
			c0.7-0.933,1.2-2.267,1.5-4l1.601-8.55c-1.367,0.034-2.634,0.559-3.801,1.575c-1.167,1.017-2.1,2.358-2.8,4.025
			c-0.7,1.667-1.05,3.433-1.05,5.3c0,1.033,0.208,1.8,0.625,2.3c0.416,0.5,0.991,0.75,1.725,0.75
			C299.14,42.933,299.873,42.466,300.573,41.532z"/>
  </clipPath>
  
  <clipPath id="clip-i-10"> 
		<path d="M340.873,33.032c0.233,0.434,0.351,0.984,0.351,1.65c0,1.6-0.484,2.55-1.45,2.85c-2,0.7-4.2,1.101-6.6,1.2
			c-0.635,2.8-1.885,5.042-3.75,6.725c-1.867,1.684-3.984,2.525-6.351,2.525c-2,0-3.708-0.482-5.125-1.45
			c-1.417-0.966-2.492-2.25-3.226-3.85c-0.732-1.601-1.1-3.333-1.1-5.2c0-2.533,0.482-4.792,1.45-6.775
			c0.966-1.983,2.3-3.533,4-4.65c1.7-1.117,3.583-1.675,5.649-1.675c2.533,0,4.576,0.875,6.125,2.625
			c1.551,1.75,2.459,3.909,2.726,6.475c1.566-0.1,3.433-0.433,5.6-1c0.267-0.066,0.5-0.1,0.7-0.1
			C340.306,32.382,340.64,32.6,340.873,33.032z M326.248,41.383c0.783-0.867,1.309-2.117,1.575-3.75
			c-1.034-0.7-1.825-1.617-2.375-2.75c-0.55-1.133-0.825-2.333-0.825-3.6c0-0.533,0.051-1.066,0.15-1.6h-0.25
			c-1.334,0-2.442,0.642-3.325,1.925c-0.884,1.284-1.325,3.092-1.325,5.425c0,1.834,0.357,3.233,1.075,4.2			c0.716,0.967,1.558,1.45,2.524,1.45C324.539,42.683,325.465,42.25,326.248,41.383z"/>
  </clipPath>
  
  <clipPath id="clip-i-11"> 
		<path d="M377.298,37.183c0.25,0.399,0.375,0.95,0.375,1.649c0,1.367-0.317,2.418-0.95,3.15c-1.534,1.8-3.025,3.25-4.476,4.35
			c-1.449,1.101-3.042,1.65-4.774,1.65c-1.768,0-3.034-0.666-3.8-2c-0.768-1.333-1.15-3.267-1.15-5.8c0-2.2,0.267-4.95,0.8-8.25
			h-0.1c-0.834,1.434-1.617,3.05-2.351,4.85s-1.55,3.934-2.449,6.4l-0.851,2.25c-0.367,1-0.8,1.675-1.3,2.024
			c-0.5,0.351-1.1,0.525-1.8,0.525c-0.733,0-1.268-0.2-1.601-0.6c-0.333-0.4-0.633-1.033-0.899-1.9c-0.3-1-0.55-2.375-0.75-4.125
			s-0.3-3.525-0.3-5.325c0-1.1,0.05-2.15,0.149-3.15h-0.1c-0.834,3.234-1.65,5.892-2.45,7.975c-0.8,2.084-1.884,3.783-3.25,5.1
			c-1.367,1.317-3.1,1.976-5.2,1.976c-1.767,0-3.125-0.616-4.075-1.851c-0.949-1.232-1.425-2.782-1.425-4.649
			c0-1.667,0.383-3.058,1.15-4.175c0.767-1.117,1.85-1.675,3.25-1.675c1.333,0,2,0.45,2,1.35c0,0.167-0.018,0.3-0.05,0.399
			c-0.268,1.601-0.4,2.734-0.4,3.4c0,1.134,0.25,1.7,0.75,1.7c0.467,0,0.933-0.342,1.4-1.025c0.466-0.683,1.116-2.175,1.949-4.475
			c1.133-3.1,2.2-6.267,3.2-9.5c0.333-1.033,0.825-1.792,1.476-2.275c0.649-0.482,1.524-0.725,2.625-0.725			c0.933,0,1.707,0.184,2.324,0.55c0.617,0.367,0.926,0.967,0.926,1.8c0,4.834,0.116,8.518,0.35,11.05h0.1
			c0.566-1.899,1.45-4.083,2.65-6.55c1.2-2.466,2.15-4.083,2.85-4.85c0.633-0.667,1.275-1.175,1.926-1.525
			c0.649-0.35,1.375-0.525,2.175-0.525c1.2,0,2.017,0.259,2.45,0.775c0.433,0.518,0.649,1.475,0.649,2.875
			c0,0.768-0.017,1.525-0.05,2.275s-0.067,1.442-0.1,2.075c-0.134,2.467-0.2,4.3-0.2,5.5c0,1.899,0.133,3.184,0.399,3.85
			c0.267,0.667,0.767,1,1.5,1c1.333,0,3.017-1.75,5.051-5.25c0.366-0.6,0.816-0.9,1.35-0.9
			C376.705,36.582,377.048,36.782,377.298,37.183z"/>
  </clipPath>
  
  <clipPath id="clip-i-12"> 
		<path d="M380.998,46.782c-0.75-0.8-1.125-1.85-1.125-3.149c0-1.5,0.425-2.7,1.274-3.601c0.851-0.899,2.042-1.35,3.575-1.35
			c1.467,0,2.575,0.358,3.325,1.075s1.125,1.774,1.125,3.175c0,1.533-0.434,2.759-1.3,3.675c-0.867,0.917-2.051,1.375-3.551,1.375
			C382.855,47.982,381.748,47.582,380.998,46.782z M384.572,35.583c-0.434-0.3-0.649-0.767-0.649-1.4l0.05-0.4
			c0.566-3.732,1.333-7.982,2.3-12.75c0.967-4.766,1.866-8.883,2.7-12.35c0.533-2.133,1.982-3.2,4.35-3.2
			c2.133,0,3.2,0.684,3.2,2.05c0,0.3-0.05,0.634-0.149,1c-0.867,3.534-2.018,7.809-3.45,12.825c-1.434,5.017-2.8,9.375-4.101,13.075
			c-0.367,1.067-1.233,1.6-2.6,1.6C385.556,36.032,385.006,35.882,384.572,35.583z"/>
	</clipPath>
</defs>
  
  
<!--   обводка -->
<g class="stroke">
  
  <g clip-path="url(#clip-i-1)">
    <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M35.774,19.774
		C37.5,15.5,35.723,10.7,33.319,9.215c-2.451-1.515-3.88-1.304-6.908-1.054C21.67,8.552,16.07,15.25,13.839,19.129
		c-3.022,5.253-5.143,13.233-1.435,18.246c4.788,6.473,7.671,7.883,15.395,7.883c3.454,0,10.547-0.885,15.395-3.871"/>
  </g>
  
  <g clip-path="url(#clip-i-2)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M53.617,17.879
		c0.501,0.067-0.176-2.294,0.315-2.34c1.311-3.691,6.568-8.058,10.567-7.554c6.413,0.808,4.171,6.484,4.177,11.765
		c0.006,4.769-1.105,9.532-2.96,13.574c-1.616,3.521-7.467,8.051-3.24,11.909c4.561-2.163,3.126-4.736,3.523-7.607
		c0.451-3.256,0.165-5.592,0.056-8.125c-2.445-0.134-7.766,2.07-6.636-0.945c2.33-2.445,26.299,0.749,35.724-8.771
		c2.775-2.804,3.277-5.386,2.888-9.364C97.586,5.854,95.59,3.906,92,6.434c-6.547,4.609-6.879,10.436-8.25,16.316
		c-1.216,5.216-1.292,11.074,0,16.25c0.807,3.232,4.449,5.944,7.625,6.258c4.597,0.454,6.982-2.556,8.875-5.758"/>
  </g>
  
  <g clip-path="url(#clip-i-3)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M118,26.75
		c-2.857-0.808-8.331,0.569-9.688,3.58c-1.16,2.574-1.311,4.001-1.187,6.923c0.106,2.498,2.147,6.832,4.775,7.656
		c3.104,0.974,7.026-1.922,8.1-4.159c1.151-2.398,3.389-16.899-3.25-14.984c-0.636,0.184-1.619,1-1.75,1.607
		c-0.092,0.427,0.199,1.368,0.372,1.752c0.571,1.273,1.579,3.148,2.554,4.125c2.439,2.443,7.241,2.898,10.699,2.098"/>
  </g>
  
  <g clip-path="url(#clip-i-4)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M133.125,31.25
		c1.419-2.163,4.308-5.375,4.969-6.525c0.74-1.288,1.189-2.747,1.875-4.091c1.37-2.686,3.583-5.781,4.041-8.634
		c0.38-2.373,0.312-8.02-2.503-8.722c-3.043-0.76-4.665,2.612-5.718,4.883c-1.31,2.824-2.292,6-3.414,8.989
		c-0.697,1.858-0.892,3.843-1.333,5.728c-0.377,1.613-0.808,3.195-0.91,4.99c-0.146,2.564-0.006,5.735-0.006,8.314
		c0,2.984,0.748,6.454,3.528,7.942c2.098,1.124,5.73,1.75,7.71,0.234c2.19-1.677,2.683-5.658,3.043-8.362
		c0.366-2.752,0.848-5.737-0.534-8.216c-0.557-0.999-1.202-1.535-2.369-1.781c-1.578-0.334-1.529,0.363-1.656,1.694
		c-0.28,2.948,0.408,4.821,2.905,6.531c2.027,1.388,6.207,1.123,8.671,1.123"/>
  </g>
  
  <g clip-path="url(#clip-i-5)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M156.495,26.468
		c-1.75,2.875-1.908,4.518-2.37,6.907c-0.525,2.715,0.219,4.797,1.847,7.317c1.515,2.344,4.462,4.249,7.4,3.813
		c3.745-0.555,4.326-3.889,4.634-6.983c0.32-3.224-1.197-4.53-4.284-4.522c-2.498,0.006-5.57,1.022-7.204,3.013
		c-0.863,1.051-1.582,1.239-1.713,2.598c-0.105,1.088,0.302,2.679,0.563,3.862c0.708,3.212,4.528,3.152,7.113,3.152
		c4.5,0,6.398-3.749,8.744-6.9c2.957-3.973,7.328-8.375,8.9-13.133c-1,2.656-2.96,5.824-3.097,8.758
		c-0.101,2.157-0.441,5.021-0.027,7.15c0.519,2.671,3.726,4.115,6.027,2.746c1.225-0.729,4.629-4.202,4.348-5.871"/>
  </g>
  
  <g clip-path="url(#clip-i-6)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M187.875,36.625
		c-0.038,2.211-1.71,5.399-0.759,7.632c0.507,1.189,2.333,2.444,3.634,2.243c1.274-0.198,2.249-1.642,2.972-2.628
		c3.306-4.51,3.915-10.654,6.032-15.49c0.364-0.832,1.232-2.684,1.993-1.729c0.616,0.774,0.254,3.105,0.254,4.096
		c0,2.546,0.075,5.072,0.277,7.588c0.095,1.165,0.977,8.441,2.78,6.787c0.568-0.521,0.66-2.521,1.037-3.375
		c0.662-1.501,1.265-2.833,1.78-4.378c0.455-1.368,0.493-2.78,0.841-4.123c0.396-1.533,1.313-2.634,2.481-3.631
		c0.607-0.519,1.822-2.489,2.574-2.596c1.492-0.211,1.468,2.062,1.479,3.065c0.029,2.819-0.817,5.475-0.875,8.287
		c-0.05,2.433-1.136,5.21,1.659,6.469c1.748,0.788,4.611,0.347,6.207-0.733c1.779-1.206,1.851-3.669,3.259-4.985"/>
  </g>
  
  <g clip-path="url(#clip-i-7)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M246.875,45.75
		c0.975-0.226,1.987-5.846,2.28-6.984c0.51-1.986,0.736-4.023,1.001-6.082c0.495-3.854,0.7-7.925,1.587-11.692
		c0.664-2.821,0.468-5.658,0.886-8.559c0.204-1.422,0.734-2.993,0.641-4.413c3.795-0.231,7.729-0.394,11.48-0.394
		c2.512,0,4.832-0.887,7.409-0.625c1.724,0.175,2.035,1.505,0.111,1.625c-3.104,0.194-6.292,0-9.403,0
		c-2.992,0-5.946-0.125-8.946-0.125c-4.722,0-9.186-0.552-12.89,2.781c-1.492,1.342-2.218,2.594-2.601,4.494
		c-0.41,2.033,0.022,3.552,1.069,5.1"/>
  </g>
  
  <g clip-path="url(#clip-i-8)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M281.063,27.063
		c-2.014-1.454-5.584-1.249-7.506,0.372c-1.867,1.573-3.013,4.91-3.229,7.266c-0.275,2.998,1.042,6.353,3.183,8.404
		c2.11,2.022,5.812,2.911,7.228-0.282c1.072-2.421,1.688-4.713,2.128-7.307c0.296-1.753,1.827-6.284-0.375-7.146
		c-1.438-0.563-2.37,0.357-2.62,1.756c-0.303,1.693,1.113,2.646,2.374,3.433c2.082,1.298,5.175,0.941,7.628,0.941
		c0.167,0,0.127,0,0.127,0"/>
  </g>
  
  <g clip-path="url(#clip-i-9)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M304.375,26.375
		c-2.951,0-6.837,1.228-9.024,3.278c-1.814,1.7-2.948,4.999-3.101,7.438c-0.173,2.775,0.207,5.545,2.306,7.531
		c2.519,2.385,5.376-0.742,6.569-2.967c1.199-2.233,2.278-4.549,3.275-6.896c0.67-1.577,1.206-2.953,1.6-4.613
		c0.191-0.81,0.265-2.935,1.231-3.133c0.162,1.008-0.618,2.625-0.854,3.609c-0.296,1.24-0.512,2.369-0.655,3.649
		c-0.329,2.911-0.427,6.104-1.095,8.971c-1.314,5.649-1.282,12.289-3.229,17.758c-0.868,2.439-1.839,4.621-4.24,5.902
		c-2.055,1.098-5.354,2.041-6.162-1.019c-0.313-1.182-0.365-3.476,0.027-4.664c0.57-1.728,2.333-2.631,3.479-3.911
		c2.416-2.699,5.151-4.906,8.1-7.046c2.643-1.918,5.063-3.65,7.645-5.606c1.989-1.508,3.572-3.081,5.253-4.781"/>
  </g>
  
  <g clip-path="url(#clip-i-10)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M326.5,26.125
		c-0.574-0.57-3.143-0.403-3.997-0.256c-1.768,0.305-3.189,1.589-4.158,3.009c-1.513,2.216-2.108,5.02-2.095,7.594
		c0.014,2.69,1.021,5.782,3.653,7.146c2.028,1.05,5.831,1.31,7.915-0.083c2.259-1.51,3.093-4.899,3.713-7.407
		c0.783-3.164,0.815-5.433-1.782-7.729c-0.731-0.646-1.906-1.527-2.996-1.152c-1.171,0.403-1.19,2.185-1.003,3.378
		c0.382,2.424,2.809,4.273,4.973,4.888c2.251,0.64,6.749,0.727,8.402-1.013"/>
  </g>
  
  <g clip-path="url(#clip-i-11)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M338.5,34.125
		c-0.841,0.486-0.733,3.838-0.888,4.854c-0.156,1.028-0.532,2.513-0.049,3.524c1.185,2.484,4.668,3.702,6.219,1.007
		c1.427-2.48,2.417-5.883,3.367-8.675c0.466-1.37,1.265-2.761,1.705-4.078c0.38-1.133,0.758-3.273,1.727-4.141
		c2.28-2.045,2.056,4.243,2.044,5.506c-0.028,2.955-0.752,5.899-0.159,8.815c0.222,1.094,0.434,2.571,1.06,3.557
		c1.347,2.122,2.063-1.096,2.38-2.347c0.729-2.864,1.729-5.559,3.102-8.205c0.69-1.332,1.509-2.553,2.556-3.692
		c0.656-0.713,1.945-2.409,2.785-2.791c2.182-0.991,1.149,5.736,0.902,7.069c-0.407,2.194-0.77,5.984,0.034,8.097
		c1.075,2.823,3.579,3.954,6.091,2.372c1.26-0.793,2.027-1.431,2.75-2.747c0.558-1.018,0.91-2.169,1.625-3"/>
  </g>
  
  <g clip-path="url(#clip-i-12)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M392.625,6.5
		c2.086,1.606,1.131,4.841,0.25,6.847c-1.052,2.398-1.841,5.083-2.66,7.653c-1.348,4.23-2.682,8.302-3.465,12.75"/>
  </g>
  
  <g clip-path="url(#clip-i-12)">
	  <path fill="none" stroke="#52AC62" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M384.5,41.375
		c-1.19-0.069-1.569,2.474-1.375,3.396c0.277,1.309,2.259,1.25,3.547,0.979c0.87-0.183,2.156-1.461,1.56-2.631
		c-0.397-0.779-2.676-1.243-3.481-1.369"/>
  </g>
  
</g> 
  
</svg>
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}


$letter: 12;

#letter {
  position: absolute;
  top:50%;
  left: 50%;
  
  transform:translate(-50%,-50%);
}

.stroke {
  svg {
    width: 100%;
  }
  
  path {
    fill:none; 
    stroke:green;
    stroke-width: 7; 
    animation: dash $letter + 0s linear forwards infinite; 
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
  }
}


@for $i from 1 through $letter {    
  .stroke g:nth-of-type(#{$i}) path {
    animation-delay: $i + 0s;
  }
  
  .stroke g:nth-of-type(#{$letter+1}) path {
    animation-delay: $letter+1 + 0s;
  }
}


@keyframes dash {
  0% {
    stroke-dashoffset: 2200;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console