assets/css/component/garden.css

.st {
    display: inline-block;
    margin: 0 1ex 0 0;
    background: var(--svg) 50% / cover;
    padding: 0.5em;
    width: 1.5em;
    height: 1.5em;
}

.budding {
    --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' version='1.1' width='1em' height='1em' viewBox='0 0 60 60'><defs><style type='text/css'>path{stroke:gray;stroke-width:3;stroke-linecap:round;fill:none} %23lf>g{transform-origin:top center} %23lfr{animation:lfr 5s infinite} %23lfl{animation:lfl 5s infinite} @keyframes lfr{ 0%, 100%{transform:unset} 25%, 75%{transform:rotate(45deg) translateX(calc(100% / 6))} 50%{transform:translateX(calc(100% / -3))}} @keyframes lfl{ 0%, 100%{transform:unset} 25%, 75%{transform:rotate(-45deg) translateX(calc(100% / -6))} 50%{transform:translateX(calc(100% / 3))}} </style></defs><g id='lf'><g id='lfl'><path d='M30 50c-11,0 -20,-9 -20,-20 M10 30c11,0 20,9 20,20'/><path d='M10 30c0,-11 9,-20 20,-20 M30 10c0,11 -9,20 -20,20'/></g><g id='lfr'><path d='M30 10c11,0 20,9 20,20 M50 30c-11,0 -20,-9 -20,-20'/><path d='M50 30c0,11 -9,20 -20,20 M30 50c0,-11 9,-20 20,-20'/></g></g></svg>");
}

.evergreen {
    --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' version='1.1' width='1em' height='1em' viewBox='0 0 60 60'><defs><style type='text/css'>path{stroke:gray;stroke-width:3;stroke-linecap:round;fill:none} %23lf{animation:rot 2.5s linear infinite;transform-origin:center} %23lfr{transform:translateX(calc(100% / -3))} %23lfl{transform:translateX(calc(100% / 3))} @keyframes rot{0%{transform:unset}100%{transform:rotate(360deg)}} </style></defs><g id='lf'><g id='lfl'><path d='M30 50c-11,0 -20,-9 -20,-20 M10 30c11,0 20,9 20,20'/><path d='M10 30c0,-11 9,-20 20,-20 M30 10c0,11 -9,20 -20,20'/></g><g id='lfr'><path d='M30 10c11,0 20,9 20,20 M50 30c-11,0 -20,-9 -20,-20'/><path d='M50 30c0,11 -9,20 -20,20 M30 50c0,-11 9,-20 20,-20'/></g></g></svg>");
}

.seedling {
    --svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' version='1.1' width='1em' height='1em' viewBox='0 0 60 60'><defs><style type='text/css'>path{stroke:gray;stroke-width:3;stroke-linecap:round;fill:none} %23lf{animation:rot 2.5s infinite alternate;transform-origin:center} @keyframes rot{ 0%{transform:rotate(0deg) scale(16%)} 100%{transform:rotate(360deg) scale(100%)}} </style></defs><g id='lf'><g id='lfl'><path d='M30 50c-11,0 -20,-9 -20,-20 M10 30c11,0 20,9 20,20'/><path d='M10 30c0,-11 9,-20 20,-20 M30 10c0,11 -9,20 -20,20'/></g><g id='lfr'><path d='M30 10c11,0 20,9 20,20 M50 30c-11,0 -20,-9 -20,-20'/><path d='M50 30c0,11 -9,20 -20,20 M30 50c0,-11 9,-20 20,-20'/></g></g></svg>");
}