cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div id="bg"></div>
<svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 width="1000.056px" height="883.866px" viewBox="0 0 1000.056 883.866" enable-background="new 0 0 1000.056 883.866"
	 xml:space="preserve" class="line-animated">
  
<g class="ring">
	<path stroke="0" stroke="#fff" stroke-width="10"d="M851.291,409.146c-0.735-0.164-1.45-0.244-2.13-0.244c-6.046,0-8.888,6.455-9.532,12.498
		c-0.969,9.075,2.565,19.704,11.02,21.528c7.274,1.56,10.937-5.521,11.665-12.19C863.306,421.669,859.777,411.02,851.291,409.146z"
		/>
	<path d="M992.218,517.938l-56.064-77.353l55.85-53.342c0.491-0.467,0.682-1.173,0.483-1.826
		c-0.194-0.653-0.731-1.14-1.396-1.272l-70.493-13.579C887.582,165.377,709.286,8.132,494.927,8.132
		c-203.42,0-374.364,141.608-419.494,331.417L7.319,324.889c-0.542-0.115-1.095,0.013-1.521,0.355
		c-0.427,0.351-0.675,0.868-0.675,1.413v2.421c0,0.38,0.12,0.756,0.347,1.062l56.058,77.351L5.686,460.834
		c-0.492,0.471-0.68,1.173-0.488,1.825c0.192,0.653,0.729,1.141,1.398,1.265l58.677,11.311
		C83.6,696.228,269.284,870.459,494.927,870.459c214.302,0,392.569-157.163,425.641-362.285l69.795,15.027
		c0.133,0.017,0.257,0.033,0.385,0.033c0.408,0,0.817-0.132,1.144-0.396c0.422-0.347,0.67-0.867,0.67-1.421v-2.412
		C992.561,518.616,992.444,518.253,992.218,517.938z M494.927,11.761c212.1,0,388.591,155.255,421.869,358.076l-124.831-24.042
		c-39.801-126.161-157.898-217.901-297.042-217.901c-138.69,0-256.376,91.187-296.549,216.716c-0.203,0.21-0.374,0.457-0.457,0.748
		l-1.615,5.822c-0.529,1.795-1.004,3.613-1.504,5.42l-2.261,8.161L78.983,340.31C123.76,152.136,293.25,11.761,494.927,11.761z
		 M873.023,426.188c-0.383,0.422-0.919,0.67-1.487,0.69c-0.56,0.05-1.119-0.19-1.534-0.58l-0.604-0.574
		c-0.828-0.789-0.88-2.095-0.116-2.948l10.138-11.276c0.512-0.566,1.297-0.818,2.03-0.651l0.896,0.198
		c0.999,0.221,1.697,1.128,1.656,2.15l-1.59,39.18c-0.025,0.628-0.327,1.21-0.824,1.593c-0.374,0.286-0.828,0.438-1.289,0.438
		c-0.155,0-0.31-0.017-0.463-0.052l-0.847-0.19c-0.998-0.223-1.691-1.127-1.65-2.149L878.644,420L873.023,426.188z M867.355,431.442
		c-1.119,10.251-6.789,16.875-14.449,16.875c-1.029,0-2.101-0.12-3.184-0.354c-11.459-2.477-16.35-15.897-15.135-27.268
		c1.249-11.701,8.464-18.604,17.653-16.582C863.719,406.649,868.595,420.087,867.355,431.442z M829.507,438.246
		c0.999,0.217,1.701,1.117,1.667,2.14l-0.029,0.847c-0.021,0.626-0.318,1.211-0.812,1.597c-0.376,0.291-0.835,0.446-1.302,0.446
		c-0.148,0-0.297-0.017-0.446-0.048l-25.867-5.58c-1.008-0.217-1.712-1.13-1.667-2.161l0.037-0.851
		c0.031-0.7,0.407-1.341,1.004-1.708l20.774-12.789c1.964-1.229,4.372-3.439,4.612-6.957c0.315-4.492-3.063-9.852-10.131-11.414
		c-0.971-0.215-1.902-0.322-2.768-0.322c-5.251,0-7.277,3.873-7.424,7.496c-0.024,0.624-0.324,1.204-0.817,1.586
		c-0.494,0.386-1.134,0.525-1.739,0.397l-0.789-0.169c-1.006-0.215-1.71-1.124-1.669-2.152c0.343-8.611,7.165-13.789,16.151-11.812
		c9.984,2.202,14.76,10.073,14.315,16.709c-0.252,4.507-2.763,8.53-6.89,11.016l-15.656,9.529L829.507,438.246z M222.25,372.505
		c0-0.079-0.029-0.145-0.04-0.219c-0.037-0.203-0.105-0.384-0.2-0.545c-0.054-0.107-0.047-0.24-0.122-0.326l-20.047-25.737
		c39.718-124.048,156.022-214.155,293.081-214.155c136.826,0,253.023,89.77,292.948,213.479l-10.302-1.979
		c-0.541-0.099-1.087,0.037-1.495,0.384c-0.418,0.338-0.661,0.859-0.661,1.396v130.646c0,0.008,0,0.008,0,0.008
		c0,0.008,0,0.008,0,0.008c0.008,0.488,0.215,0.926,0.541,1.248l19.902,26.454c0.004,0.006,0.013,0.008,0.017,0.013
		C766.366,642.313,642.717,747.07,494.923,747.07c-148.972,0-273.534-106.403-301.752-247.2l26.941,5.188
		c0.114,0.025,0.231,0.033,0.345,0.033c0.417,0,0.826-0.148,1.157-0.413c0.417-0.347,0.657-0.859,0.657-1.404V372.625
		C222.271,372.584,222.254,372.547,222.25,372.505z M167.386,409.065l-0.384,40.491l-5.112-1.045l0.382-40.446l-14.223-2.796
		c0.967,1.528,1.712,3.201,2.035,5.075l0.357,2.931l-5.153,0.048l-0.281-2.369c-0.267-1.382-0.845-2.668-1.799-3.91
		c-1.948-2.48-5.352-4.378-9.088-5.058c-0.882-0.157-1.801-0.246-2.714-0.246c-1.601,0-4.546,0.287-6.297,2.21
		c-1.043,1.072-1.483,2.546-1.357,4.437c0.368,5.816,4.752,7.392,11.878,9.482c6.393,1.874,13.638,3.999,15.218,11.992
		c0.946,4.738-0.576,7.83-2.018,9.588c-2.35,2.867-6.378,4.511-11.05,4.511c-1.289,0-2.599-0.126-3.894-0.374
		c-7.107-1.367-15.061-7.008-15.798-14.77l-0.382-2.901l5.273,0.34l0.268,2.171c0.478,5.066,6.221,9.108,11.502,10.125
		c4.092,0.785,8.186-0.178,10.016-2.396c1.125-1.365,1.477-3.21,1.039-5.482c-0.89-4.442-4.953-5.941-11.54-7.881
		c-6.706-1.975-15.055-4.431-15.633-14.26c-0.258-3.115,0.657-6.019,2.582-8.124c2.284-2.468,5.841-3.821,10.028-3.821
		c6.208,0,13.072,3.046,16.618,8.344l0.031-4.953l33.97,6.676l-0.058,5.248L167.386,409.065z M179.9,448.284
		c-0.021,1.652-1.369,2.947-3.073,2.947l-0.632-0.058c-1.599-0.312-2.817-1.797-2.792-3.386c0.014-1.745,1.297-3.071,2.98-3.071
		l0.648,0.066C178.723,445.098,179.921,446.539,179.9,448.284z M114.144,413.725l-0.035,5.257l-21.582-4.189l-0.143,15.208
		l22.165,4.255l-0.035,5.198l-27.233-5.233l-0.099-1.784l0.417-44.261l27.222,5.354l-0.049,5.197l-22.049-4.333l-0.143,15.144
		L114.144,413.725z M494.927,866.832c-223.395,0-407.289-172.24-425.946-390.888l120.372,23.19
		c27.987,143.168,154.332,251.562,305.571,251.562c156.907,0,287.013-116.664,308.291-267.797l113.801,24.505
		C884.299,710.884,707.493,866.832,494.927,866.832z M911.141,443.146l-15.594,9.371l19.398,4.185
		c0.998,0.215,1.697,1.111,1.669,2.129l-0.024,0.835c-0.02,0.628-0.316,1.216-0.812,1.603c-0.376,0.295-0.834,0.45-1.303,0.45
		c-0.148,0-0.298-0.017-0.446-0.048l-25.867-5.585c-1.004-0.217-1.708-1.123-1.667-2.151l0.033-0.835
		c0.026-0.708,0.408-1.354,1.014-1.723l20.771-12.613c1.958-1.204,4.354-3.373,4.6-6.843c0.31-4.435-3.071-9.74-10.136-11.298
		c-0.987-0.217-1.929-0.329-2.807-0.329c-5.224,0-7.239,3.813-7.386,7.379c-0.025,0.626-0.328,1.211-0.826,1.593
		c-0.5,0.378-1.145,0.519-1.754,0.384l-0.784-0.177c-0.996-0.226-1.688-1.13-1.646-2.15c0.349-8.526,7.158-13.648,16.147-11.666
		c9.999,2.198,14.766,10.01,14.308,16.588C917.791,436.705,915.282,440.691,911.141,443.146z"/>
