<svg id="svg_logo" width="325" height="325" viewBox="0 0 455 455">

  <circle cx="227.5" cy="227.5" r="225" stroke="#008000" stroke-width="5" fill="yellow" id="mycircle" />
  <g id="logo_detail" transform="translate(583.25001,101.5218)">
    <path id="smLeaf" style="fill:red" d="m -420.67629,168.64313 c -7.4058,1.91585 -12.09424,-2.9225 -16.69152,-7.98744 -2.98865,-3.43494 -13.60866,-9.8995 -3.51422,-10.24468 6.18376,0.28661 13.87232,-2.06058 19.11295,-0.12323 3.1548,6.11845 6.30961,12.2369 9.46441,18.35535 -2.79054,0 -5.58108,0 -8.37162,0 z" />
    <path id="rightLeaf" style="fill:blue;" d="m -266.11233,241.08237 c -3.93805,-4.76253 -4.50395,-12.96062 -9.06515,-17.9146 23.42366,-4.32145 45.71728,-13.29456 66.17705,-25.40209 10.41551,-2.98655 -2.07709,-6.57558 -6.33407,-9.3262 -18.93444,-9.68907 -38.51437,-18.65307 -59.77806,-21.60532 -8.31336,-1.83172 -16.93987,0.001 -25.38842,-0.24927 3.25879,-6.5 6.51759,-13 9.77638,-19.5 26.00684,-1.20445 51.12075,8.2248 74.22767,19.24792 16.92559,7.92803 32.71379,17.97507 48.49595,27.93175 -2.4559,4.53388 -9.63282,6.44624 -13.98176,9.89702 -26.01742,16.26799 -53.97507,30.43975 -84.12959,36.92079 z" />
    <path id="leftLeaf" style="fill:brown;" d="m -444.91405,241.72157 c -35.87745,-7.65457 -68.25396,-26.00163 -98.58497,-46.03491 19.65532,-13.31547 40.38031,-24.99704 61.98358,-34.84909 5.99411,-0.24408 7.42073,8.3758 12.20696,11.34404 7.44731,5.25698 -6.56136,6.08186 -9.9689,9.09658 -9.23981,4.0358 -19.29825,8.64464 -26.91805,14.54417 8.32382,5.7514 19.09642,10.19131 28.47506,15.18585 13.25715,5.92914 27.2182,9.80314 41.39255,12.83424 -2.56836,6.01172 -5.71399,11.7917 -7.80484,17.99512 z" />

    <path id="bigLeaf" style="fill:green" d="m -450.98815,293.5459 c 3.31143,-17.44959 7.6959,-36.40347 14.97871,-53.30733 4.18056,-9.27959 8.61241,-19.43686 15.3273,-26.68667 6.94575,1.89052 13.743,4.64649 20.63254,6.86459 -5.45798,0.98881 -7.16128,8.86292 -11.18467,12.48247 -5.54907,10.77209 -10.57264,21.84355 -13.6943,33.60109 5.24653,1.53611 12.03225,-3.71363 17.88164,-4.83532 16.20179,-6.86339 32.73426,-16.40096 40.49733,-32.97518 -0.54698,-5.0163 -8.16147,6.31221 -12.45731,6.31491 -8.83804,5.29149 -18.3839,9.2237 -28.70218,10.31281 2.52602,-13.47332 11.93526,-26.95415 26.54824,-28.2465 11.55096,-0.0773 -0.90625,-5.6526 -6.03415,-5.50289 -5.67489,0.47729 -10.70811,2.85027 -16.31679,-0.33391 -12.41566,-3.03569 -24.09675,-9.11874 -34.60791,-16.27124 -13.30157,-9.08184 -24.80791,-20.74988 -34.56626,-33.50975 -30.56124,-39.26392 -46.76378,-87.115138 -60.8887,-134.215637 13.104,2.946026 26.67741,8.585957 39.96093,12.562247 23.14698,7.45308 45.01856,18.094927 66.56413,29.262083 -0.70686,7.071078 -0.8169,14.979352 -2.12811,21.48394 -23.34778,-14.507896 -49.12652,-25.695364 -75.32901,-34 11.7433,30.97656 23.96656,62.391677 44.15355,89.005807 9.90645,13.8017 22.05593,26.09507 36.15275,35.63667 13.29125,8.47708 29.10087,13.43202 44.35882,15.98286 -7.83495,-9.28273 -18.66982,-17.74639 -24.72929,-29.10667 -13.17063,-20.28617 -19.31437,-44.88835 -17.97416,-68.996647 -0.70367,-25.043154 6.98739,-49.497421 15.23064,-72.864593 11.91576,-31.544122 28.56425,-60.763995 46.5123,-89.090029 3.35831,-9.164561 7.1098,-6.442371 10.47626,1.213852 16.83827,26.095344 31.82362,53.1284578 43.5214,81.971445 5.99264,14.850954 10.79963,30.06444 14.13691,45.733785 -6.03866,3.375537 -11.55476,7.602052 -17.37086,11.34003 -7.37366,-39.161068 -24.81653,-75.5040867 -45.00436,-109.561908 -2.97056,-0.85895 -6.45672,9.292492 -9.19964,13.029551 -12.36993,23.0715723 -24.2416,46.544935 -31.39076,71.842012 -4.01336,12.447921 -6.94971,25.575607 -7.31567,38.654785 -0.0566,15.797197 -1.13986,32.042927 5.53124,46.827597 5.70076,17.1986 17.37244,31.57201 30.6505,43.59833 3.34025,-12.80993 -2.63984,-25.5356 -8.09574,-36.90654 -4.93733,-10.38681 -12.49402,-18.94834 -19.93112,-27.5932 -0.35077,-8.64876 -0.70155,-17.297527 -1.05233,-25.946287 12.41238,8.12293 22.02,20.108307 30.85684,31.892107 3.3212,4.89197 5.72743,11.27099 9.58144,15.29703 1.74889,-4.54909 5.16641,-10.30708 8.57378,-14.86842 7.3561,-11.60005 17.51063,-21.28272 27.67677,-30.394577 33.31798,-27.902462 74.17341,-44.856627 115.11552,-58.194406 8.53268,-2.351399 16.88104,-5.924924 25.53045,-7.502434 -9.286,32.603109 -20.16855,65.01184 -36.06147,95.066877 -5.56524,10.84399 -11.88076,21.40449 -18.97305,31.31049 -6.34083,-2.12229 -12.89908,-3.7655 -19.11736,-6.15781 19.91641,-27.48995 33.85137,-58.718897 45.02629,-90.640387 -6.04533,0.14381 -13.01715,4.465616 -19.41251,6.1879 -29.5922,11.938246 -59.0408,26.14137 -82.94859,47.593977 -11.0873,10.36888 -21.32202,21.76885 -27.60791,35.75827 -5.8145,10.66924 -9.2872,22.89418 -7.44351,35.07163 8.95135,-8.23067 17.32418,-16.93719 23.26195,-27.6466 6.60212,-10.53523 9.97123,-22.62711 12.59981,-34.69283 6.73596,-5.84907 13.44436,-11.73193 20.63824,-17.01958 -0.62354,19.66596 -4.20354,39.85532 -13.65904,57.27258 -5.27646,9.79046 -11.22391,19.07393 -19.61865,26.50822 -2.19774,3.06623 -14.36723,12.26206 -4.11318,9.30029 15.83379,-2.12902 30.7186,-8.51237 43.45687,-18.10551 5.85824,-1.48387 12.71598,1.83688 18.95771,2.19642 9.94754,1.59293 3.12476,5.56326 -1.99173,9.2917 -14.18743,11.46221 -31.07635,20.70183 -49.12961,23.77593 -6.31501,0.17398 -12.66762,-2.83746 -18.42594,1.1481 -7.17709,4.03958 7.71126,2.3263 10.235,5.51468 11.01405,4.09692 16.27568,15.44858 19.12866,26.11397 -14.99175,-2.25631 -29.80632,-8.63969 -40.81923,-19.20251 -1.30304,4.59756 4.26804,11.54277 8.23849,15.13413 6.71197,7.44166 14.89613,12.79582 24.05007,16.77491 7.70883,4.48487 16.46192,6.55391 24.73451,9.73456 1.31022,-5.145 -3.67011,-11.71684 -4.79121,-17.41332 -4.36453,-11.08162 -10.15644,-21.70525 -18.25486,-30.50726 6.47367,-2.18993 12.94733,-4.37985 19.421,-6.56978 17.94392,22.77279 24.42441,51.85309 30.51344,79.602 -7.90004,0.0459 -16.85475,-3.55111 -25.15712,-4.89486 -21.02789,-6.3142 -42.72804,-13.45992 -59.44364,-28.23438 -4.33325,-2.12241 -8.96717,-13.68876 -13.06685,-8.47429 -17.49235,20.84691 -44.45496,30.11362 -69.90803,37.1299 -7.60039,1.6688 -15.18303,3.51317 -22.79522,5.07272 z" />

  </g>
</svg>
#smLeaf {
  opacity: 0;
  animation-name: fader1;
  animation-delay: 1s;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

#rightLeaf {
  opacity: 0;
  animation-name: fader2;
  animation-delay: 2s;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

#leftLeaf {
  opacity: 0;
  animation-name: fader3;
  animation-delay: 3s;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

#bigLeaf {
  opacity: 0;
  animation-name: fader4;
  animation-delay: 4s;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

@keyframes fader1 {
  to {
    opacity: 1;
  }
}
@keyframes fader2 {
  to {
    opacity: 1;
  }
}
@keyframes fader3 {
  to {
    opacity: 1;
  }
}

@keyframes fader4 {
  to {
    opacity: 1;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.