<html><head></head><body><svg width="215" height="274" viewBox="0 0 215 274">
<style>
#layer-1 {transform-origin:50% 50%;}
</style>
<radialGradient id="grad-1">
<stop offset=".7" stop-color="#ee0000"></stop>
<stop offset=".9" stop-color="#ff0000"></stop>
</radialGradient>
<g id="layer-1">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" values="-3;3;-3" dur="3s" repeatCount="indefinite" fill="freeze"></animateTransform>
<g id="layer-1-1">
<path class="stems" fill="none" stroke="green" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498"></path>
<path class="leaf" fill="green" stroke="green" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20.031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z"></path>
</g>
<path class="r-cherry" fill="url(#grad-1)" stroke="red" stroke-width="12" d="M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478 C155.46,191.738,159.715,193.485,164.836,193.136z"> </path>
<path class="l-cherry" fill="url(#grad-1)" stroke="red" stroke-width="12" d="M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z"></path>
</g>
</svg></body></html>
반응형
'svg' 카테고리의 다른 글
| svg text animation ; spiral (0) | 2023.10.13 |
|---|---|
| svg animateMotion : keyPoints (0) | 2023.10.13 |
| svg viewBox ;understanding relative, abolute units and using group tag <g> (0) | 2023.10.12 |
| svg viewBox ;understanding relative, abolute units (0) | 2023.10.12 |
| svg viewBox ; a coordinate system (0) | 2023.10.11 |