</g>
<g class="effortless">		
		<path d="M109.316,303.962l4.323-11.178l61.472,23.393l7.109-18.403l10.242,3.896L181.03,331.25L109.316,303.962z"
			/>
		<path d="M185.258,225.521l9.505-13.455l8.982,6.246l-9.507,13.46l18.417,12.802l11.965-16.935l8.984,6.246
			l-18.886,26.746l-62.895-43.729l18.891-26.737l8.982,6.246l-11.963,16.933L185.258,225.521z"/>
		<path d="M228.318,128.914c8.904-7.59,18.064-6.208,26.081,3.034l1.574,1.816l-8.656,7.384l-2.076-2.396
			c-3.58-4.123-6.599-4.271-9.516-1.793c-2.91,2.489-3.214,5.474,0.361,9.606c10.303,11.893,30.137-1.142,44.444,15.367
			c8.02,9.249,7.938,18.515-1.054,26.184c-8.989,7.663-18.231,6.357-26.248-2.892l-3.077-3.55l8.662-7.388l3.573,4.135
			c3.58,4.123,6.698,4.052,9.613,1.565c2.912-2.489,3.458-5.538-0.126-9.662c-10.303-11.895-30.133,1.14-44.446-15.373
			C219.415,145.708,219.41,136.513,228.318,128.914z"/>
		<path d="M312.947,73.236c10.514-5.194,19.05-1.621,24.525,9.294l1.076,2.148l-10.22,5.046l-1.419-2.828
			c-2.439-4.87-5.337-5.756-8.776-4.054c-3.437,1.694-4.478,4.515-2.028,9.392c7.041,14.035,29.49,6.235,39.267,25.729
			c5.478,10.924,3.102,19.875-7.509,25.114c-10.609,5.238-19.243,1.723-24.723-9.193l-2.099-4.195l10.218-5.048l2.443,4.876
			c2.447,4.876,5.492,5.566,8.927,3.864c3.441-1.694,4.722-4.523,2.274-9.394c-7.041-14.041-29.486-6.238-39.269-25.737
			C300.16,87.337,302.437,78.425,312.947,73.236z"/>
		<path d="M479.056,64.227l16.563-0.502l0.332,10.878l-16.561,0.506l0.684,22.305l20.84-0.632l0.333,10.883
			l-32.902,0.992l-2.33-76.171l32.9-0.983l0.333,10.88l-20.839,0.624L479.056,64.227z"/>
		<path d="M571.323,73.656l15.206,3.387l-2.409,10.619l-15.201-3.381l-6.939,30.707l-11.781-2.617l16.812-74.376
			l31.163,6.934l-2.404,10.625l-19.382-4.311L571.323,73.656z"/>
		<path d="M655.787,102.043l14.012,6.771l-4.804,9.788l-14.008-6.762l-13.889,28.296l-10.859-5.244l33.629-68.537
			l28.722,13.863l-4.804,9.79l-17.866-8.619L655.787,102.043z"/>
		<path d="M731.589,129.617c7.943-9.307,17.424-10.476,26.475-2.871c9.042,7.599,9.438,17.069,1.499,26.375
			l-25.822,30.244c-7.943,9.301-17.42,10.472-26.471,2.873c-9.046-7.607-9.442-17.075-1.495-26.384L731.589,129.617z
			 M714.482,168.178c-3.544,4.16-3.049,7.285-0.115,9.751c2.933,2.462,6.113,2.425,9.666-1.727l26.813-31.403
			c3.544-4.154,3.049-7.279,0.12-9.745c-2.938-2.462-6.114-2.433-9.667,1.714L714.482,168.178z"/>
		<path d="M769.402,254.038c1.243-1.658,1.979-2.701,7.109-6.264l9.897-6.87c5.841-4.057,6.618-7.522,3.47-11.981
			l-2.392-3.396l-25.632,17.8l-6.928-9.811l62.963-43.713l10.442,14.813c7.184,10.172,5.494,17.85-4.217,24.597l-4.953,3.429
			c-6.474,4.504-12.146,5.382-17.3,2.45c1.396,6.345-2.239,11.256-8.808,15.819l-9.707,6.742c-3.062,2.127-5.251,3.771-6.899,6.38
			L769.402,254.038z M815.816,205.864l-19.336,13.419l2.701,3.842c2.586,3.658,5.779,4.763,10.819,1.268l6.2-4.309
			c4.494-3.119,5.407-6.01,2.953-9.493L815.816,205.864z"/>
		<path d="M869.035,276.393l13.152,34.642l-10.27,3.841l-4.449-11.715l-61.62,23.029l-4.25-11.207l61.616-23.029
			l-4.449-11.724L869.035,276.393z"/>
		<path d="M828.763,535.999c20.638,6.915,15.991,30.04,30.854,35.03c5.159,1.727,7.774,0.074,8.989-3.536
			c1.21-3.61,0.115-6.511-5.048-8.237l-5.164-1.727l3.603-10.732l4.44,1.479c11.559,3.883,16.222,11.872,12.487,23.025
			c-3.738,11.145-12.276,14.706-23.839,10.831c-20.646-6.915-15.99-30.04-30.854-35.021c-5.164-1.735-7.812-0.331-9.026,3.288
			c-1.21,3.61,0.059,6.337,5.218,8.063l2.995,1l-3.594,10.731l-2.276-0.752c-11.562-3.883-16.259-11.772-12.558-22.811
			C808.691,535.586,817.201,532.124,828.763,535.999z"/>
		<path d="M793.478,618.814c18.18,11.988,7.753,33.146,20.836,41.78c4.552,2.99,7.51,2.065,9.6-1.116
			c2.099-3.181,1.78-6.262-2.768-9.244l-4.544-3.008l6.233-9.451l3.904,2.578c10.187,6.717,12.648,15.639,6.175,25.454
			c-6.473,9.814-15.644,11.07-25.821,4.354c-18.181-11.979-7.754-33.138-20.841-41.763c-4.552-2.999-7.469-2.321-9.571,0.859
			c-2.094,3.188-1.569,6.139,2.979,9.137l2.636,1.744l-6.233,9.442l-1.999-1.305c-10.179-6.717-12.703-15.558-6.288-25.281
			C774.182,613.271,783.299,612.106,793.478,618.814z"/>
		<path d="M723.074,693.319l-15.437,13.772l-7.245-8.122l24.367-21.753l50.74,56.865l-24.373,21.745l-7.249-8.121
			l15.437-13.772l-14.854-16.647l-12.269,10.938l-7.254-8.121l12.273-10.938L723.074,693.319z"/>
		<path d="M692.019,795.863l-28.197,14.434l-4.957-9.691l17.54-8.98l-29.755-58.146l10.653-5.453L692.019,795.863z"
			/>
		<path d="M529.808,780.258L517.3,780.86l3.172,65.276l-11.967,0.578l-3.173-65.26l-12.506,0.604l-0.533-10.881
			l36.986-1.793L529.808,780.258z"/>
		<path d="M389.529,833.331c1.774-2.512,2.465-5.147,3.258-8.766l2.516-11.476
			c1.704-7.767,4.852-12.979,11.238-14.145c-4.672-3.586-6.025-9.121-4.346-16.779l1.284-5.85
			c2.516-11.483,8.962-15.97,21.084-13.31l17.649,3.866l-16.317,74.431l-11.7-2.562l6.646-30.312l-4.044-0.884
			c-5.312-1.165-8.212,0.876-9.727,7.791l-2.565,11.698c-1.328,6.056-2.012,7.13-3.068,8.906L389.529,833.331z M422.554,773.697
			c-4.151-0.9-6.473,1.033-7.638,6.361l-1.609,7.337c-1.305,5.957,0.937,8.443,5.294,9.401l4.571,1l5.017-22.86L422.554,773.697z"/>
		<path d="M331.2,792.46c-5.688,10.79-14.624,13.954-25.021,8.468c-10.403-5.485-12.83-14.64-7.142-25.43
			l18.489-35.054c5.692-10.782,14.624-13.946,25.023-8.46c10.397,5.485,12.83,14.64,7.14,25.43L331.2,792.46z M339.451,751.151
			c2.545-4.816,1.388-7.758-1.982-9.542c-3.369-1.776-6.453-1.058-8.991,3.75l-19.204,36.401c-2.539,4.809-1.382,7.758,1.988,9.534
			c3.367,1.784,6.449,1.074,8.991-3.751L339.451,751.151z"/>
		<path d="M267.271,693.534l-14.497-13.343l7.371-8.006l23.305,21.447l-51.597,56.072l-8.815-8.112l21.307-23.142
			l-11.376-10.468l7.375-8.014l11.368,10.476L267.271,693.534z"/>
		<path d="M212.452,629.571l-10.738-16.531l9.135-5.933l17.259,26.578l-63.932,41.516l-6.524-10.047l26.392-17.143
			l-8.421-12.963l9.135-5.932l8.423,12.971L212.452,629.571z"/>
		<path d="M174.933,553.184l-6.771-19.539l10.29-3.569l10.693,30.866l-72.021,24.95l-10.693-30.866l10.29-3.568
			l6.772,19.556l21.088-7.312l-5.378-15.54l10.286-3.561l5.384,15.54L174.933,553.184z"/>
