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="logo" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="416px" height="416px" viewBox="-208 -208 416 416">
<g id="MidText-bottom">
	<path fill="#FFFFFF" d="M18.333,24.225c-1.521,0-2.399-0.82-2.926-2.633c-0.292-1.053-0.409-2.164-0.467-5.499l-6.494,1.58
		c0,4.797,0.176,6.552,0.936,8.249c1.288,2.925,3.979,4.329,8.308,4.329c7.196,0,10.647-3.392,10.647-10.471
		c0-5.558-1.404-8.015-6.961-12.11c-2.925-2.106-3.568-2.633-4.212-3.452c-0.994-1.111-1.404-2.34-1.404-3.92
		c0-2.691,0.994-4.212,2.808-4.212c2.106,0,2.925,1.58,2.925,5.616c0,0.293,0,0.877-0.058,1.58l6.202-1.521
		c-0.058-4.154-0.234-5.616-0.936-7.196c-1.228-2.691-3.977-4.154-7.898-4.154c-6.552,0-10.062,3.744-10.062,10.647
		c0,5.148,1.287,7.137,7.137,11.232c4.388,3.042,5.499,4.621,5.499,7.664C21.374,22.822,20.38,24.225,18.333,24.225L18.333,24.225z"
		/>
	<polygon fill="#FFFFFF" points="-30.5,30 -12.5,30 -12.5,24 -23.5,24 -23.5,12 -14.5,12 -14.5,6 -23.5,6 -23.5,-3 -13.5,-3
		-13.5,-9 -30.5,-9 	"/>
	<polygon fill="#FFFFFF" points="-74.5,-3 -74.5,30 -67.5,30 -67.5,-3 -61.5,-3 -61.5,-9 -80.5,-9 -80.5,-3 	"/>
	<polygon fill="#FFFFFF" points="-49.5,-9 -56.5,-9 -56.5,30 -49.5,30 -49.5,12 -43.5,12 -43.5,30 -36.5,30 -36.5,-9 -43.5,-9
		-43.5,6 -49.5,6 	"/>
	<path fill="#FFFFFF" d="M51.5,18.54c0,5.043-0.345,6.82-1.662,8.481C48.232,29.026,45.482,30,41.528,30
		c-4.355,0-7.278-1.204-8.768-3.553c-0.975-1.604-1.261-3.624-1.261-8.208v-27h7v28c0,1.981,0.117,2.738,0.582,3.379
		c0.467,0.699,1.456,1.165,2.447,1.165c0.933,0,1.922-0.467,2.388-1.165c0.466-0.642,0.582-1.398,0.582-3.379v-28h7V18.54z"/>
	<polygon fill="#FFFFFF" points="57.5,30 63.5,30 63.5,5.6 74.077,30 77.5,30 77.5,-9 71.5,-9 71.5,12.232 64.893,-9 57.5,-9 	"/>
</g>
<g id="MidText-top">
	<polygon fill="#FFFFFF" points="-8.5,-40.361 1.815,-17 5.5,-17 5.5,-56 -0.5,-56 -0.5,-35.272 -7.37,-56 -14.5,-56 -14.5,-17
		-8.5,-17 	"/>
	<polygon fill="#FFFFFF" points="-54.5,-36 -45.5,-36 -45.5,-42 -54.5,-42 -54.5,-50 -45.5,-50 -45.5,-56 -61.5,-56 -61.5,-17
		-54.5,-17 	"/>
	<rect x="28.5" y="-56" fill="#FFFFFF" width="7" height="39"/>
	<polygon fill="#FFFFFF" points="47.5,-40.361 57.776,-17 61.5,-17 61.5,-56 55.5,-56 55.5,-35.272 48.591,-56 41.5,-56 41.5,-17
		47.5,-17 	"/>
	<path fill="#FFFFFF" d="M-20.5-28.7c0,5.043-0.345,6.82-1.662,8.481c-1.605,2.006-4.356,2.98-8.309,2.98
		c-4.355,0-7.278-1.204-8.768-3.553C-40.214-22.397-40.5-24.416-40.5-29v-27h7v28c0,1.981,0.117,2.738,0.582,3.379
		c0.467,0.699,1.456,1.165,2.447,1.165c0.933,0,1.922-0.467,2.388-1.165C-27.616-25.263-27.5-26.019-27.5-28v-28h7V-28.7z"/>
