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="container">
	<div class="cat-backface">

	</div>
	<svg xmlns="http://www.w3.org/2000/svg" width="406px" height="171px" viewBox="0 0 406 171">
		<defs>
			<linearGradient id="cat-Gradient-0" x1="314.548" y1="47" x2="314.079" y2="129.86" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#ccc09e" />
				<stop offset="1" stop-color="#f6eccd" />
			</linearGradient>
			<linearGradient id="cat-Gradient-1" x1="62.9472" y1="80.1998" x2="62.9472" y2="109.011" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#f8f0d6" />
				<stop offset="1" stop-color="#fae5ab" />
			</linearGradient>
			<linearGradient id="cat-Gradient-2" x1="62.0546" y1="15.76" x2="62.0546" y2="77.7597" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#f8f0d6" />
				<stop offset="1" stop-color="#eeddad" />
			</linearGradient>
			<linearGradient id="cat-Gradient-3" x1="8.95779" y1="0" x2="8.95779" y2="10.8308" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#eeeeee" />
				<stop offset="1" stop-color="#d8d8d8" />
			</linearGradient>
			<linearGradient id="cat-Gradient-4" x1="15.5" y1="0" x2="15.5" y2="53.5" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#a6f9cc" />
				<stop offset="1" stop-color="#bfe7c8" />
			</linearGradient>
			<linearGradient id="cat-Gradient-5" x1="3.82337" y1="0" x2="3.82337" y2="2.34062" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#eeeeee" />
				<stop offset="1" stop-color="#d8d8d8" />
			</linearGradient>
			<linearGradient id="cat-Gradient-6" x1="7.12591" y1="2.64209" x2="-4.41724" y2="4.76537" gradientUnits="userSpaceOnUse">
				<stop offset="0" stop-color="#eeeeee" />
				<stop offset="1" stop-color="#d8d8d8" />
			</linearGradient>
		</defs>

		<title>cat_scene</title>
		<g id="cat-Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(201,83) translate(-201,-83)">
			<g id="cat-cat_scene" transform="translate(203,90.7573) translate(-203,-90.7573)">
				<path id="cat-Path-6" d="M334.973,58.5587C314.5,55.5587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5" stroke="url(#cat-Gradient-0)" stroke-width="5" stroke-linecap="round" transform="translate(451.576,74.6913) translate(-314.548,-73.25)" style="animation: 5.9s linear both cat-Path-6_t, 5.9s linear both cat-Path-6_d;" />
				<g id="cat-Group-6" opacity="0.97619" transform="translate(238.447,163.928) translate(-62.9472,-73.9277)" style="animation: 5.9s linear both cat-Group-6_t;">
					<path id="cat-Triangle" d="M94.1926,68.8408L100.169,81.846L100.169,81.846L100.687,82.973C109.451,102.042,101.096,124.606,82.0265,133.369C77.0493,135.657,71.6364,136.841,66.1587,136.841L59.7264,136.841C38.7396,136.841,21.7264,119.828,21.7264,98.8408C21.7264,93.3631,22.9107,87.9502,25.198,82.973L31.6926,68.8408C39.624,51.5819,60.0449,44.0206,77.3038,51.952C84.7702,55.3833,90.7613,61.3744,94.1926,68.8408Z" fill="url(#cat-Gradient-1)" transform="translate(62.9472,92.8213) translate(-62.9472,-92.8213)" />
					<g id="cat-Group" transform="translate(47.2195,40.9476) rotate(7) translate(-27.1478,-32.5796)" style="animation: 5.9s linear both cat-Group_t;">
						<path id="cat-Rectangle" d="M14.9252,3.52418C15.862,3.52418,16.7648,4.23332,17.7274,5.47849C18.8698,6.95631,20.0628,9.1982,21.3736,12.1596C24.6423,19.5445,24.7292,25.8667,21.5517,31.1143L21.5517,31.1143L8.48694,31.1143C5.31221,26.3384,5.41937,20.0076,8.68373,12.149C9.92883,9.15154,11.067,6.94074,12.1575,5.48757C13.1102,4.21785,14.0017,3.52418,14.9252,3.52418Z" stroke="#979797" fill="#F38C63" transform="translate(15.0264,17.3193) rotate(-27) translate(-15.0264,-17.3193)" />
						<path id="cat-Path" d="M8.92774,4.81811C15.7321,11.1185,19.1343,16.0958,19.1343,19.75C19.1343,23.4042,20.3314,21.3251,22.7255,13.5126C21.0874,11.8745,19.6384,10.5514,18.3783,9.54338C16.7837,8.26769,14.3981,6.62096,12.897,5.76316C11.5681,5.00383,10.5343,4.7529,9.87279,4.6291C9.43559,4.54727,9.12057,4.61028,8.92774,4.81811Z" fill="#D1B980" transform="translate(15.8266,13.0456) translate(-15.8266,-13.0456)" />
					</g>
					<g id="cat-Group-Copy-2" transform="translate(75.1264,40.9476) rotate(-7) scale(-1,1) translate(-27.1478,-32.5796)" style="animation: 5.9s linear both cat-Group-Copy-2_t;">
						<path id="cat-Rectangle-2" d="M14.9252,3.52418C15.862,3.52418,16.7648,4.23332,17.7274,5.47849C18.8698,6.95631,20.0628,9.1982,21.3736,12.1596C24.6423,19.5445,24.7292,25.8667,21.5517,31.1143L21.5517,31.1143L8.48694,31.1143C5.31221,26.3384,5.41937,20.0076,8.68373,12.149C9.92883,9.15154,11.067,6.94074,12.1575,5.48757C13.1102,4.21785,14.0017,3.52418,14.9252,3.52418Z" stroke="#979797" fill="#F38C63" transform="translate(15.0264,17.3193) rotate(-27) translate(-15.0264,-17.3193)" />
						<path id="cat-Path-5" d="M8.92774,4.81811C15.7321,11.1185,19.1343,16.0958,19.1343,19.75C19.1343,23.4042,20.3314,21.3251,22.7255,13.5126C21.0874,11.8745,19.6384,10.5514,18.3783,9.54338C16.7837,8.26769,14.3981,6.62096,12.897,5.76316C11.5681,5.00383,10.5343,4.7529,9.87279,4.6291C9.43559,4.54727,9.12057,4.61028,8.92774,4.81811Z" fill="#D1B980" transform="translate(15.8266,13.0456) translate(-15.8266,-13.0456)" />
					</g>
					<path id="cat-Oval" d="M62.9049,77.7597C83.3368,77.7597,99.0498,68.7284,99.0498,51.6077C99.0498,34.4871,84.3587,15.8559,62.9049,15.7604C41.4511,15.6649,25.0594,34.4871,25.0594,51.6077C25.0594,68.7284,42.473,77.7597,62.9049,77.7597Z" fill="url(#cat-Gradient-2)" transform="translate(62.0546,46.7598) translate(-62.0546,-46.7598)" />
					<g id="cat-eyes" transform="translate(62.4047,42.4407) translate(-21.9622,-3.55856)" style="animation: 5.9s linear both cat-eyes_t;">
						<g id="cat-Group-4" transform="translate(3.55856,3.55856) translate(-3.55856,-3.55856)">
							<ellipse id="cat-Oval-2" fill="#6DBC63" rx="3.55856" ry="3.55856" transform="translate(3.55856,3.55856)" />
							<ellipse id="cat-Oval-Copy-3" fill="#252725" rx="2.5" ry="2.5" transform="translate(3.55856,3.55856)" />
							<path id="cat-Rectangle-3" stroke="#979797" fill="#FDF9F9" />
						</g>
						<g id="cat-Group-4-Copy" transform="translate(40.3657,3.55856) scale(-1,1) translate(-3.55856,-3.55856)">
							<ellipse id="cat-Oval-3" fill="#6DBC63" rx="3.55856" ry="3.55856" transform="translate(3.55856,3.55856)" />
							<ellipse id="cat-Oval-Copy-3-2" fill="#252725" rx="2.5" ry="2.5" transform="translate(3.55856,3.55856)" />
							<path id="cat-Rectangle-4" stroke="#979797" fill="#FDF9F9" />
						</g>
					</g>
					<path id="cat-Oval-4" d="M62.2281,77.8053C74.4745,77.8053,85.4426,74.9452,91.4426,68.9452C92.5101,67.8777,95.4426,65.4863,95.4426,63.9452C95.4426,57.3205,81.7692,55.2065,72.4426,51.4452C69.8127,50.3846,66.686,44.8879,64.4426,40.9452C63.3305,38.9908,63.1025,36.9452,61.9426,36.9452C60.7959,36.9452,60.5543,39.0574,59.4426,40.9452C57.1609,44.8194,53.9672,50.1815,51.0498,51.4452C42.3733,55.2034,29.4426,57.6665,29.4426,63.9452C29.4426,66.2841,32.4577,68.7637,34.9426,70.4452C41.1049,74.6151,51.222,77.8053,62.2281,77.8053Z" fill="#F38C63" opacity="0.144973" transform="translate(62.4426,57.3752) translate(-62.4426,-57.3752)" />
					<g id="cat-Group-2" stroke="#D1B980" stroke-linecap="round" stroke-width="0.5" transform="translate(31.4426,63.6952) translate(-9,-4.75)">
						<path id="cat-Path-2" d="M18,2C14.6667,1.33333,12,1,10,1C8,1,4.66667,0.666667,0,0" transform="translate(9,1) translate(-9,-1)" />
						<path id="cat-Path-2-Copy-5" d="M18,4.84143C14.7017,4.17477,12.063,3.84143,10.084,3.84143C8.13429,3.84143,4.8429,4.0545,0.209832,4.48064C0.163405,4.48491,0.0934607,4.49136,0,4.5" transform="translate(9,4.34143) translate(-9,-4.34143)" />
						<path id="cat-Path-2-Copy-6" d="M18,7.68287C14.6667,7.0162,12,6.68287,10,6.68287C8,6.68287,4.83333,7.62191,0.5,9.5" transform="translate(9.25,8.09143) translate(-9.25,-8.09143)" />
					</g>
					<g id="cat-Group-2-Copy" stroke="#D1B980" stroke-linecap="round" stroke-width="0.5" transform="translate(93.3669,63.6952) scale(-1,1) translate(-9,-4.75)">
						<path id="cat-Path-2-2" d="M18,2C14.6667,1.33333,12,1,10,1C8,1,4.66667,0.666667,0,0" transform="translate(9,1) translate(-9,-1)" />
						<path id="cat-Path-2-Copy-5-2" d="M18,4.84143C14.7017,4.17477,12.063,3.84143,10.084,3.84143C8.13429,3.84143,4.8429,4.0545,0.209832,4.48064C0.163405,4.48491,0.0934607,4.49136,0,4.5" transform="translate(9,4.34143) translate(-9,-4.34143)" />
						<path id="cat-Path-2-Copy-6-2" d="M18,7.68287C14.6667,7.0162,12,6.68287,10,6.68287C8,6.68287,4.83333,7.62191,0.5,9.5" transform="translate(9.25,8.09143) translate(-9.25,-8.09143)" />
					</g>
					<g id="cat-Group-5" transform="translate(62.2124,58.8705) translate(-36.2124,-18.1729)">
						<g id="cat-mask" transform="translate(36.2124,20.5647) translate(-36.2124,-20.5647)">
							<path id="cat-Rectangle-5" d="M23.5546,3L31.9426,3L31.9426,3L35.9426,0.747584L39.9426,3L48.5546,3C56.2866,3,62.5546,9.26801,62.5546,17L62.5546,21.2476L62.5546,21.2476L62.5546,26.3817C62.5546,34.1137,56.2866,40.3817,48.5546,40.3817L23.5546,40.3817C15.8226,40.3817,9.55463,34.1137,9.55463,26.3817L9.55463,21.3024L9.55463,21.3024L9.55463,17C9.55463,9.26801,15.8226,3,23.5546,3Z" fill="#FFFFFF" transform="translate(36.0546,20.5647) translate(-36.0546,-20.5647)" />
							<path id="cat-Path-2-Copy" stroke="#FEFCFC" stroke-linecap="round" d="M0,12.2476L11,4.84143" transform="translate(5.5,8.24758) scale(-1,1) translate(-5.5,-8.24758)" />
							<path id="cat-Path-2-Copy-2" stroke="#FEFCFC" stroke-linecap="round" d="M61.4247,12.3329L72.4247,4.92674" transform="translate(66.9247,8.62982) translate(-66.9247,-8.62982)" />
							<path id="cat-Path-2-Copy-3" stroke="#FEFCFC" stroke-linecap="round" d="M61.9962,28.1432L69.4426,23.4249" transform="translate(65.7194,25.7841) translate(-65.7194,-25.7841)" />
							<path id="cat-Path-2-Copy-4" stroke="#FEFCFC" stroke-linecap="round" d="M2.90294,28.1432L9.6523,23.5004" transform="translate(6.33146,25.9507) scale(-1,1) translate(-6.33146,-25.9507)" />
						</g>
						<text id="cat-KN95" font-family="Airbnb Cereal App" font-size="4" font-weight="400" letter-spacing="0.4" fill="#5E615D" transform="translate(27.7588,14.4263) translate(-27.7588,-14.4263)">
							<tspan x="42.9176669" y="31.716649" transform="translate(21.4588,15.8583) translate(-21.4588,-15.8583)">KN95</tspan>
						</text>
						<text id="cat-cat’s-edition" font-family="Airbnb Cereal App" font-size="1" font-weight="300" fill="#5E615D" transform="translate(26.9843,16.5003) translate(-26.9843,-16.5003)">
							<tspan x="48.3436951" y="33.716649" transform="translate(24.1718,16.8583) translate(-24.1718,-16.8583)">cat’s edition</tspan>
						</text>
					</g>
					<rect id="cat-Rectangle-6" fill="#D1B980" opacity="0.679199" width="2.17682" height="8.74034" rx="1.08841" transform="translate(62.4426,20.1298) translate(-1.08841,-4.37017)" />
					<path id="cat-Rectangle-Copy" d="M59.05,15.9803L59.1903,15.9834C60.0057,16.0012,60.6575,16.6674,60.6575,17.483L60.6575,21.7884C60.6575,22.3895,60.1702,22.8768,59.5691,22.8768C58.9435,22.8768,58.4121,22.419,58.3195,21.8004L57.6807,17.5353C57.5699,16.7954,58.0799,16.1057,58.8198,15.9949C58.896,15.9835,58.973,15.9786,59.05,15.9803Z" fill="#D1B980" opacity="0.679199" transform="translate(59.1615,19.4284) translate(-59.1615,-19.4284)" />
					<g id="cat-Group-3" opacity="0.679199" fill="#D1B980" transform="translate(27.7245,54.0746) translate(-2.29593,-3.21214)">
						<path id="cat-Rectangle-Copy-3" d="M2.29593,-0.852942C2.7003,-0.852942,3.02811,-0.525134,3.02811,-0.120762L3.02811,2.98209C3.02811,3.38646,2.7003,3.71427,2.29593,3.71427C1.89156,3.71427,1.56375,3.38646,1.56375,2.98209L1.56375,-0.120762C1.56375,-0.525134,1.89156,-0.852942,2.29593,-0.852942Z" opacity="0.445243" transform="translate(2.29593,1.43066) rotate(90) translate(-2.29593,-1.43066)" />
						<path id="cat-Rectangle-Copy-4" d="M2.04248,1.6236C2.44686,1.6236,2.77466,1.95141,2.77466,2.35578L2.77466,4.0685C2.77466,4.47288,2.44686,4.80068,2.04248,4.80068C1.63811,4.80068,1.3103,4.47288,1.3103,4.0685L1.3103,2.35578C1.3103,1.95141,1.63811,1.6236,2.04248,1.6236Z" opacity="0.445243" transform="translate(2.04248,3.21214) rotate(90) translate(-2.04248,-3.21214)" />
						<path id="cat-Rectangle-Copy-5" d="M1.81866,3.88235C2.22303,3.88235,2.55084,4.21016,2.55084,4.61453L2.55084,5.37272C2.55084,5.77709,2.22303,6.1049,1.81866,6.1049C1.41429,6.1049,1.08648,5.77709,1.08648,5.37272L1.08648,4.61453C1.08648,4.21016,1.41429,3.88235,1.81866,3.88235Z" opacity="0.445243" transform="translate(1.81866,4.99362) rotate(90) translate(-1.81866,-4.99362)" />
					</g>
					<g id="cat-Group-3-Copy" opacity="0.679199" fill="#D1B980" transform="translate(96.0709,54.098) scale(-1,1) translate(-2.29593,-3.21214)">
						<path id="cat-Rectangle-Copy-3-2" d="M2.29593,-0.852942C2.7003,-0.852942,3.02811,-0.525134,3.02811,-0.120762L3.02811,2.98209C3.02811,3.38646,2.7003,3.71427,2.29593,3.71427C1.89156,3.71427,1.56375,3.38646,1.56375,2.98209L1.56375,-0.120762C1.56375,-0.525134,1.89156,-0.852942,2.29593,-0.852942Z" opacity="0.445243" transform="translate(2.29593,1.43066) rotate(90) translate(-2.29593,-1.43066)" />
						<path id="cat-Rectangle-Copy-4-2" d="M2.04248,1.6236C2.44686,1.6236,2.77466,1.95141,2.77466,2.35578L2.77466,4.0685C2.77466,4.47288,2.44686,4.80068,2.04248,4.80068C1.63811,4.80068,1.3103,4.47288,1.3103,4.0685L1.3103,2.35578C1.3103,1.95141,1.63811,1.6236,2.04248,1.6236Z" opacity="0.445243" transform="translate(2.04248,3.21214) rotate(90) translate(-2.04248,-3.21214)" />
						<path id="cat-Rectangle-Copy-5-2" d="M1.81866,3.88235C2.22303,3.88235,2.55084,4.21016,2.55084,4.61453L2.55084,5.37272C2.55084,5.77709,2.22303,6.1049,1.81866,6.1049C1.41429,6.1049,1.08648,5.77709,1.08648,5.37272L1.08648,4.61453C1.08648,4.21016,1.41429,3.88235,1.81866,3.88235Z" opacity="0.445243" transform="translate(1.81866,4.99362) rotate(90) translate(-1.81866,-4.99362)" />
					</g>
					<path id="cat-Rectangle-Copy-2" d="M65.6949,15.9834L65.8351,15.9803C66.5831,15.964,67.2027,16.5571,67.219,17.305C67.2207,17.3821,67.2158,17.4591,67.2044,17.5353L66.5657,21.8004C66.473,22.419,65.9416,22.8768,65.3161,22.8768C64.7149,22.8768,64.2276,22.3895,64.2276,21.7884L64.2276,17.483C64.2276,16.6674,64.8794,16.0012,65.6949,15.9834Z" fill="#D1B980" opacity="0.679199" transform="translate(65.7235,19.4284) translate(-65.7235,-19.4284)" />
					<path id="cat-Path-4" d="M42.5,83.5C49,84.8333,55.5,85.5,62,85.5C68.5,85.5,75,84.8333,81.5,83.5" stroke="#979797" stroke-width="0.5" opacity="0.114793" stroke-linecap="round" transform="translate(62,84.5) translate(-62,-84.5)" />
					<path id="cat-Path-4-Copy" d="M45.991,86.3918C51.3273,87.4865,56.6637,88.0338,62,88.0338C67.3363,88.0338,72.6727,87.4865,78.009,86.3918" stroke="#979797" stroke-width="0.5" opacity="0.114793" stroke-linecap="round" transform="translate(62,87.2128) translate(-62,-87.2128)" />
					<path id="cat-Path-4-Copy-2" d="M49.4024,89.1006C53.6016,89.962,57.8008,90.3926,62,90.3926C66.1992,90.3926,70.3984,89.962,74.5977,89.1006" stroke="#979797" stroke-width="0.5" opacity="0.114793" stroke-linecap="round" transform="translate(62,89.7466) translate(-62,-89.7466)" />
				</g>
				<rect id="cat-Rectangle-7" stroke="#979797" fill="#FFFFFF" width="405" height="76" transform="translate(203,132.5) translate(-202.5,-38)" />
				<g id="cat-Group-7" opacity="1" transform="translate(201,83) rotate(-52) scale(0,0) translate(-8.50006,-0.5)" style="animation: 5.9s linear both cat-Group-7_t;">
					<path id="cat-Path-3" d="M8.50006,0C7.40724,2.2135,6.74057,3.7135,6.50006,4.5C4.97353,9.49191,5,12.3431,5,14.5C5,17.1667,9.16669,17.6667,17.5001,16C15.5001,8.66667,13.6667,4.16667,12.0001,2.5C10.3334,0.833333,9.16673,0,8.50006,0Z" fill="#F38C63" transform="translate(11.25,8.48077) translate(-11.25,-8.48077)" />
					<path id="cat-Rectangle-8" d="M14.4469,4.10883C18.9815,4.39185,22.4596,8.24546,22.2778,12.7853L21.9899,19.9758C21.8433,23.6373,18.7562,26.4867,15.0947,26.3401C15.0001,26.3363,14.9056,26.3305,14.8112,26.3226C10.8375,25.9927,7.69518,22.8195,7.4042,18.8428L6.88534,11.7518C6.59773,7.82115,9.55096,4.40161,13.4816,4.114C13.8029,4.09049,14.1253,4.08876,14.4469,4.10883Z" fill="#F0DB9D" transform="translate(14.4468,15.2476) rotate(-40) translate(-14.4468,-15.2476)" />
				</g>
				<g id="cat-Group-8" opacity="1" transform="translate(276,83) rotate(52) scale(0,0) translate(-18.0374,-0.5)" style="animation: 5.9s linear both cat-Group-8_t;">
					<path id="cat-Path-3-Copy" d="M12.5374,0C11.4446,2.2135,10.7779,3.7135,10.5374,4.5C9.01088,9.49191,9.03736,12.3431,9.03736,14.5C9.03736,17.1667,13.204,17.6667,21.5374,16C19.5374,8.66667,17.7041,4.16667,16.0374,2.5C14.3707,0.833333,13.2041,0,12.5374,0Z" fill="#F38C63" transform="translate(15.2874,8.48077) scale(-1,1) translate(-15.2874,-8.48077)" />
					<path id="cat-Rectangle-Copy-6" d="M14.158,4.14074C18.5388,4.41415,21.8684,8.1871,21.595,12.5679C21.5904,12.6421,21.5847,12.7163,21.578,12.7904L20.8957,20.3156C20.5763,23.8387,17.5001,26.4608,13.9709,26.2181C10.3274,25.9677,7.42277,23.0758,7.15625,19.4335L6.5965,11.7837C6.30889,7.85307,9.26213,4.43352,13.1927,4.14591C13.514,4.1224,13.8365,4.12067,14.158,4.14074Z" fill="#F0DB9D" transform="translate(14.1832,15.2128) rotate(40) scale(-1,1) translate(-14.0939,-15.1803)" />
				</g>
				<g id="cat-Group-9" transform="translate(-26.5,94.3834) rotate(11) translate(-15.5,-73.6239)" style="animation: 5.9s linear both cat-Group-9_t;">
					<rect id="cat-Rectangle-Copy-7" fill="#D8D8D8" width="9.31022" height="17.0767" rx="3" transform="translate(15.5,11.5855) translate(-4.65511,-8.53835)" />
					<rect id="cat-Rectangle-9" fill="url(#cat-Gradient-3)" width="17.9156" height="10.8308" rx="3" transform="translate(15.3108,19.2084) translate(-8.95779,-5.41542)" />
					<rect id="cat-Rectangle-10" fill="url(#cat-Gradient-4)" width="31" height="53.5" rx="3" transform="translate(15.5,46.8739) translate(-15.5,-26.75)" />
					<rect id="cat-Rectangle-11" fill="url(#cat-Gradient-5)" width="7.64674" height="2.34062" rx="1.17031" transform="translate(8.17663,4.03789) translate(-3.82337,-1.17031)" />
					<rect id="cat-Rectangle-Copy-8" fill="url(#cat-Gradient-6)" width="14.2518" height="6.9052" rx="2" transform="translate(15.4537,3.4526) translate(-7.12591,-3.4526)" />
				</g>
			</g>
		</g>
		<rect width="31.7078" height="13.6073" stroke="#979797" fill="#ccc09e" stroke-width="0.5" stroke-linecap="round" rx="7" transform="translate(-2.53879,93.0165) rotate(-90) translate(0,-13.6073)" style="animation: 5.9s linear both cat-a0_t;" />
		<text fill="#6f6f6f" font-size="16" font-family="Arial" font-weight="400" letter-spacing="0" word-spacing="0" stroke="none" opacity="0" transform="translate(98.1181,186.854)" style="line-height: 16px; white-space: pre; animation: 5.9s linear both cat-a1_t, 5.9s linear both cat-a1_o;">&nbsp;&nbsp;&nbsp;Hey , Humans . Stay safe</text>
	</svg>

