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 id="page">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200" height="600" viewBox="0 0 1200 600">
		<rect width="1200" height="600" fill="#fff"/>
		<g>
			<title>Landscape</title>
			<defs>				
				<radialGradient id="Lb">
					<stop offset="10%" stop-color="#a1904a"/>
					<stop offset="95%" stop-color="#60562c"/>
				</radialGradient>				
				<radialGradient id="Ly">
					<stop offset="10%" stop-color="#f4ee94"/>
					<stop offset="95%" stop-color="#fff" stop-opacity="0"/>
				</radialGradient>			
			</defs>
			<path d="m1200 0h-1200v560h1200z" fill="#d3e6e9"/>
			<rect x="1050" y="0" width="150" height="150" fill="url(#Ly)" />			
			<path d="m0 539.43h1200v60.57h-1200z" fill="#30993c"/>			
			<path d="m220 560a25 10 0 0 1 -25 10 25 10 0 0 1 -25-10 25 10 0 0 1 25-10 25 10 0 0 1 25 10z" fill="url(#Lb)"/>		
			<path d="m400 560a25 10 0 0 1 -25 10 25 10 0 0 1 -25-10 25 10 0 0 1 25-10 25 10 0 0 1 25 10z" fill="url(#Lb)"/>
			<path d="m936 574a15 6 0 0 1 -15 6 15 6 0 0 1 -15-6 15 6 0 0 1 15-6 15 6 0 0 1 15 6z" fill="url(#Lb)"/>				
			<path d="m110.35 485.18c-.07-.01-.15 0-.23.02h-.05c-.81.23-2.36 1.86-4.78 4.56-3.78 4.19-9.296 13.09-12.233 19.79l-5.348 12.18-4.307-10.66c-4.308-10.64-15.483-21.31-22.336-21.31-3.253 0 12.411 26.55 23.993 40.64 2.545 3.09 3.614 6.29 2.379 7.11s-4.548-1.37-7.35-4.86c-8.705-10.8-14.503-7-7.154 4.67 6.221 9.88 6.206 10.63 0 7.18-11.054-6.09-13.026-1.25-3.764 9.21 6.507 7.35 8.839 8.36 10.074 4.33 1.325-4.27 2.366-4.45 5.664-.98 2.816 2.95 4.187 1 4.473-6.41l.422-10.65 5.377 9.67c8.69 15.61 9.97 14.03 9.97-12.21 0-13.68 1.58-31.72 3.52-40.09 1.97-8.44 2.72-12.08 1.68-12.19zm25.24 10.98c-2-.12-6.94 3.66-13.24 11.11-7.59 8.96-9.71 16.84-9.9 36.66-.15 15.66-.66 16.14 2.11 15 2.46-1 6.58 2.49 6.58-2.52 0-9.51 9.88-24.82 21.9-33.92 10.15-7.69 1.33-6.56-11.85 1.52l-11.19 6.85 3.42-7.61c1.87-4.19 6.14-12.06 9.5-17.51 3.9-6.33 4.43-9.47 2.67-9.58zm524.42 15.37c-.05 0-.11 0-.18.02h-.04c-.64.18-1.87 1.43-3.79 3.51-2.99 3.24-7.36 10.1-9.68 15.26l-4.24 9.4-3.42-8.22c-3.41-8.21-12.26-16.44-17.68-16.44-2.58 0 9.83 20.48 19 31.34 2.01 2.39 2.86 4.85 1.88 5.48-.98.64-3.6-1.05-5.82-3.74-6.9-8.33-11.48-5.4-5.67 3.6 4.93 7.62 4.92 8.2 0 5.53-8.75-4.69-10.31-.96-2.98 7.11 5.16 5.66 7.01 6.44 7.99 3.34 1.04-3.3 1.87-3.44 4.48-.76 2.23 2.27 3.32.77 3.54-4.94l.33-8.22 4.26 7.46c6.89 12.04 7.9 10.82 7.9-9.41 0-10.55 1.25-24.46 2.79-30.92 1.56-6.51 2.15-9.31 1.33-9.4zm19.99 8.47c-1.58-.1-5.5 2.82-10.49 8.57-6.01 6.91-7.69 12.98-7.84 28.27-.12 12.07-.52 12.44 1.67 11.56 1.95-.77 5.22 1.92 5.22-1.94 0-7.33 7.82-19.14 17.34-26.16 8.04-5.93 1.05-5.06-9.38 1.18l-8.87 5.28 2.71-5.87c1.48-3.23 4.86-9.3 7.53-13.5 3.08-4.88 3.5-7.31 2.11-7.39zm369 2.94c-.1.02-.1.05-.2.11-.6.5-.1 4.71 1 9.36 1.1 4.66 2 12.06 2 16.45.1 6.86.8 8.05 4.9 7.95 3.8-.03 5.7-2.48 9.6-12.25 2.7-6.71 5.5-13.4 6.1-14.87.7-1.46.2-2.65-1.1-2.65-3.6 0-8.7 9.23-10.8 19.41-1.8 9.19-1.8 9.22-2.1 1.88-.2-7.03-7.4-25.86-9.4-25.39zm-756.64.11c-.45.1-1.3.86-2.65 2.11-2.08 1.95-5.13 6.08-6.75 9.18l-2.96 5.66-2.39-4.95c-2.38-4.94-8.56-9.89-12.34-9.89-1.81 0 6.86 12.32 13.26 18.86 1.4 1.43 2 2.92 1.31 3.29-.68.39-2.51-.63-4.06-2.25-4.82-5.01-8.01-3.25-3.96 2.17 3.44 4.59 3.44 4.93 0 3.33-6.11-2.82-7.2-.58-2.08 4.28 3.6 3.4 4.89 3.87 5.58 2.01.72-1.99 1.3-2.07 3.13-.46 1.55 1.36 2.31.46 2.47-2.97l.23-4.95 2.97 4.49c4.81 7.24 5.52 6.51 5.52-5.66 0-6.35.87-14.72 1.95-18.61 1.15-4.18 1.55-5.82.8-5.64zm520.74 1.03c-.05.01-.09.04-.13.08-.45.38-.08 3.53.75 7.02.82 3.49 1.5 9.04 1.5 12.33.07 5.14.6 6.06 3.67 5.96 2.85-.02 4.28-1.86 7.2-9.18 2.02-5.03 4.12-10.05 4.57-11.15.53-1.1.15-1.99-.82-1.99-2.7 0-6.52 6.92-8.1 14.55-1.35 6.89-1.35 6.92-1.57 1.41-.15-5.27-5.57-19.39-7.07-19.03zm-506.63 4.05c-1.1-.1-3.84 1.7-7.32 5.16-4.2 4.16-5.37 7.81-5.48 17.01-.1 7.26-.36 7.48 1.17 6.96 1.36-.47 3.64 1.15 3.64-1.17 0-4.41 5.46-11.52 12.11-15.74 5.61-3.57.73-3.05-6.55.71l-6.19 3.17 1.89-3.53c1.03-1.94 3.39-5.6 5.26-8.12 2.15-2.94 2.44-4.4 1.47-4.45zm166.31 1.86c-.07.02-.13.05-.18.11-.6.5-.1 4.71 1 9.36 1.1 4.66 2 12.06 2 16.45.1 6.86.8 8.05 4.9 7.95 3.8-.03 5.7-2.48 9.6-12.25 2.7-6.71 5.5-13.4 6.1-14.87.7-1.46.2-2.65-1.1-2.65-3.6 0-8.7 9.23-10.8 19.41-1.8 9.19-1.8 9.22-2.1 1.88-.19-7.03-7.43-25.86-9.42-25.39zm331.86 2.34c-.87-.16-.28 1.69 1.73 6.34 1.28 2.88 2.63 6.5 3.15 8.03.9 3 4.2 3.89 4.2 1.15 0-3.16-4.35-11.94-6.97-14.12-1.01-.83-1.71-1.32-2.11-1.4zm233.06 1.62c-1.2-.22-.4 2.26 2.3 8.45 1.7 3.84 3.5 8.67 4.2 10.72 1.2 3.99 5.6 5.18 5.6 1.53 0-4.22-5.8-15.93-9.3-18.83-1.3-1.12-2.3-1.77-2.8-1.87zm-576.21 7.05c-1.16-.22-.37 2.25 2.31 8.45 1.7 3.84 3.5 8.67 4.2 10.72 1.2 3.99 5.6 5.18 5.6 1.53 0-4.22-5.8-15.93-9.3-18.83-1.34-1.12-2.28-1.77-2.81-1.87zm339.97 1.01c-.35 0-.56.16-.56.52 0 .62 1.2 2.44 2.62 4.05 3.23 3.54 5.63 3.81 4.28.48-.73-2.1-4.83-5.05-6.34-5.05zm25.83 4.3c-.3 0-1.13.71-1.65 1.59-.53.88-.23 1.6.67 1.6.98 0 1.73-.72 1.73-1.6s-.3-1.59-.75-1.59zm206.11.55c-.4 0-.7.21-.7.69 0 .83 1.6 3.26 3.5 5.4 4.3 4.73 7.5 5.09 5.7.64-1-2.79-6.4-6.73-8.5-6.73zm34.5 5.73c-.4 0-1.5.95-2.2 2.12-.7 1.18-.3 2.14.9 2.14 1.3 0 2.3-.96 2.3-2.14 0-1.17-.4-2.12-1-2.12zm-610.65 1.32c-.47 0-.75.21-.75.69 0 .83 1.6 3.26 3.5 5.4 4.3 4.73 7.5 5.09 5.7.64-.98-2.79-6.44-6.73-8.45-6.73zm34.45 5.73c-.4 0-1.5.95-2.2 2.12-.7 1.18-.3 2.14.9 2.14 1.3 0 2.3-.96 2.3-2.14 0-1.17-.4-2.12-1-2.12z" fill="#0e651f"/>
		</g>
		<g>
			<title>Tulip></title>
			<defs>
				<linearGradient id="Tt" x1="0" x2="0" y1="0" y2="1">
					<stop offset="0" stop-color="#005F00"/>
					<stop offset=".1" stop-color="#44A243"/>
					<stop offset="1" stop-color="#005F00"/>
				</linearGradient>
				<linearGradient id="Tf" x1="0" x2="0" y1="1" y2="0">
					<stop offset="0" stop-color="#045E04"/>
					<stop offset="1" stop-color="#019800"/>
				</linearGradient>
				<linearGradient id="Tp" x1="0" x2="0" y1="0" y2="1">
					<stop offset="0" stop-color="#ED1B00"/>
					<stop offset="1" stop-color="#940000"/>
				</linearGradient>
			</defs>				
			<path d="m177 168s-0.94 46.6-2.63 140c-1.69 92.8 16.1 253 16.1 253s3.39 3.86 7.26 2.84 8.22-6.9 8.22-6.9-15-83.8-18.2-212c-3.26-129 4.41-173 4.41-173" fill="url(#Tt)" stroke="#005F00"/>
			<path d="m206 320s-17.5-74.1-60.8-101c-42.1-26-57.1-54.6-57.1-54.6s2.74 55.4 22.8 96.2c19.7 40.1 36.7 70.9 36.7 70.9l46 42.5s2.56-16.3 12.4-54.1z" fill="url(#Tf)" stroke="#005F00"/>
			<path d="m113 220c12.9 32.6 34.3 60.8 51.4 91.3 3.79 6.78 7.7 13.6 11.6 20.3l-2.32 1.01c-3.8-6.76-7.66-13.6-11.5-20.3-17.1-30.4-38.3-58.8-51.8-91.2z" fill="#005F00"/>
			<path d="m277 205s2.25 79.2-29 154c-31 74.9-50.1 146-50.1 146l-2.44-34.2s-13-72 7.33-138 74.2-128 74.2-128z" fill="url(#Tf)" stroke="#005F00"/>		
			<path d="m199 505s39.3-31.8 24.3-82.1c-14.7-49.2-56.3-77.1-104-115-47.2-37.9-85.7-36.7-85.7-36.7s28-0.26 49.7 61.2c21.6 61.2 102 167 102 167" fill="url(#Tf)" stroke="#005F00"/>
			<path d="m68.3 291c19.3 20 38.8 39.3 54.7 62.2 19 26.8 37.4 54.3 51 83.9 6.9 14.3 18 47.5 22.2 58.2l-2.52 1.07c-4.15-10.8-16.8-47.9-22-58.3-14.1-29.7-32-57.2-50.9-83.9-16-22.6-30.1-39.6-49.7-59.1z" fill="#005F00"/>
			<path d="m230 48.9c2.99-5.43-8-17.9-15.5-15.6-4.97 3.46-17 3.51-19.7-2.37-5.9-5.13-20.1 2.14-20 7.53 0 0 12.3 93.8 16.6 79.2 8.61-26 25.7-54.8 38.6-68.8z" fill="url(#Tp)" />
			<path d="m185 158c2.49-15.6 12-52.2 8.84-79.3-2.66-17.2-13.8-31.2-21.7-46.2-6.52-7.87-4.04 8.67-4.64 12.5 0.14 11.1-1.5 22.4-6.46 32.4-6.84 16.1-15 32.9-13 50.9-0.13 10.3 4.88 19.9 12 27 5.59 6.55 11.9 14.1 24.8 15.9-0.16-9.57 0.2-13.1 0.2-13.1z" fill="url(#Tp)" stroke="#D20000"/>
			<path d="m211 170c7.33-6.49 21.2-26 23.4-42.2 3.55-20.9 1.77-42.5 5.83-63.4 2.01-7.3 6.07-13.8 9.22-20.7-6.53-5.99-14.6 3.87-20.9 6.55-13 9.68-22.4 23.8-27.4 39.2-8.57 20.5-10.8 27.9-11.9 41.7-3.01 12.2-5.48 27.5-4.84 40.1 4.94-0.78 19.2 5.2 26.5-1.29z" fill="url(#Tp)" stroke="#D20000"/>		
		</g>
		<g>
			<title>Daffodil></title>
			<defs>
				<linearGradient id="Df" x1="0" x2="0" y1="0" y2="1">
					<stop offset="0" stop-color="#008700"/>
					<stop offset="1" stop-color="#006700"/>
				</linearGradient>	
				<linearGradient id="Dc">
					<stop offset="0" stop-color="#bca421"/>
					<stop offset="1" stop-color="#fafa00"/>
				</linearGradient>
				<linearGradient id="Dc2">
					<stop offset="0" stop-color="#A89D1E"/>
					<stop offset="1" stop-color="#E2D810"/>
				</linearGradient>
				<linearGradient id="Dp1" x1="0" x2="0" y1="1" y2="0">
					<stop offset="0" stop-color="#bca421"/>
					<stop offset="1" stop-color="#fafa00"/>
				</linearGradient>
				<linearGradient id="Dp2" x1="0" x2="0" y1="0" y2="1">
					<stop offset="0" stop-color="#FAF508"/>
					<stop offset="1" stop-color="#bca421"/>
				</linearGradient>
				<linearGradient id="Dp3">
					<stop offset="0" stop-color="#fafa00"/>
					<stop offset="1" stop-color="#bca421"/>
				</linearGradient>
				<linearGradient id="Dp4" x1="0" x2="1" y1="1" y2="0">
					<stop offset="0" stop-color="#FAF508"/>
					<stop offset="1" stop-color="#bca421"/>
				</linearGradient>
				<linearGradient id="Dp5" x1="0" x2="0" y1="0" y2="1">
					<stop offset="0" stop-color="#BBA321"/>
					<stop offset="1" stop-color="#CEBF19"/>
				</linearGradient>
			</defs>
			<path d="m382 280c0 61.2 3.21 268 3.21 268s-6.63 13.6-11.6 13.6c-5.04 0-6.03-10.4-6.03-10.4s-5.63-210-5.63-271c0-61.2 9.14-219 15.7-219 6.54 0 4.56 148 4.4 219z" fill="url(#Df)" stroke="#005c00"/>
			<path d="m506 134c27.7 25.7-65.1-34-73.6-9.34-7.57 21.6-15.6 141-18.7 202-3.21 61.2-26.2 224-26.2 224s-6.69 11.7-11.7 11.2c-4.99-0.53-4.9-11-4.9-11s16.3-165 22.7-226c6.41-60.9 13.8-183 23.3-206 9.67-23.1 61.7-9.63 89.1 15.7z" fill="url(#Df)" stroke="#005c00"/>
			<path d="m520 272c5.81 1.97-43.2 50.2-56.8 85.6-13.5 35.4-77.9 198-77.9 198s-8.4 3.96-11.6 2.88c-3.22-1.11-1.29-7.28-1.29-7.28s61.2-165 77.9-198c16.7-33.7 64.3-83 69.6-81.2z" fill="url(#Df)" stroke="#005c00"/>	
			<path d="m471 127h67.4v87.1h-67.4z" fill="url(#Dc)"/>
			<path d="m516 101s0.16-7.93 15.6-16.2c15.3-8.27 41.6-19.6 45.9-16.9 4.05 2.53-2.36 10.4-4.04 21.7-1.69 11.2-2.7 23.3-2.7 23.3l-50.3 24.2z" fill="url(#Dp1)" stroke="#f5cd00" stroke-width=".7"/>	
			<path d="m476 43.3c-9.55 0.563-11.2 14.8-13.5 26.4-2.33 11.9-5.06 52.2-5.06 52.2s32 39.4 33.7 37.1c1.68-2.25 29.3-22.6 29.3-22.6s0-28.9-5.4-36c-5.25-6.82-7.34-17.8-14.3-33.2-6.89-15.3-15.2-24.8-24.8-24.1z" fill="url(#Dp2)" stroke="#f5cd00" stroke-width=".7"/>
			<path d="m484 128c8.61 9.03 8.11 30.7 8.11 30.7l-3.38 25.3s-13.7 19.6-28 20.9c-14.3 1.3-19.2-6.76-29-15.6-9.79-8.78-6.16-10.1-11.8-18.9-5.64-8.77-13.2-20.6-13.2-20.6s-7.82-14.1-5.05-17.2c2.61-2.96 19.2-6.41 19.2-6.41s21-4.13 36.8-3.7c15.8 0.42 17.8-3.64 26.3 5.39z" fill="url(#Dp3)" stroke="#f5cd00" stroke-width=".7"/>
			<path d="m437 194c-5.98 11.6-6.91 27.7-8.77 44.2-1.84 16.5 1.36 21.5 1.36 21.5s1.59 14.9 4.38 17.2c2.63 2.2 8.52 3.55 18.2 3.72 10 0.17 22.3-4.31 35.4-9.79 13.1-5.49 16.8-12.2 16.8-12.2l5.4-54.7-21.3-21.6s-45.8 0.18-51.6 11.5z" fill="url(#Dp4)" stroke="#f5cd00" stroke-width=".7"/>
			<path d="m504 258s2.19 7.6 11.1 15.6c8.93 7.93 22 17 24.6 16.2 3.12-1.02 8.44-3.89 14.8-17.5 6.35-13.6 11.2-24 10.8-37.1l-55.6-30.1z" fill="url(#Dp5)" stroke="#f5cd00" stroke-width=".7"/>		
			<path d="m595 211c-3.5 4.52-0.49 2.57-1.22 9.39-0.6 5.73-3.73-0.29-7.85 3.54-3.34 3.1-0.82 5.55-4.52 7.83-4.57 2.81-3.13-1.77-7.91 0.18-3.87 1.59-1.72 4.61-5.75 5.32-4.96 0.88-3.49-3.7-8.5-3.5-4.07 0.14-2.13 5.18-6.15 4.4-4.95-0.95-2.2-4.8-7.03-6.53-3.9-1.4-3.61 3.13-7.26 0.77-4.5-2.91-1.12-4.93-5.31-8.6-3.41-2.98-3.56 2.26-6.55-1.38-3.69-4.48-0.39-5.03-3.54-10.1-2.58-4.16-3.61-0.63-5.71-5.25-2.57-5.69 0.75-5.15-1.16-11.2-1.56-4.94-3.46-2.08-4.33-7.34-1.07-6.46 1.87-3.43 1.36-9.99-0.41-5.32-3.97-3.24-3.64-8.6 0.4-6.62 3.46-2.87 4.51-9.31 0.85-5.23-2.4-4.66-0.85-9.6 1.91-6.12 3.66-2.2 6.02-8.03 1.9-4.73-1.96-5.33 0.65-9.48 3.2-5.11 4.4 0.78 8.08-3.76 2.99-3.68-1.01-6.37 2.36-9.41 4.12-3.75 4.65 1.01 9.11-2.01 3.63-2.47 0.64-4.96 4.52-6.44 4.79-1.82 2.91 2.12 7.84 0.98 4-0.94 1.85-4.57 5.95-4.58 5.02 0 3.14 4.92 8.11 5.86 4.04 0.78 3.46-4.72 7.35-3.22 4.78 1.87 1.23 4.98 5.79 7.76 3.72 2.24 3.65-2.31 6.99 0.79 4.14 3.8 1.24 4.8 5.01 9.12 3.06 3.52 3.14-0.98 5.7 3.21 3.17 5.15-0.27 5.48 2.3 11.2 2.08 4.6 4.26 0.95 5.72 5.96 1.79 6.18-1.98 5.08-0.69 11.5 1.04 5.2 3.81 1.45 4.05 6.81 0.3 6.6-2.45 3.92-2.72 10.5-0.2 5.35 3 3.27 2.08 8.48-1.11 6.41-3.92 3.54-5.65 9.75-1.39 5.04 2.29 4.43 0.31 9.09-3.15 6.22-3.98 1.49-7.47 6.01z" fill="url(#Dc)" stroke="#f5cd00"/>
							
			<path d="m511 167s14.8-2.08 24.5-2.17c9.67-0.13 14.4 1.64 14.4 1.64v9.2s-5.13 1.19-14.5 1.15c-9.44 0-21.9-1.75-21.9-1.75s-2.19-1.5-2.98-3.93c-0.79-2.42 0.46-4.14 0.46-4.14z" fill="url(#Dc2)" stroke="#767106" stroke-width=".125"/>		
			<path d="m554 171a3.68 4.6 0 1 1-7.36 0 3.68 4.6 0 1 1 7.36 0z" fill="#f6ea00" stroke="#767106" stroke-width=".2"/>
			<path d="m513 170c4.2 0 8.41-0.13 12.6 0 4.46 0.14 8.96-0.29 13.4 0.14l-0.37 0.24c-4.47-0.26-8.97 0.13-13.5 0h-12.5z" fill="#58530b"/>
			<path d="m517 174c2.51-0.14 5.04 0 7.56 0h11.1l-0.44 0.31h-18.6z" fill="#58530b"/>		
			<path d="m522 154c16.1-8 32.3-15.4 49.5-20.5l-0.9 0.7c-17 5.17-32.9 12.4-48.9 20z" fill="#aaa805"/>		
			<path d="m542 162c17.4-4.48 34.7-8.38 52.6-9.78l-1.02 0.49c-17.6 1.55-34.8 5.27-52 9.43z" fill="#aaa805"/>		
			<path d="m531 194c18.5 0.55 36.8 0.45 55-2.83l-1.17-0.3c-17.9 3.03-35.9 3.3-54.2 3.05z" fill="#aaa805"/>		
			<path d="m561 172c11.5-1.17 22.9-2.07 34.5-1.87l-0.69 0.17c-11.5-0.14-22.7 0.7-34.1 1.74z" fill="#aaa805"/>		
			<path d="m531 205c16.8 2.29 33.6 3.94 50.4 2.72l-1.04-0.39c-16.6 1.03-33.1-0.46-49.7-2.44z" fill="#aaa805"/>
		</g>
		<g>
			<title>Lily of the valley</title>
			<defs>	
				<linearGradient id="Lf" x1="1" x2="0" y1="0" y2="1">
					<stop offset="0" stop-color="#016D01"/>
					<stop offset=".5" stop-color="#41A340"/>
					<stop offset="1" stop-color="#016D01"/>
				</linearGradient>
				<linearGradient id="Lt" x1="1" x2="0" y1="0" y2="1">
					<stop offset="0" stop-color="#2B592B"/>
					<stop offset=".5" stop-color="#1B7E1B"/>
					<stop offset="1" stop-color="#2B592B"/>
				</linearGradient>		
				<linearGradient id="Lc" x1="0" x2="0" y1="0" y2="1">
					<stop offset="0" stop-color="#fff"/>
					<stop offset="1" stop-color="#dbdbdb"/>
				</linearGradient>
			</defs>
			<path d="m920 574s2.8-73.4-0.62-111c-3.44-37.6-11.5-62.6-11.5-62.6 3.16-46.7 31-96.7 82.4-144 51.4-47.4 108-58.5 108-58.5s-6.2 51.1-26.3 124c-19.9 72.2-30.4 96.6-67.6 140-16.1 18.7-40.5 20.1-60.4 49-19.9 28.9-24.2 64-24.2 64z" fill="url(#Lf)" stroke="#018400" stroke-width="1.5"/>
			<path d="m1066 232c-46.1 66-88.5 137-121 211l-3.42 8.53-0.89 0.35c1.18-2.84 2.33-5.7 3.49-8.54 32.4-73.9 74.8-145 121-211z" fill="#018400"/>		
			<path d="m758 177s-2.43 47.9 6.6 104c9.06 56 25.8 112 66 152 17.3 17.5 45.5 49.1 67.5 76.6 21.9 27.5 22.2 63.4 22.2 63.4s11.9-142-21.9-199c-26.2-43.5-34.8-57.9-64-115-28.9-56.3-76.3-82.9-76.3-82.9z" fill="url(#Lf)" stroke="#018400" stroke-width="1.5"/>
			<path d="m776 217c12.1 54.7 45.2 104 70.6 154 17.2 30.3 38 57.8 50.9 90.2 2.82 7.5 6.3 14.7 9.31 22.2l-0.98 0.41c-2.99-7.43-6.44-14.7-9.24-22.2-13-32.5-33.8-59.9-50.9-90.2-25.2-49.9-58.1-99.1-70.7-154z" fill="#018400"/>
			<path d="m1032 257c-10.9-1.83-24 16.4-37.2 41-0.96-1.11-1.96-2.17-3-3.19-6.38-6.11-15.6-13.4-23.4-7.04-4.52 3.6-8.41 10.5-8.2 17.2l1.49-1c3.96-21 14.9-21.8 28.8-8.18 1.2 1.2 2.34 2.48 3.42 3.83-1.67 3.18-3.37 6.49-5.09 9.91-5.57 12.5-10.8 25.2-15.7 38-7.88-5.74-18.3-6.32-27-2.86-9.86 5.78-15.6 14.1-19.3 25.7l2-1.23c3.39-9.28 7.33-17.9 15.5-23 9.14-3.68 20.2-3.09 28 3.5-27.4 72.2-44.5 149-53.1 224l3.55-0.53c6.73-62 20.1-126 40-187 2.23-0.45 6.52-0.48 10.2 1.69 2.7 3.96 3.17 8.35 3.32 12.9l2.22-1.08c-0.17-4.63-0.32-9.98-3.39-13.1-3.07-3.09-10.6-2.27-11.9-1.75 6.98-20.9 13.9-39.6 21.9-58.8 4.6-1.48 8.48-1.19 10.9 4.45 1.12 3.04 1.15 6.31 1.34 9.51l2.29-1.22c-0.19-3.24-0.23-6.54-1.37-9.59-2.78-6.39-7.28-6.3-12.7-4.28 2.51-5.97 5.09-11.9 7.75-17.8 30.9-61.5 44.2-68.1 52.2 2.02l5.6-2.92c-4.4-35.9-10.6-48.2-19.1-49.6z" fill="url(#Lt)"/>		
			<path d="m1068 324c-0.3 6.03-2.9 11.4-6.8 15.2-0.5 0.45-1.3 0.85-2.3 1.17-0.9 0.33-4.7-6.25-4.7-6.25s-0.5 9.11-2 9.15c-1.6 0-5.1-8.64-5.1-8.64s-5 8.85-6.5 8.66c-1.5-0.23-1.1-10.2-1.1-10.2s-4.4 6.36-5.3 5.93c-0.9-0.41-1.7-0.89-2.1-1.39-3.5-4.17-5.5-9.75-5.2-15.8 0.6-12.1 10.2-17.9 21.5-17.3 11.2 0.61 20.2 7.48 19.6 19.6z" fill="url(#Lc)" stroke="#575757" stroke-width=".3"/>		
			<path d="m1056 311c0.9 3.52 1.8 7.06 2 10.7 0.3 3.72-0.5 7.39-1.1 11v0.23h-0.2v-0.23c0.7-3.63 1.4-7.28 1.2-11-0.2-3.68-1.1-7.2-2-10.7z" fill="#abacab" stroke="#abacab" stroke-width=".5"/>		
			<path d="m1039 311c-1.2 3.41-2.5 6.83-3.1 10.5-0.6 3.68-0.2 7.39 0 11.1v0.23h0.2v-0.23c-0.3-3.68-0.7-7.41 0-11.1 0.6-3.63 1.8-7.06 3.1-10.4z" fill="#abacab" stroke="#abacab" stroke-width=".4"/>		
			<path d="m976 317c0 4.97-1.81 9.45-4.73 12.7-0.36 0.39-0.94 0.76-1.7 1.05-0.74 0.31-4-4.92-4-4.92s0 7.48-1.18 7.59c-1.19 0.15-4.34-6.86-4.34-6.86s-3.57 7.47-4.75 7.38c-1.19-0.15-1.27-8.27-1.27-8.27s-3.13 5.39-3.89 5.08c-0.74-0.29-1.34-0.66-1.69-1.05-2.93-3.26-4.72-7.74-4.72-12.7 0-9.92 7.22-15.2 16.1-15.2 8.93 0 16.1 5.26 16.1 15.2z" fill="url(#Lc)" stroke="#575757" stroke-width=".24"/>		
			<path d="m954 306c-0.84 2.85-1.68 5.69-2.01 8.7-0.35 3.04 0.15 6.07 0.46 9.08v0.18h0.15v-0.18c-0.38-3.01-0.81-6.04-0.44-9.1 0.32-2.99 1.12-5.85 1.99-8.68z" fill="#abacab" stroke="#abacab" stroke-width=".3"/>		
			<path d="m967 306c0.84 2.86 1.66 5.7 1.99 8.71 0.37 3.05-0.15 6.07-0.44 9.08v0.18-0.18c0.38-3.01 0.81-6.05 0.46-9.09-0.34-3.01-1.14-5.87-2.01-8.7z" fill="#abacab" stroke="#abacab" stroke-width=".3"/>
			<path d="m1010 349c0 3.27-1.2 6.24-3.2 8.38-0.3 0.26-0.7 0.5-1.2 0.7s-2.8-3.24-2.8-3.24 0 4.93-0.8 4.99c-0.8 0.15-3-4.52-3-4.52s-2.47 4.93-3.29 4.85c-0.83-0.15-0.87-5.44-0.87-5.44s-2.18 3.56-2.69 3.36c-0.52-0.2-0.93-0.44-1.17-0.7-2.03-2.14-3.27-5.11-3.27-8.38 0-6.52 5-9.99 11.2-9.99 6.13 0 11.1 3.47 11.1 9.99z" fill="url(#Lc)" stroke="#575757" stroke-width=".16"/>		
			<path d="m994 342c-0.59 1.87-1.15 3.75-1.38 5.73-0.24 2.01 0 4 0.3 5.98v0.15-0.15c-0.29-1.98-0.58-3.99-0.33-5.99 0.23-1.98 0.8-3.87 1.41-5.72z" fill="#abacab" stroke="#abacab" stroke-width=".2"/>		
			<path d="m1e3 343c0.6 1.87 1.2 3.76 1.4 5.73 0.2 2.01 0 4-0.3 5.98v0.15-0.15c0.3-1.98 0.6-3.98 0.3-5.99-0.2-1.98-0.8-3.86-1.4-5.72z" fill="#abacab" stroke="#abacab" stroke-width=".2"/>
			<path d="m940 378c0 3.26-1.24 6.22-3.27 8.36-0.25 0.26-0.65 0.51-1.18 0.7-0.5 0.2-2.75-3.24-2.75-3.24s0 4.93-0.82 4.99c-0.83 0.15-3-4.51-3-4.51s-2.48 4.92-3.3 4.85c-0.82 0-0.87-5.45-0.87-5.45s-2.15 3.56-2.69 3.36c-0.5-0.19-0.91-0.44-1.17-0.7-2.02-2.14-3.27-5.1-3.27-8.36 0-6.54 5.01-10 11.2-10 6.16 0 11.2 3.46 11.2 10z" fill="url(#Lc)" stroke="#575757" stroke-width=".16"/>		
			<path d="m923 372c-0.58 1.87-1.16 3.76-1.38 5.73-0.25 2.01 0.15 4 0.3 5.98v0.15h0.15v-0.15c-0.27-1.98-0.56-3.97-0.32-5.99 0.23-1.98 0.79-3.85 1.39-5.72z" fill="#abacab" stroke="#abacab" stroke-width=".2"/>		
			<path d="m932 372c0.59 1.87 1.16 3.76 1.39 5.75 0.24 2 0 4-0.31 5.97v0.15-0.15c0.27-1.97 0.56-3.98 0.32-5.99-0.23-1.97-0.79-3.86-1.4-5.73z" fill="#abacab" stroke="#abacab" stroke-width=".2"/>						
			<path d="m987 408c0 3.27-1.25 6.22-3.27 8.36-0.26 0.28-0.66 0.5-1.17 0.7-0.52 0.21-2.77-3.24-2.77-3.24s0 4.93-0.82 5c-0.82 0.16-3-4.51-3-4.51s-2.46 4.91-3.28 4.85c-0.84-0.15-0.88-5.44-0.88-5.44s-2.16 3.55-2.69 3.34c-0.51-0.2-0.92-0.42-1.17-0.7-2.03-2.14-3.26-5.09-3.26-8.36 0-6.52 4.99-9.99 11.2-9.99 6.15 0 11.2 3.47 11.2 9.99z" fill="url(#Lc)" stroke="#575757" stroke-width=".16"/>		
			<path d="m972 402c-0.58 1.87-1.15 3.74-1.38 5.71-0.24 2.01 0.15 4 0.3 6v0.15-0.15c-0.26-2-0.56-3.99-0.32-6 0.23-1.97 0.79-3.86 1.39-5.71z" fill="#abacab" stroke="#abacab" stroke-width=".2"/>	
			<path d="m981 402c0.6 1.87 1.16 3.75 1.39 5.73 0.24 2.01 0 4-0.31 5.98v0.15-0.15c0.28-1.98 0.57-3.99 0.32-6-0.22-1.97-0.79-3.86-1.4-5.71z" fill="#abacab" stroke="#abacab" stroke-width=".2"/>
		</g>
	</svg>		
	<p>Fleurs de printemps : tulipe, jonquille et muguet/Spring flowers : tulip, daffodil and lily of the valley<br>Licence : <a href="https://creativecommons.org/licenses/by/2.0/deed.en" target="_blank">CC BY 2.0</a> - Adilade/Antoine Fabrice<br><a href="https://www.adilade.fr/blog/fleurs-printemps/" target="_blank">https://www.adilade.fr/blog/fleurs-printemps/</a></p>
</div>
              
            
!

CSS

              
                *, ::before, ::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    min-width: 0;
    min-height: 0; 
}
html {
	font-size: 62.5%;
}
body {
	margin: 0; 
	font-size: 1.6rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	line-height: 1.5;
}
svg {
	max-width: 100%;
	height: auto;
}
#page {
    background: #fff;
	display: grid;
	grid-auto-rows: auto ;
	gap: 1em;
	height: 100vh;
	width: 100vw;
}
#page svg {
	justify-self: center;
    align-self: center;
    max-height: 100%;
    object-fit: contain;
}
#page p {
	align-self: start;
	text-align: center;	
}
              
            
!

JS

              
                
              
            
!
999px

Console