</g>
<g id="Text-top">
	<polygon fill="#FFFFFF" points="108.25,-89.676 110.854,-86.631 121.89,-96.068 125.492,-91.856 128.3,-94.258 118.491,-105.728
		115.683,-103.326 119.286,-99.114 	"/>
	<polygon fill="#FFFFFF" points="90.755,-106.466 98.27,-115.279 97.468,-100.741 100.062,-98.529 111.883,-112.391
		108.874,-114.958 101.595,-106.423 102.379,-120.497 99.567,-122.895 87.745,-109.032 	"/>
	<path fill="#FFFFFF" d="M12.437-142.786l3.138,0.271l3.388,6.144l4.668,0.403l-3.875-6.865c2.381-0.657,4.123-2.361,4.374-5.291
		l0.005-0.052c0.322-3.734-2.05-6.211-6.327-6.581l-8.297-0.716l-1.566,18.15l3.993,0.344
		C11.937-136.979,12.437-142.786,12.437-142.786z M13.192-151.523l3.967,0.342c1.944,0.168,3.061,1.152,2.913,2.864l-0.005,0.052
		c-0.131,1.529-1.336,2.47-3.281,2.302l-4.044-0.35L13.192-151.523L13.192-151.523z"/>
	<polygon fill="#FFFFFF" points="83.405,-116.468 74.935,-121.57 76.907,-124.846 84.264,-120.416 86.104,-123.47 78.747,-127.901
		80.654,-131.066 89.013,-126.031 90.852,-129.086 79.082,-136.174 69.684,-120.57 81.567,-113.414 	"/>
	<path fill="#FFFFFF" d="M56.864-126.229c3.63,1.503,6.956,0.683,8.339-2.659l0.02-0.047c1.214-2.934-0.2-4.956-3.247-7.26
		c-2.6-1.949-3.174-2.609-2.715-3.716l0.02-0.048c0.339-0.817,1.353-1.158,2.773-0.57c1.418,0.588,2.625,1.821,3.688,3.472
		l3.078-1.993c-1.14-2.077-2.913-3.712-5.365-4.728c-3.438-1.425-6.727-0.42-7.992,2.634l-0.02,0.048
		c-1.384,3.342,0.415,5.186,3.448,7.455c2.514,1.887,2.892,2.606,2.504,3.544l-0.02,0.047c-0.408,0.987-1.571,1.209-3.085,0.582
		c-1.924-0.796-3.182-2.247-4.179-4.125l-3.274,1.714C52.11-129.24,54.314-127.285,56.864-126.229z"/>
	<polygon fill="#FFFFFF" points="44.783,-134.817 35.182,-137.19 36.101,-140.903 44.438,-138.843 45.293,-142.305 36.955,-144.365
		37.842,-147.953 47.317,-145.611 48.171,-149.073 34.833,-152.369 30.461,-134.684 43.928,-131.356 	"/>
	<path fill="#FFFFFF" d="M-9.15-136.739l-0.369-5.451l3.037-0.207c4.076-0.276,7.2-2.678,6.916-6.885l-0.004-0.051
		c-0.251-3.713-3.048-6.106-7.384-5.813l-7.425,0.503l1.23,18.175L-9.15-136.739z M-7.046-151.512c2-0.136,3.31,0.74,3.432,2.532
		l0.004,0.052c0.105,1.557-0.982,2.831-2.982,2.966l-3.168,0.215l-0.376-5.557L-7.046-151.512L-7.046-151.512z"/>
	<path fill="#FFFFFF" d="M129.112-84.256l-0.045,0.027c-3.059,1.928-2.654,4.474-1.49,8.076c0.963,2.991,0.855,3.797-0.003,4.338
		l-0.044,0.028c-0.903,0.568-1.98,0.079-2.855-1.307c-1.11-1.761-1.3-3.671-1.029-5.779l-3.663-0.491
		c-0.486,2.889,0.186,5.758,1.656,8.091c2.095,3.324,5.283,4.576,8.343,2.646l0.044-0.028c2.685-1.693,2.698-4.161,1.542-7.801
		c-0.997-3.094-1.083-3.961-0.07-4.599l0.044-0.028c0.749-0.472,1.774-0.165,2.592,1.135c0.819,1.299,1.093,3.002,1.007,4.965
		l3.663,0.15c0.27-2.355-0.233-4.712-1.649-6.958C135.171-84.94,131.907-86.018,129.112-84.256z"/>
	<path fill="#FFFFFF" d="M-83.371-107.592l-1.036-4.29l6.252-4.501l3.738,2.342l3.401-2.448l-17.056-10.328l-2.999,2.159
		l4.384,19.452C-86.686-105.206-83.371-107.592-83.371-107.592z M-81.384-118.418l-3.928,2.828l-1.488-6.209L-81.384-118.418z"/>
	<polygon fill="#FFFFFF" points="-101.396,-90.743 -109.887,-98.957 -100.823,-97.249 -100.751,-97.323 -102.779,-106.416
		-94.232,-98.149 -91.464,-101.011 -104.556,-113.675 -107.558,-110.57 -105.351,-101.774 -114.217,-103.688 -117.22,-100.583
		-104.129,-87.92 	"/>
	<polygon fill="#FFFFFF" points="-45.266,-144.073 -40.915,-130.22 -37.092,-131.421 -41.443,-145.274 -36.155,-146.936
		-37.262,-150.46 -51.663,-145.937 -50.554,-142.412 	"/>
	<path fill="#FFFFFF" d="M-61.851-121.382l-2.582-5.227l2.823-1.395l6.081,3.497l4.2-2.073l-6.87-3.864
		c1.696-1.795,2.301-4.155,0.998-6.791l-0.023-0.047c-1.66-3.36-4.972-4.249-8.822-2.347l-7.466,3.687l8.066,16.334L-61.851-121.382
		L-61.851-121.382z M-68.316-134.472l3.57-1.763c1.75-0.864,3.215-0.6,3.975,0.938l0.024,0.047c0.68,1.376,0.138,2.806-1.613,3.669
		l-3.639,1.798L-68.316-134.472L-68.316-134.472z"/>
	<polygon fill="#FFFFFF" points="-115.066,-72.731 -119.678,-75.85 -120.308,-78.819 -110.724,-79.154 -108.028,-83.14
		-121.055,-82.59 -123.303,-93.06 -126.013,-89.053 -123.557,-78.472 -130.152,-82.931 -132.396,-79.613 -117.311,-69.412 	"/>
