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