Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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">
<svg id="adabestan" width="100%" height="100%" viewBox="0 0 708 798" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g id="v" transform="matrix(0.1,0,0,-0.1,-146,894)">
        <g id="leaves">
            <path class="leaf" id="leaf-1" d="M5284,8852C5281,8694 5239,8614 5047,8413C4771,8124 4675,7981 4602,7755C4566,7641 4565,7462 4599,7345C4650,7172 4772,6990 4872,6939C4907,6921 5010,6912 5010,6927C5010,6930 4995,6961 4977,6994C4858,7210 4839,7463 4922,7703C4963,7822 5016,7921 5106,8045C5146,8100 5196,8179 5219,8220C5241,8261 5260,8293 5260,8290C5260,8267 5199,8126 5153,8045C5002,7780 4962,7677 4939,7505C4924,7390 4932,7302 4966,7204C5001,7101 5040,7024 5108,6923C5154,6854 5168,6839 5196,6834C5266,6821 5370,6866 5438,6939C5569,7080 5666,7289 5695,7493C5739,7801 5678,8149 5513,8540C5447,8696 5314,8940 5295,8940C5289,8940 5284,8904 5284,8852Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-2" d="M3685,8048C3689,8035 3694,7998 3697,7965C3702,7896 3690,7856 3611,7682C3527,7498 3510,7341 3559,7209C3602,7096 3764,6958 3834,6976C3848,6979 3863,6986 3866,6991C3869,6996 3849,7026 3821,7057C3786,7096 3760,7139 3738,7195C3709,7267 3706,7285 3707,7375C3708,7453 3713,7493 3733,7555C3763,7648 3766,7644 3745,7537C3719,7401 3730,7259 3772,7175C3799,7122 3943,6980 3970,6980C4029,6980 4079,7032 4109,7123C4194,7388 4084,7683 3790,7978C3695,8072 3672,8088 3685,8048Z" style="fill:url(#_Linear2);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-3" d="M6710,7878C6667,7794 6610,7749 6495,7707C6393,7671 6249,7607 6195,7576C6108,7525 6004,7415 5962,7332L5925,7256L5925,7125C5925,7021 5929,6988 5943,6959C5964,6917 5996,6885 6026,6876C6047,6870 6048,6873 6052,6979C6056,7082 6059,7092 6099,7176C6155,7293 6244,7380 6394,7468C6527,7544 6516,7528 6364,7420C6239,7332 6180,7267 6127,7160C6095,7096 6095,7094 6095,6948C6095,6808 6096,6799 6118,6778C6137,6759 6151,6755 6208,6755C6267,6755 6283,6759 6345,6794C6422,6837 6512,6918 6567,6992C6674,7139 6748,7388 6750,7616C6752,7835 6750,7920 6741,7920C6736,7920 6722,7901 6710,7878Z" style="fill:url(#_Linear3);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-4" d="M7445,7310C7408,7272 7345,7254 7220,7245C6986,7230 6847,7157 6785,7018C6769,6982 6755,6932 6753,6896C6749,6844 6751,6831 6770,6808C6793,6778 6810,6772 6810,6793C6811,6821 6859,6921 6893,6961C6912,6985 6952,7019 6982,7037C7032,7067 7208,7126 7218,7116C7220,7113 7196,7104 7164,7095C7073,7071 6980,7020 6924,6965C6884,6925 6870,6901 6852,6845C6840,6807 6829,6757 6827,6735C6825,6697 6827,6694 6872,6672C6914,6651 6925,6649 6968,6659C7193,6707 7354,6882 7448,7180C7501,7347 7500,7368 7445,7310Z" style="fill:url(#_Linear4);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-5" d="M5825,6984C5800,6937 5760,6909 5680,6880C5456,6801 5351,6702 5333,6551C5326,6491 5352,6395 5380,6380C5413,6362 5420,6369 5420,6418C5420,6553 5485,6646 5645,6740C5699,6771 5680,6754 5598,6696C5533,6651 5494,6605 5455,6530C5441,6504 5436,6473 5437,6411C5437,6336 5439,6325 5460,6308C5509,6268 5605,6299 5691,6383C5770,6460 5822,6571 5849,6724C5862,6792 5864,7020 5852,7020C5848,7020 5836,7004 5825,6984Z" style="fill:url(#_Linear5);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-6" d="M4050,6980C4050,6974 4061,6965 4075,6958C4101,6946 4143,6892 4160,6846C4166,6830 4175,6783 4181,6741C4212,6521 4308,6347 4437,6282C4526,6236 4667,6229 4719,6267C4766,6303 4758,6315 4679,6330C4532,6358 4418,6467 4360,6635C4331,6720 4335,6716 4386,6610C4440,6501 4513,6421 4596,6383C4651,6358 4795,6332 4823,6343C4852,6354 4871,6396 4872,6449C4872,6510 4821,6628 4763,6698C4659,6825 4455,6924 4206,6970C4082,6993 4050,6995 4050,6980Z" style="fill:url(#_Linear6);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-7" d="M3015,6853C2911,6847 2802,6828 2703,6798C2646,6781 2600,6763 2600,6759C2600,6755 2612,6749 2626,6746C2668,6735 2730,6689 2759,6646C2775,6623 2806,6565 2829,6515C2939,6279 3006,6172 3109,6069C3254,5925 3407,5881 3594,5932C3689,5957 3750,6006 3750,6057L3750,6086L3658,6082C3539,6077 3467,6091 3372,6137C3275,6184 3146,6310 3075,6425C3048,6469 3006,6530 2981,6560C2956,6590 2949,6604 2964,6590C2990,6567 3019,6532 3150,6368C3214,6286 3291,6225 3388,6176C3449,6145 3476,6138 3543,6133C3624,6128 3739,6139 3812,6160C3866,6176 3884,6214 3878,6304C3874,6365 3867,6385 3829,6450C3775,6541 3637,6683 3559,6728C3480,6773 3372,6816 3303,6831C3236,6845 3087,6856 3015,6853Z" style="fill:url(#_Linear7);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-8" d="M6445,6672C6439,6668 6427,6653 6417,6638C6393,6600 6341,6576 6219,6545C5991,6487 5883,6386 5873,6221C5870,6171 5873,6147 5887,6120C5915,6065 5937,6069 5945,6130C5958,6222 6020,6313 6109,6371C6172,6412 6185,6407 6124,6366C6058,6322 5997,6252 5981,6203C5975,6182 5966,6133 5963,6094C5957,6024 5958,6022 5984,6005C6039,5969 6169,6012 6251,6093C6364,6206 6427,6366 6448,6598C6453,6643 6456,6680 6456,6680C6455,6680 6450,6676 6445,6672Z" style="fill:url(#_Linear8);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-9" d="M7515,6323C7341,6280 7163,6105 7197,6012C7205,5991 7208,5992 7278,6040C7377,6107 7459,6132 7580,6133C7683,6133 7760,6112 7890,6051C7977,6009 7951,6012 7822,6058C7719,6094 7710,6095 7580,6095C7446,6095 7445,6095 7383,6061C7315,6025 7197,5931 7181,5902C7166,5873 7186,5815 7225,5776C7269,5731 7346,5695 7450,5669C7692,5608 8025,5721 8342,5974C8423,6038 8441,6066 8393,6053C8345,6039 8255,6047 8208,6067C8184,6078 8128,6111 8084,6140C7891,6268 7730,6331 7601,6329C7565,6328 7526,6325 7515,6323Z" style="fill:url(#_Linear9);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-10" d="M2455,6104C2360,6083 2253,6021 2163,5934C2087,5860 2069,5824 2115,5836C2160,5847 2206,5831 2306,5767C2361,5733 2439,5689 2480,5671C2543,5641 2565,5636 2630,5636C2721,5636 2768,5657 2829,5726C2864,5766 2870,5780 2870,5816C2870,5863 2854,5874 2830,5844C2822,5836 2796,5817 2771,5802C2730,5778 2715,5775 2630,5775C2552,5776 2525,5780 2482,5799C2414,5830 2420,5836 2491,5808C2562,5781 2680,5779 2729,5805C2776,5829 2870,5919 2870,5939C2870,5969 2830,6020 2783,6050C2691,6108 2567,6129 2455,6104Z" style="fill:url(#_Linear10);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-11" d="M6714,5530C6648,5516 6537,5455 6481,5403C6439,5364 6429,5347 6424,5311C6417,5269 6418,5267 6441,5273C6454,5276 6493,5290 6528,5305C6573,5324 6616,5333 6678,5337C6870,5349 6992,5304 7211,5138C7242,5114 7276,5089 7286,5082C7336,5049 7189,5127 7127,5167C7009,5243 6925,5278 6818,5296C6727,5311 6716,5311 6643,5295C6566,5278 6486,5243 6403,5191C6364,5167 6360,5162 6360,5123C6360,5100 6364,5070 6370,5055C6386,5013 6469,4932 6544,4885C6777,4741 7080,4736 7460,4871C7583,4914 7761,4998 7767,5015C7769,5022 7746,5026 7710,5027C7604,5030 7555,5061 7395,5224C7239,5383 7156,5446 7037,5497C6966,5528 6945,5533 6856,5536C6800,5538 6736,5535 6714,5530Z" style="fill:url(#_Linear11);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-12" d="M3134,5399C2993,5376 2789,5288 2636,5185C2460,5066 2458,5063 2556,5068C2642,5073 2686,5056 2802,4972C2938,4874 2986,4845 3075,4808C3150,4777 3163,4775 3270,4775C3378,4775 3389,4777 3450,4806C3521,4840 3612,4916 3635,4961C3655,4998 3655,5060 3636,5060C3628,5060 3619,5056 3616,5051C3603,5031 3496,4979 3437,4965C3305,4934 3180,4954 3018,5032C2901,5088 2879,5108 2982,5065C3016,5050 3086,5025 3135,5008C3216,4982 3236,4979 3325,4982C3413,4985 3433,4989 3490,5016C3526,5034 3582,5070 3615,5097C3663,5136 3676,5152 3678,5178C3689,5292 3467,5413 3251,5409C3215,5408 3162,5404 3134,5399Z" style="fill:url(#_Linear12);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-13" d="M4038,4500C3838,4464 3677,4368 3483,4169C3405,4089 3300,3958 3300,3941C3300,3936 3319,3939 3343,3950C3405,3979 3507,3976 3595,3944C3796,3870 3845,3860 3992,3860C4124,3860 4133,3861 4196,3890C4323,3947 4449,4110 4437,4202C4429,4261 4412,4266 4374,4218C4316,4144 4236,4089 4135,4055C4070,4033 3898,4033 3798,4054C3758,4062 3712,4072 3695,4074C3679,4077 3694,4077 3730,4074C4005,4056 4022,4057 4105,4079C4202,4106 4263,4143 4321,4212C4390,4294 4422,4350 4416,4376C4405,4417 4344,4466 4282,4484C4210,4504 4099,4511 4038,4500Z" style="fill:url(#_Linear13);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-14" d="M6870,4491C6807,4445 6761,4442 6595,4470C6323,4516 6152,4479 6050,4351C5981,4263 5949,4132 5988,4097C6005,4082 6008,4084 6038,4134C6079,4203 6138,4255 6214,4291C6293,4328 6361,4340 6479,4339C6560,4338 6568,4336 6530,4329C6505,4325 6460,4321 6430,4321C6355,4320 6252,4290 6186,4250C6125,4213 6077,4155 6031,4062C6001,4003 6000,3997 6014,3975C6071,3888 6246,3877 6407,3950C6529,4005 6629,4090 6735,4225C6818,4332 6922,4513 6898,4510C6896,4510 6884,4501 6870,4491Z" style="fill:url(#_Linear14);fill-rule:nonzero;"/>
            <path class="leaf" id="leaf-15" d="M4030,6105C4030,6103 4049,6081 4073,6058C4114,6016 4117,6010 4144,5885C4184,5697 4224,5619 4315,5555C4366,5518 4468,5494 4522,5505C4565,5514 4600,5537 4600,5555C4600,5564 4591,5570 4578,5570C4508,5570 4411,5622 4356,5687C4329,5719 4265,5849 4273,5856C4275,5859 4289,5833 4303,5800C4357,5677 4464,5597 4591,5584C4655,5578 4659,5579 4675,5603C4736,5696 4634,5883 4470,5981C4387,6030 4248,6078 4150,6091C4109,6096 4065,6103 4053,6105C4040,6108 4030,6108 4030,6105Z" style="fill:url(#_Linear15);fill-rule:nonzero;"/>
        </g>
        <path id="tick" d="M8410,7123C8066,7064 7547,6828 7110,6533C7041,6487 6964,6432 6939,6412C6914,6392 6835,6330 6764,6275C6247,5874 5793,5324 5506,4751C5442,4623 5425,4587 5346,4390C5237,4121 5139,3776 5105,3540C5096,3482 5077,3397 5063,3350L5036,3265L5028,3410C5010,3742 4989,3963 4965,4095C4881,4556 4714,4910 4485,5112C4337,5244 4176,5323 3991,5354C3891,5371 3740,5376 3740,5362C3740,5357 3762,5348 3789,5341C3816,5334 3898,5301 3972,5266C4386,5073 4602,4799 4694,4349C4738,4135 4741,4049 4738,3350C4736,2851 4739,2675 4748,2610C4781,2397 4842,2204 4916,2082C4962,2005 5078,1860 5094,1860C5102,1860 5111,1912 5123,2038C5160,2415 5248,2918 5341,3285C5407,3544 5524,3919 5592,4090C5805,4625 5969,4935 6255,5345C6542,5757 6987,6187 7435,6487C7651,6631 7931,6786 8215,6917C8473,7036 8540,7072 8540,7092C8540,7123 8485,7136 8410,7123Z" style="fill:url(#_Linear16);fill-rule:nonzero;"/>
        <g id="book" transform="matrix(1,0,0,1,0,-100)">
            <path d="M7195,3180C6969,3141 6789,3090 6535,2995C6331,2919 6039,2756 5840,2607C5721,2518 5454,2252 5375,2142C5307,2048 5200,1881 5200,1869C5200,1850 5228,1875 5275,1936C5336,2015 5562,2238 5645,2302C5988,2563 6412,2731 6855,2782C7080,2807 7536,2794 7718,2756C7755,2749 7780,2747 7780,2753C7780,2758 7743,2804 7698,2855C7652,2905 7564,3006 7502,3078C7436,3155 7381,3210 7372,3209C7362,3208 7283,3195 7195,3180Z" style="fill:rgb(255,139,0);fill-rule:nonzero;"/>
            <path d="M2526,2974C2417,2850 2331,2746 2334,2743C2337,2740 2376,2745 2422,2754C2598,2789 2958,2801 3196,2780C3523,2751 3877,2648 4149,2504C4416,2362 4596,2217 4801,1980C4949,1808 4963,1806 4856,1975C4502,2535 3918,2927 3125,3135C3034,3159 2794,3200 2745,3200C2731,3200 2663,3130 2526,2974Z" style="fill:rgb(255,139,0);fill-rule:nonzero;"/>
            <path d="M2685,2584C2428,2566 2008,2483 1969,2443C1960,2433 1934,2385 1912,2335C1786,2056 1709,1877 1713,1873C1716,1871 1757,1891 1806,1917C2087,2069 2443,2180 2775,2221C2904,2236 3266,2236 3395,2221C3524,2205 3740,2159 3860,2121C4219,2009 4501,1851 4898,1540C4927,1517 4953,1500 4956,1503C4964,1511 4788,1722 4690,1821C4283,2233 3777,2488 3219,2560C3073,2579 2799,2591 2685,2584Z" style="fill:rgb(59,177,0);fill-rule:nonzero;"/>
            <path d="M6940,2584C6714,2567 6424,2509 6240,2445C5813,2296 5425,2019 5103,1633C5020,1533 4998,1500 5016,1500C5019,1500 5058,1531 5103,1568C5480,1881 5878,2081 6320,2179C6518,2223 6610,2232 6855,2233C7105,2233 7211,2223 7430,2174C7705,2114 7884,2051 8109,1935C8177,1899 8235,1872 8238,1874C8240,1876 8199,1974 8147,2092C8095,2209 8039,2336 8022,2374C8006,2412 7985,2447 7976,2452C7936,2474 7635,2541 7492,2560C7340,2580 7053,2592 6940,2584Z" style="fill:rgb(59,177,0);fill-rule:nonzero;"/>
            <path d="M6490,1850C6416,1846 6288,1832 6205,1820C5760,1755 5398,1600 5105,1349L5009,1267L4972,1302C4803,1459 4552,1609 4315,1695C4175,1745 3969,1795 3810,1817C3620,1842 3140,1843 2920,1817C2511,1769 2077,1665 1687,1521C1495,1450 1460,1433 1460,1414C1460,1383 1565,1060 1575,1060C1581,1060 1614,1079 1650,1103C1849,1233 2111,1360 2344,1439C2654,1546 2982,1600 3311,1600C3858,1600 4405,1442 4904,1142C4969,1102 5024,1070 5027,1070C5029,1070 5075,1099 5129,1135C5242,1209 5480,1335 5590,1378C5935,1514 6252,1573 6635,1572C7175,1571 7690,1444 8193,1187C8279,1143 8352,1109 8355,1112C8364,1121 8343,1541 8334,1549C8324,1558 8184,1606 8075,1638C7811,1717 7472,1787 7204,1820C7045,1839 6725,1861 6655,1858C6639,1858 6564,1854 6490,1850Z" style="fill:rgb(13,0,82);fill-rule:nonzero;"/>
        </g>
        <g id="hat" transform="matrix(1,0,0,1,40,-90)">
            <path d="M5195,6089C5140,6073 5064,6051 5025,6041C4987,6030 4908,6008 4851,5991C4794,5974 4739,5960 4729,5960C4697,5960 4708,5945 4779,5887C4880,5806 4900,5794 4900,5813C4900,5836 4984,5850 5108,5848L5215,5847L5085,5840C5014,5836 4948,5830 4938,5826C4928,5821 4914,5789 4901,5741C4874,5642 4874,5637 4904,5642L4929,5647L4900,5605C4859,5545 4819,5419 4813,5330C4806,5229 4822,5150 4867,5060C4899,4998 4914,4979 4961,4947C5009,4914 5028,4907 5083,4903C5141,4898 5156,4901 5204,4924C5359,5000 5458,5206 5449,5435C5446,5488 5448,5516 5455,5510C5479,5485 5496,5501 5508,5563C5515,5597 5523,5636 5526,5651C5531,5673 5524,5681 5471,5719C5437,5742 5377,5777 5338,5795C5298,5814 5272,5829 5280,5830C5302,5830 5436,5760 5498,5715C5548,5680 5551,5675 5546,5645L5540,5613L5595,5628C5625,5636 5652,5641 5655,5639C5657,5636 5647,5588 5632,5532C5610,5447 5602,5431 5588,5436C5575,5440 5569,5432 5561,5403C5542,5338 5548,5328 5592,5351C5610,5361 5617,5359 5631,5341C5656,5310 5666,5315 5678,5362C5689,5403 5686,5412 5658,5422C5654,5424 5658,5452 5667,5485C5675,5518 5688,5569 5694,5599C5704,5649 5708,5655 5738,5662C5775,5672 5779,5689 5749,5708C5733,5718 5730,5727 5735,5751C5744,5792 5726,5810 5678,5810C5641,5810 5629,5819 5474,5965C5383,6050 5306,6119 5302,6119C5298,6118 5250,6105 5195,6089Z" style="fill:rgb(41,40,38);fill-rule:nonzero;"/>
        </g>
    </g>
    <defs>
        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear10" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear11" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear12" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear13" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear14" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear15" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear16" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-240.435,-8210,8210,-240.435,5240.44,9270)"><stop offset="0%" style="stop-color:rgb(113,210,2);stop-opacity:1"/><stop offset="100%" style="stop-color:rgb(0,115,35);stop-opacity:1"/></linearGradient>
    </defs>
</svg>
</div>
!

CSS 

              
                body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.container{
  width:7em;
}
#hat,
#book,
#tick{
  animation:show 2s;
}
.leaf{
  opacity:0;
  animation: move 2s ease-in-out normal infinite;
}
#leaf-1{
   animation-delay:1s;
}
#leaf-2{
   animation-delay:1.15s;
}
#leaf-3{
   animation-delay:1.65s;
}
#leaf-4{
   animation-delay:1.25s;
}
#leaf-5{
   animation-delay:1.5s;
}
#leaf-6{
   animation-delay:1.75s;
}
#leaf-7{
   animation-delay:2s;
}
#leaf-8{
   animation-delay:2.25s;
}
#leaf-9{
   animation-delay:2.5s;
}
#leaf-10{
   animation-delay:2.75s;
}
#leaf-11{
   animation-delay:3s;
}
#leaf-12{
   animation-delay:3.25s;
}
#leaf-13{
   animation-delay:3.5s;
}
#leaf-14{
   animation-delay:3.75s;
}
#leaf-15{
   animation-delay:4s;
}

@keyframes move {
  0%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
@keyframes show{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
!

JS 

              
                // Adabestan School Animation Logo SVG
!
999px

Console