</g>
  
<g class="leletters">
		<polygon points="328.368,482.653 328.368,513.222 428.771,513.222 428.771,601.713 404.665,601.713 
			404.665,632.29 641.061,632.29 641.061,613.263 641.061,601.713 641.061,573.862 610.488,573.862 610.488,601.713 
			459.355,601.713 459.355,395.898 610.488,395.898 610.488,424.695 641.061,424.695 641.061,395.898 641.061,385.299 
			641.061,365.326 404.665,365.326 404.665,395.898 428.771,395.898 428.771,482.653 381.719,482.653 381.719,276.826 
			405.828,276.826 405.828,246.248 327.027,246.248 327.027,276.826 351.134,276.826 351.134,482.653 		"/>
		<polygon points="553.651,482.124 475.506,482.124 475.506,512.701 568.939,512.701 568.939,512.701 
			584.228,512.701 584.228,456.248 553.651,456.248 		"/>
</g>
</svg>
            
          
!
            
              body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0;
  position: relative;
}

#bg{
  position:absolute;
  z-index:1;
  width: 100%;
  height: 100%;
  margin:0;
  top:0;
  left:0;
  bottom:0;
  background: url('https://c3.staticflickr.com/1/293/18910888954_5b8dc7ebf7_k.jpg') center center no-repeat;
  background-size: cover;
  &:before {
    content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to bottom right,#000,#666);
    animation-name: AnimateBG; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration: 7s; 
    background-size: 100% 100%;
		opacity: .5; 
  }
}

svg{
  width: 70vh;
  display: block;
  margin: 0 auto;
  z-index:2;
}

.leletters, .effortless, .ring{
  fill: #fff;
}

.effortless{
  -webkit-animation: spin1 2s infinite linear;
  -moz-animation: spin1 2s infinite linear;
  -o-animation: spin1 2s infinite linear;
  -ms-animation: spin1 2s infinite linear;
  animation: spin1 25s infinite linear;
  transform-origin: center center;
}

@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}

.leletters{
  -webkit-animation-name: spinner; 
  -webkit-animation-timing-function: linear; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-duration: 7s; 
  animation-name: spinner; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 7s; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d;
  transform-origin: center center;
}

@-webkit-keyframes spinner { 
    from 
    { 
        -webkit-transform: rotateY(0deg); 
    } 
    to { 
        -webkit-transform: rotateY(-360deg); 
    } 
} 

@keyframes spinner { 
    from { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateY(-360deg); 
        -ms-transform: rotateY(-360deg); 
        transform: rotateY(-360deg); 
    } 
}

@keyframes AnimateBG { 
  0%{background-size:100% 100%}
  50%{background-size:120% 100%}
  100%{background-size:110% 100%}
}
            
          
!
999px
Loading ..................

Console