</g>
<g id="Text-bottom">
	<polygon fill="#FFFFFF" points="100.76,103.513 102.393,112.434 93.67,109.95 90.472,112.854 102.716,126.341 105.626,123.699
		97.684,114.951 106.619,117.244 106.697,117.174 105.262,107.967 113.255,116.772 116.204,114.095 103.958,100.609 	"/>
	<path fill="#FFFFFF" d="M24.427,149.325l0.484,3.427l3.993-0.563l0.363,2.577c-0.904,0.863-2.141,1.405-3.583,1.608
		c-3.195,0.451-5.805-1.652-6.269-4.95l-0.007-0.051c-0.432-3.066,1.502-5.94,4.388-6.347c2.087-0.294,3.418,0.202,4.973,1.164
		l2.075-3.367c-2.107-1.333-4.188-1.932-7.433-1.475c-5.463,0.77-8.864,5.532-8.142,10.659l0.007,0.051
		c0.752,5.334,5.172,8.73,10.789,7.94c3.298-0.465,5.667-2.112,7.301-3.946l-1.104-7.832L24.427,149.325L24.427,149.325z"/>
	<path fill="#FFFFFF" d="M60.45,139.279l1.333,3.194l3.721-1.553l1.003,2.402c-0.657,1.062-1.716,1.899-3.061,2.461
		c-2.978,1.242-6.033-0.133-7.315-3.207l-0.02-0.048c-1.192-2.858-0.047-6.127,2.643-7.249c1.945-0.812,3.358-0.668,5.107-0.128
		l1.157-3.781c-2.375-0.757-4.54-0.813-7.565,0.45c-5.092,2.124-7.18,7.591-5.186,12.37l0.02,0.047
		c2.073,4.971,7.209,7.142,12.443,4.958c3.074-1.282,4.95-3.475,6.069-5.661l-3.046-7.299L60.45,139.279L60.45,139.279z"/>
	<polygon fill="#FFFFFF" points="2.84,154.393 -5.367,142.935 -9.062,142.829 -9.587,161.038 -5.633,161.151 -5.298,149.576
		3.185,161.407 6.593,161.505 7.12,143.296 3.166,143.182 	"/>

		<rect x="-22.584" y="141.203" transform="matrix(0.9878 0.156 -0.156 0.9878 23.1913 5.049)" fill="#FFFFFF" width="4.009" height="18.22"/>
	<polygon fill="#FFFFFF" points="-34.945,145.435 -42.039,143.362 -40.016,136.442 -43.864,135.318 -48.973,152.804
		-45.125,153.928 -43.074,146.908 -35.98,148.982 -38.032,156.001 -34.186,157.125 -29.075,139.641 -32.922,138.516 	"/>
	<polygon fill="#FFFFFF" points="123.122,100.674 120.117,98.308 125.431,91.562 122.631,89.357 117.316,96.101 114.415,93.815
		120.453,86.15 117.652,83.944 109.151,94.736 123.458,106.008 132.041,95.114 129.241,92.907 	"/>
	<path fill="#FFFFFF" d="M76.004,122.488l3.18,19.681l3.455-2.178l-0.77-4.344l6.515-4.107l3.587,2.568l3.544-2.235l-16.387-11.355
		L76.004,122.488z M85.287,129.309l-4.095,2.581l-1.102-6.287L85.287,129.309z"/>
	<path fill="#FFFFFF" d="M-110.457,113.87l3.026,2.744l3.978-1.908l5.706,5.174l-1.51,4.146l3.104,2.815l6.541-18.835l-2.737-2.482
		L-110.457,113.87L-110.457,113.87z M-96.429,116.298l-3.585-3.251l5.761-2.75L-96.429,116.298z"/>
	<polygon fill="#FFFFFF" points="-81.785,114.837 -83.858,117.895 -79.27,121.005 -87.418,133.025 -84.101,135.273 -75.953,123.254
		-71.365,126.365 -69.292,123.306 	"/>
	<path fill="#FFFFFF" d="M-56.251,129.687c-5.045-2.417-10.397-0.278-12.634,4.391l-0.023,0.047
		c-2.26,4.717-0.456,10.167,4.376,12.484c3.167,1.517,5.584,1.291,8.139,0.293l-1.187-3.424c-1.853,0.555-3.362,0.755-5.24-0.144
		c-2.816-1.349-3.639-4.628-2.29-7.444l0.023-0.047c1.349-2.816,4.444-4.16,7.214-2.834c1.642,0.787,2.595,2.109,3.312,3.867
		l3.57-1.549C-51.794,133.092-53.153,131.171-56.251,129.687L-56.251,129.687z"/>
	<polygon fill="#FFFFFF" points="-104.838,92.607 -113.858,93.544 -110.707,85.041 -113.355,81.627 -127.747,92.792 -125.34,95.895
		-116.005,88.656 -118.981,97.386 -118.917,97.468 -109.628,96.75 -119.024,104.038 -116.584,107.184 -102.191,96.02 	"/>
