Tag Archives: keyframes

The SVG we are using for sharing functionality, as we talked about yesterday with Text Background Clip Animation Emoji Overlay SVG Sharing Tutorial has another amazing talent. You can adjust it’s display in the same way the HTML of a body element can be adjusted, via embedding CSS inline style element data inside that SVG (or body element) innerHTML and in so doing continue it’s independent usefulness. this extension to the right hand textarea functionality consisted of making this style element embedding happen within the SVG that in turn is within the iframe element hosting it … as one of today’s jobs, with the other being … as far as emoji data goes, sometimes it is impossible to find the emoji of interest in those emoji menus you can access these days, and so we wanted to offer the … Code point(s) approach … for users to specify emojis (or other textual data) to be displayed in that newish textbox we created for the purpose a couple of days ago. What’s the big deal here? Well, take a look at a typical fileformat.info page such as the one below for “banana” … Look at all the different ways a banana 🍌 emoji can be specified! We allow logic for … HTML Entity (decimal) HTML Entity (hex) Unicode character C/C++/Java source code … and then, inhouse, we allow for … Decimal Code point(s) comma separated Hex Code point(s) comma separated … as per the new Javascript code … function allownums(ininvl, tboxo) { // 20320,22909 // alert(“你好”.replace(/[\u00A0-\u9999<>\&]/g, i => ‘&#’+i.charCodeAt(0)+’;’)); var inm=0, itdepends=false; var invl=ininvl; var iwords=invl.replace(/\&nbsp\;/g,’ ‘).split(‘ ‘); ininvl=ininvl.replace(/\ U\+/g, ‘,U+’).replace(/\ u\+/g, ‘,u+’).replace(/\ \\U/g, “,\\U”).replace(/\ \\u/g, “,\\u”).replace(/\ u\+/g, ‘,u+’).replace(/\;\ \&\#/g, ‘,&#’).replace(/\;\&\#/g, ‘,&#’).replace(/\ \&\#/g, ‘,&#’).replace(/\&\#x/g, ‘0x’).replace(/\&\#/g, ”).replace(/\;\ /g, ‘,’).replace(/\;/g, ‘,’).replace(/U\+/g,’0x’).replace(/u\+/g,’0x’).replace(/\\u/g,’0x’).replace(/\\U/g,’0x’).replace(/\.\,/g,’,’).replace(/\,\./g,’,’).replace(/\&nbsp\;/g,’ ‘); if (ininvl != invl) { itdepends=true; iwords=ininvl.trim().toLowerCase().split(‘ ‘); } if (ininvl != invl && (!itdepends || eval(” + iwords.length) == 1)) { if ((” + ininvl.trim().toLowerCase()) != ” && (” + ininvl.trim().toLowerCase()).replace(/\./g,”).replace(/\,/g,”).replace(/\x/g,”) != ” && (” + ininvl.trim().toLowerCase()).replace(/\./g,”).replace(/\,/g,”).replace(/\x/g,”).replace(/0/g,”).replace(/1/g,”).replace(/2/g,”).replace(/3/g,”).replace(/4/g,”).replace(/5/g,”).replace(/6/g,”).replace(/7/g,”).replace(/8/g,”).replace(/9/g,”).replace(/a/g,”).replace(/b/g,”).replace(/c/g,”).replace(/d/g,”).replace(/e/g,”).replace(/f/g,”) == ”) { if (ininvl.trim().toLowerCase().replace(/\./g,’,’).indexOf(‘,’) != -1 || ininvl.trim().toLowerCase().replace(/\./g,’,’).indexOf(‘0x’) != -1 || eval(” + ininvl.trim().length) > 3) { if (ininvl.trim().toLowerCase().replace(/a/g,”).replace(/b/g,”).replace(/c/g,”).replace(/d/g,”).replace(/e/g,”).replace(/f/g,”) != ininvl.trim().toLowerCase() && ininvl.trim().toLowerCase().indexOf(‘x’) == -1) { eval(“ininvl=String.fromCodePoint(0x” + ininvl.trim().toLowerCase().replace(/\./g,’,’).replace(/\,/g,’,0x’) + ‘);’); } else { eval(“ininvl=String.fromCodePoint(” + ininvl.trim().toLowerCase().replace(/\./g,’,’) + ‘);’); } } else { ininvl=invl; } tboxo.value=” + ininvl; invl=” + ininvl; } } else if ((” + iwords[0].trim().toLowerCase()) != ” && (” + iwords[0].trim().toLowerCase()).replace(/\./g,”).replace(/\,/g,”).replace(/\x/g,”) != ” && (” + iwords[0].trim().toLowerCase()).replace(/\./g,”).replace(/\,/g,”).replace(/\x/g,”).replace(/0/g,”).replace(/1/g,”).replace(/2/g,”).replace(/3/g,”).replace(/4/g,”).replace(/5/g,”).replace(/6/g,”).replace(/7/g,”).replace(/8/g,”).replace(/9/g,”).replace(/a/g,”).replace(/b/g,”).replace(/c/g,”).replace(/d/g,”).replace(/e/g,”).replace(/f/g,”) == ”) … Continue reading →