Каким образом создается анимация для SVG элементов (персонажей) в веб-приложениях?

Для создания анимации SVG элементов в веб-приложениях обычно используются CSS анимации или JavaScript библиотеки, такие как GreenSock Animation Platform (GSAP), Snap.svg, Velocity.js и т.д. 

GSAP, это одна из самых мощных и популярных библиотек для создания анимаций веб-сайтов. С ее помощью можно легко анимировать SVG объекты, включая их движение, изменение размера, поворот и т.д. GSAP также обладает высокой производительностью и поддерживает все современные браузеры.

Для создания подобных анимаций, как в Duolingo, можно использовать комбинацию GSAP и Snap.svg. Например, GSAP можно использовать для анимации перемещения SVG элементов, а Snap.svg - для манипуляции самими SVG элементами.

Если у вас есть опыт работы с веб-анимацией, важно помнить о том, что для создания плавных и профессиональных анимаций необходимо уделить внимание деталям, таким как расчет таймингов, использование анимационных кривых, оптимизация производительности и т.д. Также полезно следить за новыми тенденциями и технологиями в области веб-анимации, так как это быстро развивающаяся область.

Могу предположить что что-то на подобии gsap
 
 Если рассматривать эту задачу в целом, без привязки к конкретному сайту, то это задача по созданию мультиков, в больших количествах, на потоке, в рамках сформированной дизайнерской системы. Делать это за счет фронтендеров - такая себе идея. Сложно всех синхронизировать, очень много накладных расходов. Это будет реально дорогая разработка. И разработчики нужны очень прошаренные по части анимаций, чтобы они были со всей командой дизайнеров на одной волне. Таких днем с огнем не найдешь. Более простой и дешевый подход состоит в том, чтобы этим всем занимались моушен-дизайнеры в рамках экосистемы Lottie . А со стороны разработки мы только интегрировали готовые сценки в сайт или приложение. В последние годы обычно все так и делают. Наш стек здесь не имеет значения, равно как и умения разработчиков.