</g>
<g id="Inner-clip-group" clip-path="url(#Inner-clip_1_)">
	<defs>
	</defs>
	<clipPath id="Inner-clip_1_">
		<path id="Inner-clip" d="M2.997,124.177c-66.817,0-121.178-54.36-121.178-121.177c0-66.813,54.36-121.17,121.178-121.17
			c66.818,0,121.179,54.357,121.179,121.169C124.176,69.817,69.815,124.177,2.997,124.177z"/>
	</clipPath>

		<path id="Water" fill="none" stroke="#FFFFFF" stroke-width="6.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M-115.191,40.127c0.012,1.014,0.445,2.909,2.3,4.664c1.81,1.713,5.047,3.293,10.831,3.293c5.784,0,9.022-1.579,10.833-3.292
		c1.855-1.756,2.291-3.65,2.301-4.665c0.012,1.014,0.445,2.909,2.3,4.664c1.81,1.713,5.047,3.293,10.831,3.293
		c5.784,0,9.022-1.579,10.833-3.292c1.855-1.756,2.291-3.65,2.301-4.665c0.012,1.014,0.445,2.909,2.3,4.664
		c1.81,1.713,5.047,3.293,10.831,3.293c5.784,0,9.022-1.579,10.833-3.292c1.855-1.756,2.291-3.65,2.301-4.665
		c0.012,1.014,0.445,2.909,2.3,4.664c1.81,1.713,5.047,3.293,10.831,3.293c5.784,0,9.022-1.579,10.833-3.292
		c1.855-1.756,2.291-3.65,2.301-4.665c0.012,1.014,0.445,2.909,2.3,4.664c1.81,1.713,5.047,3.293,10.831,3.293
		c5.784,0,9.022-1.579,10.833-3.292c1.855-1.756,2.291-3.65,2.301-4.665c0.012,1.014,0.445,2.909,2.3,4.664
		c1.81,1.713,5.047,3.293,10.831,3.293c5.784,0,9.022-1.579,10.833-3.292c1.855-1.756,2.291-3.65,2.301-4.665
		c0.012,1.014,0.445,2.909,2.3,4.664c1.81,1.713,5.047,3.293,10.831,3.293c5.784,0,9.022-1.579,10.833-3.292
		c1.855-1.756,2.291-3.65,2.301-4.665c0.012,1.014,0.445,2.909,2.3,4.664c1.81,1.713,5.047,3.293,10.831,3.293
		c5.784,0,9.022-1.579,10.833-3.292c1.855-1.756,2.291-3.65,2.301-4.665c0.012,1.014,0.445,2.909,2.3,4.664
		c1.81,1.713,5.047,3.293,10.831,3.293c5.784,0,9.022-1.579,10.833-3.292c1.855-1.756,2.291-3.65,2.301-4.665"/>
	<g id="Sun">

			<circle id="Sun-circle" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" cx="3.001" cy="-127.865" r="35.105"/>

			<line id="Sun-4_1_" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="30.869" y1="-104.85" x2="44.309" y2="-91.41"/>

			<line id="Sun-3_1_" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="18.259" y1="-95.529" x2="25.303" y2="-78.663"/>

			<line id="Sun-2" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="3.001" y1="-92.76" x2="3.001" y2="-73.785"/>

			<line id="Sun-1" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="-12.257" y1="-95.529" x2="-19.302" y2="-78.663"/>

			<line id="Sun-0" fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" x1="-24.868" y1="-104.85" x2="-38.308" y2="-91.41"/>
	</g>
	<g id="Kmart-clip-group"  clip-path="url(#Kmart-clip_1_)">
		<defs>
		</defs>
		<clipPath id="Kmart-clip_1_">
			<path id="Kmart-clip" d="M-108.924,49.582c18.738,44.926,62.888,74.654,111.923,74.654c49.032,0,93.184-29.732,111.924-74.654
				c-1.993,0.58-4.284,0.871-6.865,0.871c-5.504,0-9.696-1.325-12.459-3.941c-0.243-0.23-0.466-0.461-0.672-0.692
				c-0.206,0.231-0.431,0.463-0.673,0.693c-2.764,2.615-6.957,3.94-12.46,3.94s-9.696-1.325-12.459-3.941
				c-0.243-0.23-0.466-0.461-0.673-0.692c-0.205,0.231-0.429,0.463-0.673,0.692c-2.766,2.615-6.958,3.941-12.461,3.941
				c-5.504,0-9.696-1.325-12.459-3.941c-0.243-0.23-0.467-0.462-0.673-0.693c-0.206,0.232-0.43,0.463-0.673,0.694
				c-2.764,2.615-6.957,3.94-12.46,3.94s-9.696-1.325-12.459-3.941c-0.243-0.23-0.466-0.461-0.673-0.692
				c-0.205,0.231-0.429,0.463-0.673,0.692c-2.764,2.615-6.957,3.941-12.46,3.941s-9.696-1.325-12.459-3.941
				c-0.243-0.23-0.466-0.461-0.672-0.692c-0.206,0.231-0.43,0.463-0.673,0.693c-2.764,2.615-6.957,3.94-12.46,3.94
				s-9.696-1.325-12.459-3.941c-0.243-0.23-0.466-0.461-0.672-0.692c-0.206,0.231-0.43,0.463-0.673,0.693
				c-2.764,2.615-6.957,3.94-12.46,3.94c-5.504,0-9.696-1.325-12.459-3.942c-0.242-0.23-0.466-0.46-0.672-0.691
				c-0.206,0.231-0.43,0.463-0.673,0.693c-2.764,2.615-6.957,3.94-12.46,3.94c-5.504,0-9.696-1.325-12.459-3.942
				c-0.242-0.23-0.466-0.46-0.672-0.691c-0.206,0.231-0.43,0.463-0.673,0.693c-2.764,2.615-6.957,3.94-12.46,3.94
				C-104.64,50.453-106.933,50.162-108.924,49.582z"/>
		</clipPath>
		<polygon fill="#FFFFFF" points="-46.358,80.201 -36.72,71.071 -45.962,71.071 -55.373,80.091
			-55.373,63.987 -63.028,63.987 -63.028,92.114 -55.373,92.114 -55.373,81.055 -45.962,92.114 -35.522,92.114 -46.242,80.201 		"/>
		<path fill="#FFFFFF" d="M-3.94,70.338c-2.95,0-6.466,1.476-8.393,4.704
			c-1.191-2.66-3.456-4.704-6.633-4.704c-2.78,0-5.897,0.678-8.221,4.538v-3.805h-7.369h-0.002v21.043h7.594V81.676
			c0-4.197,2.725-5.953,4.594-5.953c2.666,0,3.801,2.216,3.801,4.478v11.913h7.373V80.546c0-2.666,2.436-4.823,4.593-4.823
			c1.874,0.059,4.082,1.477,4.082,4.478v11.913h7.316V79.349C4.794,73.117,0.77,70.282-3.94,70.338z"/>
		<path fill="#FFFFFF" d="M67.914,77.309v-6.64h-6.238v-6.683h-7.543v0v20.357
			c0,8.108,6.013,9.078,13.781,7.486v-4.992c-4.195,0.795-6.238,0.51-6.238-2.265v-7.264H67.914z"/>
		<path fill="#FFFFFF" d="M42.114,75.496v-4.424h-7.318v21.042h7.603v-9.47
			c0-2.044,1.528-3.917,3.347-4.705c1.749-0.739,4.023-0.852,6.743-0.629v-6.569C47.554,70.338,43.53,71.129,42.114,75.496z"/>
		<path fill="#FFFFFF" d="M20.169,70.338c-6.131,0-11.573,2.324-11.573,6.637h7.597
			c0-1.253,1.642-2.334,3.858-2.334c2.72,0,4.081,1.535,4.081,4.144c-5.387,0.11-16.901-0.964-16.901,7.037
			c-0.11,5.494,4.596,6.858,8.962,6.858c3.859,0,6.467-1.698,8.107-3.797v3.23h7.262V78.387
			C31.563,73.057,27.766,70.338,20.169,70.338z M17.499,88.144c-2.152,0-3.462-0.846-3.462-2.379c0-3.744,7.77-2.778,10.096-2.889h0
			C24.022,86.156,20.505,88.091,17.499,88.144z"/>
	</g>
