Objective: Create an html webpage that shows two gears, made with SVG, rotating at the same time. The two gears should mesh together by their teeth.
Problem: To make the gears appear more realistic, I added a gradient. Since the gradient is part of the gear, it rotated with the gear. The gradient needs to remain in one position.
Solution: To keep the gradient in place, I made it rotate at the same pace/speed as the front gear but in the opposite direction. This gives it the illusion that the gradient has not moved.