Open chphoom opened 1 year ago
this would be so hot
To animate your SVG logo, you can use CSS animations or SVG animations. Here's an example of how to use CSS animations to spin the box:
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
This creates a keyframe animation that rotates the element from 0 degrees to 360 degrees.
.logo svg:hover, .icon svg:hover {
animation: spin 1s linear infinite;
}
This adds the spin
animation to the logo element on hover. The animation will take 1 second to complete, use a linear timing function, and will repeat infinitely.
const logo = document.querySelector('.logo svg');
const boxes = ['box1.svg', 'box2.svg', 'box3.svg'];
let currentBoxIndex = 0;
logo.addEventListener('animationiteration', () => {
currentBoxIndex = (currentBoxIndex + 1) % boxes.length;
logo.setAttribute('href', boxes[currentBoxIndex]);
});
This code listens for the animationiteration
event on the logo element, which fires every time the animation completes one iteration. It then updates the href
attribute of the logo element with the next box svg in the boxes
array.
Alternatively, you can use SVG animations to create more complex animations that involve multiple elements. Here's an example of how to animate the arrow moving:
<svg>
<rect x="0" y="0" width="100" height="100"/>
<path id="arrow" d="M50 20 L70 50 L50 80" fill="none" stroke="#000" stroke-width="5"/>
</svg>
This adds a rectangle and a path element that represents the arrow.
<svg>
<rect x="0" y="0" width="100" height="100"/>
<path id="arrow" d="M50 20 L70 50 L50 80" fill="none" stroke="#000" stroke-width="5">
<animate attributeName="d" dur="1s" repeatCount="indefinite"
values="M50 20 L70 50 L50 80; M50 30 L70 50 L50 70; M50 20 L70 50 L50 80"/>
</path>
</svg>
This adds an animate
element to the arrow path that changes the d
attribute, which defines the shape of the path, over a duration of 1 second. The values
attribute defines the different shapes that the path should take during the animation.
.logo svg:hover, .icon svg:hover {
animation: spin 1s linear infinite;
#arrow {
animation: arrow-move 1s ease-in-out infinite;
}
}
This adds the arrow-move
animation to the #arrow
element when the logo is hovered. The animation will take 1 second to complete, use an ease-in-out timing function, and will repeat infinitely.
To animate your SVG logo, you can use CSS animations or SVG animations. Here's an example of how to use CSS animations to spin the box:
- First, create a CSS class with the animation code:
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
This creates a keyframe animation that rotates the element from 0 degrees to 360 degrees.
- Add the animation to your logo element:
.logo svg:hover, .icon svg:hover { animation: spin 1s linear infinite; }
This adds the
spin
animation to the logo element on hover. The animation will take 1 second to complete, use a linear timing function, and will repeat infinitely.
- If you have multiple box svgs at different angles, you can use JavaScript to swap them out during the animation:
const logo = document.querySelector('.logo svg'); const boxes = ['box1.svg', 'box2.svg', 'box3.svg']; let currentBoxIndex = 0; logo.addEventListener('animationiteration', () => { currentBoxIndex = (currentBoxIndex + 1) % boxes.length; logo.setAttribute('href', boxes[currentBoxIndex]); });
This code listens for the
animationiteration
event on the logo element, which fires every time the animation completes one iteration. It then updates thehref
attribute of the logo element with the next box svg in theboxes
array.Alternatively, you can use SVG animations to create more complex animations that involve multiple elements. Here's an example of how to animate the arrow moving:
- Add the arrow element to your SVG:
<svg> <rect x="0" y="0" width="100" height="100"/> <path id="arrow" d="M50 20 L70 50 L50 80" fill="none" stroke="#000" stroke-width="5"/> </svg>
This adds a rectangle and a path element that represents the arrow.
- Create an SVG animation that animates the arrow path:
<svg> <rect x="0" y="0" width="100" height="100"/> <path id="arrow" d="M50 20 L70 50 L50 80" fill="none" stroke="#000" stroke-width="5"> <animate attributeName="d" dur="1s" repeatCount="indefinite" values="M50 20 L70 50 L50 80; M50 30 L70 50 L50 70; M50 20 L70 50 L50 80"/> </path> </svg>
This adds an
animate
element to the arrow path that changes thed
attribute, which defines the shape of the path, over a duration of 1 second. Thevalues
attribute defines the different shapes that the path should take during the animation.
- Add the animation to your logo element:
.logo svg:hover, .icon svg:hover { animation: spin 1s linear infinite; #arrow { animation: arrow-move 1s ease-in-out infinite; } }
This adds the
arrow-move
animation to the#arrow
element when the logo is hovered. The animation will take 1 second to complete, use an ease-in-out timing function, and will repeat infinitely.
@elaine331917 this is what chatgpt said.... do the magic words make sense to you
handing off to frontend members
im gonna research it >:)))))