</g>
<path id="Circle-outer" fill="none" stroke="#FFFFFF" stroke-width="5.2" stroke-miterlimit="10" d="M3-172
	c47.486,0,91.336,18.905,123.715,51.285C159.095-88.335,178-44.485,178,3s-18.905,91.335-51.285,123.715S50.486,178,3,178
	s-91.335-18.905-123.715-51.285S-172,50.485-172,3c0-47.485,18.905-91.335,51.285-123.715S-44.485-172,3-172z"/>
<path id="Circle-inner" fill="none" stroke="#FFFFFF" stroke-width="5.2" stroke-miterlimit="10" d="M2.998,126.605
	c-68.156,0-123.605-55.449-123.605-123.605c0-68.151,55.449-123.597,123.605-123.597c68.157,0,123.606,55.446,123.606,123.596
	C126.604,71.156,71.155,126.605,2.998,126.605z"/>
<circle id="Circle-right" fill="#FFFFFF" cx="151.999" cy="3" r="8.799"/>
<circle id="Circle-left" fill="#FFFFFF" cx="-145.749" cy="3" r="8.799"/>
</svg>

              
            
!

CSS

              
                html, body {
  display: flex;
  height: 100%;
  width: 100%;
  background: #408000;
}
svg {
  margin: auto;
}
              
            
!