</div>
              
            
!

CSS

              
                body,
html {
	height: 100%;
	background: rgb(255, 255, 255);
	margin: 0;
	padding: 0;
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cat-backface {
	position: absolute;
	width: 500px;
	height: 500px;
	background: #bef4fd;
	border-radius: 50%;
	margin-top: -80px;
}

svg {
	transform: scale(2);
	margin-top: 100px;
}

#cat-Rectangle-7 {
	stroke: none;
	height: 80px;
}

@keyframes cat-Path-6_t {
	0% {
		transform: translate(137.027327px, 1.441338px);
	}
	50.8474% {
		transform: translate(-92.972673px, 1.441338px);
	}
	62.7118% {
		transform: translate(-92.972673px, 1.441338px);
		animation-timing-function: cubic-bezier(0, 0.215, 0.405, 0.69);
	}
	66.1016% {
		transform: translate(-92.972673px, 61.441338px);
	}
	100% {
		transform: translate(-92.972673px, 61.441338px);
	}
}
@keyframes cat-Path-6_d {
	0% {
		d: path(
			"M334.973,58.5587C314.5,55.5587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
	13.9831% {
		d: path(
			"M334.973,58.5587C314.5,55.5587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
	19.0678% {
		d: path(
			"M335.223,64.5587C314.5,51.5587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
	25.4237% {
		d: path(
			"M326.973,51.5587C306.473,45.0587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
	30.5085% {
		d: path(
			"M329.973,57.5587C309.973,43.0587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
	36.8644% {
		d: path(
			"M328.973,49.5587C306.473,45.0587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
	43.2203% {
		d: path(
			"M324.223,46.5587C301.723,42.0587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
	50.8475% {
		d: path(
			"M329.473,53.5587C306.473,41.0587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
	100% {
		d: path(
			"M329.473,53.5587C306.473,41.0587,312.882,66.25,314.548,73.25C317.048,83.75,317.5,90,314.5,99.5"
		);
	}
}
@keyframes cat-Group-6_t {
	0% {
		transform: translate(175.5px, 90px);
	}
	41.9491% {
		transform: translate(175.5px, 90px);
	}
	66.1016% {
		transform: translate(175.5px, 90px);
	}
	71.1864% {
		transform: translate(175.5px, 50px);
	}
	76.2711% {
		transform: translate(175.5px, 50px);
	}
	77.9661% {
		transform: translate(175.5px, 90px);
	}
	83.0508% {
		transform: translate(175.5px, 90px);
	}
	86.4406% {
		transform: translate(175.5px, -1px);
	}
	100% {
		transform: translate(175.5px, -1px);
	}
}
@keyframes cat-Group_t {
	0% {
		transform: translate(47.219523px, 40.947649px) rotate(7deg) scale(1, 1)
			translate(-27.147813px, -32.579604px);
	}
	67.7966% {
		transform: translate(47.219523px, 40.947649px) rotate(7deg) scale(1, 1)
			translate(-27.147813px, -32.579604px);
	}
	69.4915% {
		transform: translate(47.219523px, 40.947649px) rotate(15deg) scale(1, 1)
			translate(-27.147813px, -32.579604px);
	}
	71.1864% {
		transform: translate(47.219523px, 40.947649px) rotate(15deg) scale(1, 1)
			translate(-27.147813px, -32.579604px);
	}
	74.5762% {
		transform: translate(47.219523px, 40.947649px) rotate(7deg) scale(1, 1)
			translate(-27.147813px, -32.579604px);
	}
	100% {
		transform: translate(47.219523px, 40.947649px) rotate(7deg) scale(1, 1)
			translate(-27.147813px, -32.579604px);
	}
}
@keyframes cat-Group-Copy-2_t {
	0% {
		transform: translate(75.12644px, 40.947649px) rotate(-7deg) scale(-1, 1)
			translate(-27.147813px, -32.579604px);
	}
	67.7966% {
		transform: translate(75.12644px, 40.947649px) rotate(-7deg) scale(-1, 1)
			translate(-27.147813px, -32.579604px);
	}
	69.4915% {
		transform: translate(75.12644px, 40.947649px) rotate(-15deg) scale(-1, 1)
			translate(-27.147813px, -32.579604px);
	}
	71.1864% {
		transform: translate(75.12644px, 40.947649px) rotate(-15deg) scale(-1, 1)
			translate(-27.147813px, -32.579604px);
	}
	74.5762% {
		transform: translate(75.12644px, 40.947649px) rotate(-7deg) scale(-1, 1)
			translate(-27.147813px, -32.579604px);
	}
	100% {
		transform: translate(75.12644px, 40.947649px) rotate(-7deg) scale(-1, 1)
			translate(-27.147813px, -32.579604px);
	}
}
@keyframes cat-eyes_t {
	0% {
		transform: translate(62.404716px, 42.440741px) scale(1, 1)
			translate(-21.962153px, -3.55856px);
	}
	89.8305% {
		transform: translate(62.404716px, 42.440741px) scale(1, 1)
			translate(-21.962153px, -3.55856px);
	}
	91.5254% {
		transform: translate(62.404716px, 42.440741px) scale(1, 0)
			translate(-21.962153px, -3.55856px);
	}
	93.2203% {
		transform: translate(62.404716px, 42.440741px) scale(1, 1)
			translate(-21.962153px, -3.55856px);
	}
	100% {
		transform: translate(62.404716px, 42.440741px) scale(1, 1)
			translate(-21.962153px, -3.55856px);
	}
}
@keyframes cat-Group-7_t {
	0% {
		transform: translate(201px, 83px) rotate(-52deg) scale(0, 0)
			translate(-8.50006px, -0.5px);
	}
	84.7457% {
		transform: translate(201px, 83px) rotate(-52deg) scale(0, 0)
			translate(-8.50006px, -0.5px);
	}
	86.4406% {
		transform: translate(201px, 83px) rotate(0deg) scale(1, 1)
			translate(-8.50006px, -0.5px);
	}
	100% {
		transform: translate(201px, 83px) rotate(0deg) scale(1, 1)
			translate(-8.50006px, -0.5px);
	}
}
@keyframes cat-Group-8_t {
	0% {
		transform: translate(276px, 83px) rotate(52deg) scale(0, 0)
			translate(-18.037416px, -0.5px);
	}
	84.7457% {
		transform: translate(276px, 83px) rotate(52deg) scale(0, 0)
			translate(-18.037416px, -0.5px);
	}
	86.4406% {
		transform: translate(276px, 83px) rotate(0deg) scale(1, 1)
			translate(-18.037416px, -0.5px);
	}
	100% {
		transform: translate(276px, 83px) rotate(0deg) scale(1, 1)
			translate(-18.037416px, -0.5px);
	}
}
@keyframes cat-Group-9_t {
	0% {
		transform: translate(-26.5px, 94.383379px) rotate(11deg)
			translate(-15.5px, -73.623866px);
	}
	86.4406% {
		transform: translate(-26.5px, 94.383379px) rotate(11deg)
			translate(-15.5px, -73.623866px);
	}
	88.1355% {
		transform: translate(-26.5px, 94.383379px) rotate(11deg)
			translate(-15.5px, -73.623866px);
	}
	91.5254% {
		transform: translate(80.166667px, 94.383379px) rotate(11deg)
			translate(-15.5px, -73.623866px);
	}
	93.2203% {
		transform: translate(133.5px, 94.383379px) rotate(0deg)
			translate(-15.5px, -73.623866px);
	}
	94.9152% {
		transform: translate(133.5px, 94.383379px) rotate(-5deg)
			translate(-15.5px, -73.623866px);
	}
	96.6101% {
		transform: translate(133.5px, 94.383379px) rotate(0deg)
			translate(-15.5px, -73.623866px);
	}
	98.305% {
		transform: translate(133.5px, 94.383379px) rotate(5deg)
			translate(-15.5px, -73.623866px);
	}
	100% {
		transform: translate(133.5px, 94.383379px) rotate(0deg)
			translate(-15.5px, -73.623866px);
	}
}
@keyframes cat-a0_t {
	0% {
		transform: translate(-2.538787px, 93.016454px) rotate(-90deg)
			translateY(-13.607276px);
	}
	88.1355% {
		transform: translate(-2.538787px, 93.016454px) rotate(-90deg)
			translateY(-13.607276px);
	}
	89.8305% {
		transform: translate(-2.538787px, 93.016454px) rotate(-48deg)
			translateY(-13.607276px);
	}
	93.2203% {
		transform: translate(-2.538787px, 93.016454px) rotate(-88deg)
			translateY(-13.607276px);
	}
	100% {
		transform: translate(-2.538787px, 93.016454px) rotate(-88deg)
			translateY(-13.607276px);
	}
}
@keyframes cat-a1_t {
	0% {
		transform: translate(98.118141px, 186.853611px);
	}
	94.9152% {
		transform: translate(98.118141px, 186.853611px);
	}
	100% {
		transform: translate(98.118141px, 146.853611px);
	}
}
@keyframes cat-a1_o {
	0% {
		opacity: 0;
	}
	94.9153% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console