JSFiddle - React, Tailwind, and code Playground

by Patrick Ludewig

HTML

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <linearGradient id="favorite-animation" gradientTransform="rotate(60)">
                        <stop offset="0" stop-color="transparent">
                            <!--<animate dur="0.25s" attributeName="offset" fill="freeze" begin="0.1s" from="0" to="1"></animate>-->
                        </stop>
                        <stop offset="0" stop-color="#000">
                           <!-- <animate dur="0.25s" attributeName="offset" fill="freeze" begin="0.1s" from="0" to="1"></animate>-->
                        </stop>
                    </linearGradient>
                    <g fill="url(#favorite-animation)">
                    <path d="M18.25...