{"id":69809,"date":"2025-09-17T03:01:00","date_gmt":"2025-09-16T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69809"},"modified":"2025-09-16T19:53:46","modified_gmt":"2025-09-16T09:53:46","slug":"text-background-clip-animation-emoji-overlay-svg-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-animation-emoji-overlay-svg-tutorial\/","title":{"rendered":"Text Background Clip Animation Emoji Overlay SVG Tutorial"},"content":{"rendered":"
\"Text<\/a>

Text Background Clip Animation Emoji Overlay SVG Tutorial<\/p><\/div>\n

As far as “heading towards creating a tool” from yesterday’s Text Background Clip Animation Emoji Overlay Tutorial<\/a>‘s …<\/p>\n

    \n
  1. emoji<\/li>\n
  2. overlay<\/li>\n
  3. animation<\/li>\n<\/ol>\n

    … work beginnings we’re harnessing SVG’s foreignObject<\/a> sub<\/sup>element to start up<\/i> that avenue<\/i> (as some relief from the road<\/i>s heading down<\/i> lately)<\/font>.<\/p>\n

    SVG has it’s own animation abilities, but thinking we could simulate the keyframes and transitions CSS animations over the last couple of days sounded daunting. As were HTML5 canvas usage ideas. So we went down the foreignObject avenue<\/i> and have been pleased we did, really. Those keyframes and transitions animations worked but we think the background text clipping may need more research or will pan out not to be translatable to the …<\/p>\n


    \nStandalone SVG image creator
    \n<\/code><\/p>\n

    … within our “reveal”<\/a> details<\/a>\/summary<\/a> hosting<\/font> tool we hope to improve upon, from our start, today, in the SVG saveably changed<\/a> fourth draft<\/a> version of a “Text Background Clip” client web application<\/a>.<\/p>\n

    \n

    \n

    Previous relevant Text Background Clip Animation Emoji Overlay Tutorial<\/a> is shown below.<\/p>\n

    \"Text<\/a>

    Text Background Clip Animation Emoji Overlay Tutorial<\/p><\/div>\n

    It’s “overlay<\/a> day” onto yesterday’s Text Background Clip Animation Tutorial<\/a>, and we like “overlay days” much better than any “underlay days” it’s got to be said … although?!<\/a><\/p>\n

    So what constitutes a good “overlay<\/a> day” to us? It’s one that includes some\/all of (the CSS concepts) …<\/p>\n