| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" id="grove-svg" class="grove-interactive"> |
| 2 | <defs> |
| 3 | <style> |
| 4 | .grove-interactive { |
| 5 | cursor: pointer; |
| 6 | transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); |
| 7 | } |
| 8 | .grove-interactive:hover { |
| 9 | transform: translateY(-2px); |
| 10 | } |
| 11 | .bg-circle { |
| 12 | transition: fill 0.6s ease; |
| 13 | } |
| 14 | .grove-interactive:hover .bg-circle { |
| 15 | fill: #467d6d; |
| 16 | } |
| 17 | #tree-group { |
| 18 | transform-origin: 30px 52px; |
| 19 | transform: rotate(var(--sway, 0deg)); |
| 20 | transition: transform 0.15s ease-out; |
| 21 | } |
| 22 | .grove-interactive:not(:hover) #tree-group { |
| 23 | transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); |
| 24 | } |
| 25 | .branch { |
| 26 | transition: stroke-width 0.5s cubic-bezier(0.25, 1, 0.5, 1); |
| 27 | } |
| 28 | .grove-interactive:hover .b-main { stroke-width: 4.5; transition-delay: 0s; } |
| 29 | .grove-interactive:hover .b-left1 { stroke-width: 3; transition-delay: 0.05s; } |
| 30 | .grove-interactive:hover .b-right { stroke-width: 3.5; transition-delay: 0.1s; } |
| 31 | .grove-interactive:hover .b-left2 { stroke-width: 2.5; transition-delay: 0.15s; } |
| 32 | .node { |
| 33 | transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); |
| 34 | } |
| 35 | .n-root { transform-origin: 30px 52px; } |
| 36 | .n-top { transform-origin: 34px 8px; } |
| 37 | .n-right { transform-origin: 48px 23px; } |
| 38 | .n-left1 { transform-origin: 14px 33px; } |
| 39 | .n-left2 { transform-origin: 19px 11px; } |
| 40 | .grove-interactive:hover .node { |
| 41 | transform: scale(1.25); |
| 42 | } |
| 43 | .grove-interactive:hover .n-root { transition-delay: 0s; } |
| 44 | .grove-interactive:hover .n-left1 { transition-delay: 0.05s; } |
| 45 | .grove-interactive:hover .n-right { transition-delay: 0.1s; } |
| 46 | .grove-interactive:hover .n-left2 { transition-delay: 0.15s; } |
| 47 | .grove-interactive:hover .n-top { transition-delay: 0.2s; } |
| 48 | </style> |
| 49 | </defs> |
| 50 | |
| 51 | <circle cx="32" cy="32" r="32" fill="#4d8a78" class="bg-circle"/> |
| 52 | |
| 53 | <g id="tree-group"> |
| 54 | <path class="branch b-main" d="M30,52 C29,44 33,37 31,30 C29,23 32,16 34,8" stroke="white" stroke-width="4" fill="none" stroke-linecap="round"/> |
| 55 | <path class="branch b-right" d="M32,31 C37,28 42,26 48,23" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"/> |
| 56 | <path class="branch b-left1" d="M30,40 C25,37 20,35 14,33" stroke="white" stroke-width="2.5" fill="none" stroke-linecap="round"/> |
| 57 | <path class="branch b-left2" d="M33,18 C29,15 24,13 19,11" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/> |
| 58 | |
| 59 | <circle class="node n-root" cx="30" cy="52" r="4" fill="white"/> |
| 60 | <circle class="node n-top" cx="34" cy="8" r="3.5" fill="white"/> |
| 61 | <circle class="node n-right" cx="48" cy="23" r="3.5" fill="white"/> |
| 62 | <circle class="node n-left1" cx="14" cy="33" r="3" fill="white"/> |
| 63 | <circle class="node n-left2" cx="19" cy="11" r="2.5" fill="white"/> |
| 64 | </g> |
| 65 | |
| 66 | <script type="text/javascript"> |
| 67 | <![CDATA[ |
| 68 | (function() { |
| 69 | var svg = document.getElementById('grove-svg'); |
| 70 | var MAX_SWAY = 6; |
| 71 | |
| 72 | svg.addEventListener('mousemove', function(e) { |
| 73 | var rect = svg.getBoundingClientRect(); |
| 74 | var relX = ((e.clientX - rect.left) / rect.width - 0.5) * 2; |
| 75 | var angle = relX * MAX_SWAY; |
| 76 | svg.style.setProperty('--sway', angle + 'deg'); |
| 77 | }); |
| 78 | |
| 79 | svg.addEventListener('mouseleave', function() { |
| 80 | svg.style.setProperty('--sway', '0deg'); |
| 81 | }); |
| 82 | })(); |
| 83 | ]]> |
| 84 | </script> |
| 85 | </svg> |