JS

              
                /*
After Effects animation: Michael Knobelsdorf
SVG adaptation: Federico Brigante, bfred.it
for Wildlife.la and Kmart
*/

var tl = new TimelineMax({
  repeat: -1
});
tl.addLabel('logo-start', 0.5);

/*outer circles*/
tl.staggerFrom('#Circle-outer,#Circle-inner', 0.6, {
	scale: 0,
	opacity: 0,
	ease: Back.easeOut
}, -0.1, 'logo-start');

/*smaller circles*/
tl.from('#Circle-right,#Circle-left', 0.7, {
	scale: 0.5,
	opacity: 0,
	ease: Back.easeOut
}, 'logo-start');

/*outer text*/
tl.staggerFrom('#Text-top,#Text-bottom', 0.6, {
	rotation: -30,
	opacity: 0,
	ease: Back.easeOut.config(0.53)
}, 0.1, '-=0.4');

/*inner text*/
tl.staggerFrom('#MidText-top,#MidText-bottom', 1, {
	opacity: 0
}, -0.5, '-=0.4');

tl.addLabel('before-inner-text-end','-=1');

/*sun*/
tl.from('#Sun', 1, {
	y: -50,
	ease: Back.easeOut
}, 'before-inner-text-end');

/*sun shines*/
tl.staggerFrom('#Sun line',0.3,{
	strokeWidth: 0,
	ease: Back.easeOut
}, -0.05, '-=0.7');

/*water line*/
tl.from('#Water,#Kmart-clip', 3, {
	rotation:-5,
	ease: Elastic.easeOut.config(2)
}, 'before-inner-text-end');
tl.from('#Water,#Kmart-clip', 3, {
	x: -20,
	ease: Elastic.easeOut.config(0.8, 0.5)
}, 'before-inner-text-end');
tl.from('#Water,#Kmart-clip', 3, {
	y: 100,
	ease: Quart.easeOut
}, 'before-inner-text-end');

/*water line shrink*/
tl.fromTo('#Water', 3, {
	strokeDasharray: 295,
	strokeDashoffset: 0
},{
	strokeDasharray: 202,
	strokeDashoffset: -50,
	autoRound: false,
	ease: Cubic.easeInOut
}, 'before-inner-text-end');

              
            
!
999px

Console