<html>
<head>
<meta charset='utf-8'/>
<title>Text Background Clip - RJM Programming - May, 2022 ... thanks to https://codepen.io/shshaw/pen/ELBayz</title>
<style>
#xbox:before {
content: attr(data-hover);
}
#box:after {
content: attr(data-hover);
}
#bbox:after {
content: attr(data-hover);
}
div {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;
background: url(https://picsum.photos/1000/1000?image=580) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: rgba(255,0,0,0.6);
span { color: transparent; }
}
h1 {
-webkit-animation: fadebutton 18s ease-out infinite;
-moz-animation: fadebutton 18s ease-out infinite;
animation: fadebutton 18s ease-out infinite;
}
.box {
-webkit-animation: frotate 16s ease-out infinite;
-moz-animation: frotate 16s ease-out infinite;
animation: frotate 16s ease-out infinite;
}
@keyframes frotate { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
transform: rotate(0deg);
margin-left: 0px;
}
to {
transform: rotate(90deg);
margin-left: 130px;
}
}
@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
margin-left: 0px;
}
to {
margin-left: 130px;
}
}
html { height: 100%; display: flex; }
/* body {
margin: auto;
max-width: 300px;
text-align: center;
} */
</style>
<script type='text/javascript'>
var wasih='', isih='', dho='';
var aconto=null, woo=null, wootoo=null, outfile='', lhbit='', lhad=false, newimg=null;
var czhr=null, czform=null;
function newwin(divo) {
var wo=window.open('','_blank','left=10,top=10,width=' + eval(-20 + screen.width) + ',height=' + eval(-20 + screen.height));
if (dho != '') {
wo.document.write('<html>' + dho + '<body>' + divo.outerHTML + '</body></html>');
} else {
wo.document.write('<html>' + document.head.outerHTML + '<body>' + divo.outerHTML + '</body></html>');
}
}
function iframeit(tao) {
document.getElementById('toptable').style.opacity='0.0';
document.getElementById('ifp').src=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 19876564);
if (1 == 1) {
document.getElementById('ifp').style.display='block';
document.getElementById('ifp').style.position='absolute';
document.getElementById('ifp').style.top='0px';
document.getElementById('ifp').style.left='0px';
document.getElementById('ifp').style.width='100%';
document.getElementById('ifp').style.height='100vh';
document.getElementById('ifp').style.zIndex='99';
//document.getElementById('ifp').style.opacity='1.0';
}
}
function checkforparent() {
var classdo=false;
if (document.getElementById('topdet').outerHTML.split('>')[0].indexOf(' open') == -1) {
document.getElementById('bbox').style.visibility='hidden';
}
var rectis=document.getElementById('box').getBoundingClientRect();
document.getElementById('bbox').style.position='absolute';
document.getElementById('bbox').style.left='' + rectis.left + 'px';
document.getElementById('bbox').style.top='' + rectis.top + 'px';
document.getElementById('bbox').style.display='inline-block';
if (document.URL.indexOf('#') != -1) {
classdo=true;
document.getElementById('box').style.position='absolute';
document.getElementById('box').style.left='' + rectis.left + 'px';
document.getElementById('box').style.top='' + rectis.top + 'px';
} else {
document.getElementById('box').className='box';
document.getElementById('bbox').className='box';
}
if (window.parent != window) {
dho=document.head.outerHTML.replace('<style' + document.head.outerHTML.split('<style')[1].split('</style>')[0] + '</style>', parent.document.getElementById('css').value);
document.getElementById('spares').innerHTML=parent.document.getElementById('css').value;
document.getElementById('css').value=parent.document.getElementById('css').value;
document.getElementById('words').value=alsobox(parent.document.getElementById('words').value,document.getElementById('words'));
//alert('paris=' + parent.document.getElementById('box').innerHTML);
document.getElementById('box').innerHTML=parent.document.getElementById('box').innerHTML;
document.getElementById('bbox').innerHTML=parent.document.getElementById('bbox').innerHTML;
showb();
}
if (document.URL.indexOf('#') != -1) {
//alert(6);
if (decodeURIComponent(('' + location.hash).replace(/^\#/g,'')).substring(0,1) == '<') {
//alert(66);
//alert(2);
if (decodeURIComponent(('' + location.hash).replace(/^\#/g,'')).substring(0,4) == '<svg') {
//alert(22);
//alert(666);
if (4 == 4) {
lhbit=(decodeURIComponent(('' + location.hash).replace(/^\#/g,'')));
while (lhbit.indexOf(String.fromCharCode(10)) != -1) {
lhbit=lhbit.replace(String.fromCharCode(10), ' ');
}
if (lhbit.indexOf(' title="http') != -1) {
newimg=document.createElement('img');
newimg.onload = function() {
if (1 == 4) { lhad=true; }
wootoo=window.open('','_blank','top=20,left=20,width=880,height=880');
//woo.document.write('<html><head><meta charset="UTF-8"/></head><body data-onload="ourcheckforwoo();"><!--details id=detimg open><summary>SVG Emoji Animated Overlay ...</summary--><img src="data:image/svg+xml;utf8,' + lhbit + '"></img><!--/details--><scr' + 'ipt type="text/javascript"> function ourcheckforwoo() { var rectis=document.getElementById("box").getBoundingClientRect(); document.getElementById("bbox").style.position="absolute"; document.getElementById("bbox").style.left="" + rectis.left + "px"; document.getElementById("bbox").style.top="" + rectis.top + "px"; document.getElementById("box").style.position="absolute"; document.getElementById("box").style.left="" + rectis.left + "px"; document.getElementById("box").style.top="" + rectis.top + "px"; document.getElementById("box").className="box"; document.getElementById("bbox").className="box"; } setTimeout(ourcheckforwoo, 3000); </sc' + 'ript></body></html>');
wootoo.document.write('<html><head><meta charset="UTF-8"/></head><body onload="setTimeout(function(){ document.title=document.body.title; }, 6000);" title="http:' + '//' + lhbit.split(' title="http')[1].split('//')[1].split('"')[0] + '" data-onload="ourcheckforwoo();"><!--details id=detimg open><summary>SVG Emoji Animated Overlay ...</summary--><img type="image/svg" src="' + '//' + lhbit.split(' title="http')[1].split('//')[1].split('"')[0] + '"></img><!--/details--><scr' + 'ipt type="text/javascript"> function ourcheckforwoo() { document.title=document.body.title; } setTimeout(ourcheckforwoo, 3000); </sc' + 'ript></body></html>');
}
newimg.src = '//' + lhbit.split(' title="http')[1].split('//')[1].split('"')[0];
}
if (5 == 5) {
setTimeout(dolater, 6000);
} else {
//lhbit=lhbit.split('</foreign')[0] + '</foreignObject></svg>';
//alert(222);
//var qw=prompt(lhbit,lhbit);
//setTimeout(function(){
woo=window.open('','_blank','top=10,left=10,width=900,height=900');
//woo.document.write('<html><head><meta charset="UTF-8"/></head><body data-onload="ourcheckforwoo();"><!--details id=detimg open><summary>SVG Emoji Animated Overlay ...</summary--><img src="data:image/svg+xml;utf8,' + lhbit + '"></img><!--/details--><scr' + 'ipt type="text/javascript"> function ourcheckforwoo() { var rectis=document.getElementById("box").getBoundingClientRect(); document.getElementById("bbox").style.position="absolute"; document.getElementById("bbox").style.left="" + rectis.left + "px"; document.getElementById("bbox").style.top="" + rectis.top + "px"; document.getElementById("box").style.position="absolute"; document.getElementById("box").style.left="" + rectis.left + "px"; document.getElementById("box").style.top="" + rectis.top + "px"; document.getElementById("box").className="box"; document.getElementById("bbox").className="box"; } setTimeout(ourcheckforwoo, 3000); </sc' + 'ript></body></html>');
woo.document.write('<html><head><meta charset="UTF-8"/></head><body data-onload="ourcheckforwoo();"><!--details id=detimg open><summary>SVG Emoji Animated Overlay ...</summary-->' + lhbit + '<!--/details--><scr' + 'ipt type="text/javascript"> function ourcheckforwoo() { var rectis=document.getElementById("box").getBoundingClientRect(); document.getElementById("bbox").style.position="absolute"; document.getElementById("bbox").style.left="" + rectis.left + "px"; document.getElementById("bbox").style.top="" + rectis.top + "px"; document.getElementById("box").style.position="absolute"; document.getElementById("box").style.left="" + rectis.left + "px"; document.getElementById("box").style.top="" + rectis.top + "px"; document.getElementById("box").className="box"; document.getElementById("bbox").className="box"; } setTimeout(ourcheckforwoo, 3000); </sc' + 'ript></body></html>');
//}, 45000);
}
} else {
document.body.innerHTML+='<details id=detimg open><summary>SVG Emoji Animated Overlay ...</summary><img onload="location.href=' + "'#detimg';" + '" src="data:image/svg+xml;utf8,' + (decodeURIComponent(('' + location.hash).replace(/^\#/g,''))) + '"></img></details>';
}
} else {
document.body.innerHTML=decodeURIComponent(('' + location.hash).replace(/^\#/g,''));
classdo=false;
}
}
setTimeout(alater, 4000);
}
if (classdo) {
document.getElementById('box').className='box';
document.getElementById('bbox').className='box';
}
}
function alater() {
var rectis=null, doclass=false;;
if (document.getElementById('words').value != document.getElementById('xbox').innerHTML) {
//alert(document.getElementById('xbox').innerHTML);
document.getElementById('words').value=document.getElementById('xbox').innerHTML;
showb();
var jsih=document.getElementById('words').value;
if (jsih.indexOf(String.fromCharCode(10)) != -1) {
while (jsih.indexOf(String.fromCharCode(10)) != -1) {
jsih=jsih.replace(String.fromCharCode(10),'<br>');
}
}
document.getElementById('box').innerHTML=alsobox(jsih,document.getElementById('box'));
document.getElementById('bbox').innerHTML=alsobox(jsih,document.getElementById('bbox'));
rectis=document.getElementById('box').getBoundingClientRect();
document.getElementById('bbox').style.position='absolute';
document.getElementById('bbox').style.left='' + rectis.left + 'px';
document.getElementById('bbox').style.top='' + rectis.top + 'px';
document.getElementById('bbox').style.display='inline-block';
document.getElementById('box').style.position='absolute';
document.getElementById('box').style.left='' + rectis.left + 'px';
document.getElementById('box').style.top='' + rectis.top + 'px';
//document.getElementById('box').style.display='inline-block';
doclass=true;
//document.getElementById('box').className='box';
//document.getElementById('bbox').className='box';
}
if (document.getElementById('xbox').getAttribute('data-hover').trim() != document.getElementById('ewords').value.trim()) {
document.getElementById('ewords').value=document.getElementById('xbox').getAttribute('data-hover');
wordize(document.getElementById('ewords'));
rectis=document.getElementById('box').getBoundingClientRect();
document.getElementById('bbox').style.position='absolute';
document.getElementById('bbox').style.left='' + rectis.left + 'px';
document.getElementById('bbox').style.top='' + rectis.top + 'px';
document.getElementById('bbox').style.display='inline-block';
document.getElementById('box').style.position='absolute';
document.getElementById('box').style.left='' + rectis.left + 'px';
document.getElementById('box').style.top='' + rectis.top + 'px';
//document.getElementById('box').style.display='inline-block';
doclass=true;
//document.getElementById('box').className='box';
//document.getElementById('bbox').className='box';
}
if (doclass) {
document.getElementById('box').className='box';
document.getElementById('bbox').className='box';
}
if (document.getElementById('topdet').outerHTML.split('>')[0].indexOf(' open') == -1) {
document.getElementById('bbox').style.visibility='hidden';
}
}
function dolater() {
if (!lhad) {
woo=window.open('','_blank','top=10,left=10,width=900,height=900');
//woo.document.write('<html><head><meta charset="UTF-8"/></head><body data-onload="ourcheckforwoo();"><!--details id=detimg open><summary>SVG Emoji Animated Overlay ...</summary--><img src="data:image/svg+xml;utf8,' + lhbit + '"></img><!--/details--><scr' + 'ipt type="text/javascript"> function ourcheckforwoo() { var rectis=document.getElementById("box").getBoundingClientRect(); document.getElementById("bbox").style.position="absolute"; document.getElementById("bbox").style.left="" + rectis.left + "px"; document.getElementById("bbox").style.top="" + rectis.top + "px"; document.getElementById("box").style.position="absolute"; document.getElementById("box").style.left="" + rectis.left + "px"; document.getElementById("box").style.top="" + rectis.top + "px"; document.getElementById("box").className="box"; document.getElementById("bbox").className="box"; } setTimeout(ourcheckforwoo, 3000); </sc' + 'ript></body></html>');
woo.document.write('<html><head><meta charset="UTF-8"/></head><body data-onload="ourcheckforwoo();"><!--details id=detimg open><summary>SVG Emoji Animated Overlay ...</summary-->' + lhbit + '<!--/details--><scr' + 'ipt type="text/javascript"> function ourcheckforwoo() { var rectis=document.getElementById("box").getBoundingClientRect(); document.getElementById("bbox").style.position="absolute"; document.getElementById("bbox").style.left="" + rectis.left + "px"; document.getElementById("bbox").style.top="" + rectis.top + "px"; document.getElementById("box").style.position="absolute"; document.getElementById("box").style.left="" + rectis.left + "px"; document.getElementById("box").style.top="" + rectis.top + "px"; document.getElementById("box").className="box"; document.getElementById("bbox").className="box"; } setTimeout(ourcheckforwoo, 3000); </sc' + 'ript></body></html>');
}
lhad=false;
}
function checkforwoo() {
var rectis=woo.getElementById('box').getBoundingClientRect();
woo.getElementById('bbox').style.position='absolute';
woo.getElementById('bbox').style.left='' + rectis.left + 'px';
woo.getElementById('bbox').style.top='' + rectis.top + 'px';
woo.getElementById('bbox').style.color='red';
woo.getElementById('bbox').style.opacity='0.7';
//woo.getElementById('bbox').style.display='inline-block';
woo.getElementById('box').style.position='absolute';
woo.getElementById('box').style.left='' + rectis.left + 'px';
woo.getElementById('box').style.top='' + rectis.top + 'px';
woo.getElementById('box').style.opacity='0.7';
woo.getElementById('bbox').className='box';
woo.getElementById('box').className='box';
}
function checkforchild() {
var rectis=aconto.getElementById('box').getBoundingClientRect();
aconto.getElementById('bbox').style.position='absolute';
aconto.getElementById('bbox').style.left='' + rectis.left + 'px';
aconto.getElementById('bbox').style.top='' + rectis.top + 'px';
aconto.getElementById('bbox').style.color='red';
aconto.getElementById('bbox').style.opacity='0.7';
//aconto.getElementById('bbox').style.display='inline-block';
aconto.getElementById('box').style.position='absolute';
aconto.getElementById('box').style.left='' + rectis.left + 'px';
aconto.getElementById('box').style.top='' + rectis.top + 'px';
aconto.getElementById('box').style.opacity='0.7';
aconto.getElementById('bbox').className='box';
aconto.getElementById('box').className='box';
}
function emailit() {
var tag=null;
if (4 == 4) {
tag = document.createElement('a');
tag.id='aem';
tag.target='_top';
tag.href='mailto:?subject=Text%20Background%20Clip%20with%20Emoji%20and%20Animation%20and%20Overlay&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#' + encodeURIComponent(document.body.innerHTML.replace(String.fromCharCode(10),'')));
tag.style.display='none';
document.body.appendChild(tag);
tag.click();
} else {
var emis=prompt('Email address to send to?', '');
if (emis != null) {
if (emis.trim() != '') {
if (emis.indexOf('@') != '') {
//document.getElementById('myemail').href=document.getElementById('myemail').href.replace('mailto:', 'mailto:' + emis);
//document.getElementById('myemail').click();
//parent.document.getElementById('myform').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
//parent.document.getElementById('myform').target='jfp';
document.getElementById('myform').target='jfp';
//alert('ReadY');
document.getElementById('subbut').click();
//alert('REadY');
//top.location.href=document.URL.split('?')[0];
//alert('REAdY');
} else if (emis.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,'') == '') {
//document.getElementById('mysms').href=document.getElementById('mysms').href.replace('sms:', 'sms:' + emis);
//document.getElementById('mysms').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=sms value=\"' + emis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
} else {
//document.getElementById('myemail').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
}
}
}
}
}
function smsit() {
if (4 == 4) {
tag = document.createElement('a');
tag.id='asm';
tag.target='_top';
tag.href='sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#' + encodeURIComponent(document.body.innerHTML.replace(String.fromCharCode(10),'')));
tag.style.display='none';
document.body.appendChild(tag);
tag.click();
} else {
var smsis=prompt('Mobile number to SMS to?', '');
if (smsis != null) {
if (smsis.trim() != '') {
if (smsis.indexOf('@') != '') {
//document.getElementById('myemail').href=document.getElementById('myemail').href.replace('mailto:', 'mailto:' + smsis);
//document.getElementById('myemail').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + smsis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
} else if (smsis.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,'') == '') {
//document.getElementById('mysms').href=document.getElementById('mysms').href.replace('sms:', 'sms:' + smsis);
//document.getElementById('mysms').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=sms value=\"' + smsis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
}
}
}
}
}
function showb() {
document.getElementById('bemail').style.display='inline-block';
document.getElementById('bsms').style.display='inline-block';
}
function wordize(inpo) {
if (!document.getElementById('bbox')) {
document.getElementById('box').setAttribute('data-hover', inpo.value);
} else {
document.getElementById('bbox').setAttribute('data-hover', inpo.value);
}
document.getElementById('xbox').setAttribute('data-hover', inpo.value);
if (document.getElementById('bbox')) {
document.getElementById('bbox').style.opacity='0.7';
document.getElementById('box').style.opacity='0.7';
}
if (aconto) {
if (aconto.getElementById('bbox')) {
aconto.getElementById('bbox').setAttribute('data-hover', inpo.value);
aconto.getElementById('bbox').style.opacity='0.7';
aconto.getElementById('box').style.opacity='0.7';
} else {
aconto.getElementById('box').setAttribute('data-hover', inpo.value);
}
}
}
function checkif(iois) {
aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
checkforchild();
}
}
function ourprompt(svgoh) {
var oursvgoh=svgoh;
var tag=null;
var recipient='';
var dt=new Date();
var dsuff=('' + dt.toLocaleDateString() + ' ' + dt.toLocaleTimeString()).replace(/\:/g,'_').replace(/\ /g,'_').replace(/\//g,'_').replace(/\-/g,'_');
outfile='http://www.rjmprogramming.com.au/tmp/svg_e_a_o_' + dsuff + '.svg';
var xc=prompt('Optionally copy SVG below and save to a SVG file ( eg. text.svg ) that will open via a web browser Open File option ( eg. file:///Applications/MAMP/htdocs/test.svg ) or on a macOS MAMP local web server environment ( or http://localhost:8888/test.svg could also work here ). Or leave as is and use OK answer to save to URL ' + outfile + ' and display and/or share. To just email enter email address or to SMS enter a mobile number. An alternative filename suffix to ' + dsuff + ' is another OK answer option. Any other OK answers do nothing more.', svgoh);
if (xc == null) {
outfile='';
} else if (xc == svgoh) {
outfile=outfile;
} else if (xc.indexOf(' ') == -1 && xc.indexOf('@') != -1) {
recipient=xc;
tag = document.createElement('a');
tag.id='aem';
tag.target='_top';
tag.href='mailto:' + recipient + '?subject=Emoji%20Animated%20Overlay%20SVG%20image&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#' + encodeURIComponent(svgoh.replace(' onclick="top.ourprompt(this.outerHTML);"', ' title="' + outfile + '"')));
tag.style.display='none';
document.body.appendChild(tag);
tag.click();
} else if (xc.trim() != '' && xc.indexOf(' ') == -1 && xc.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,'') == '') {
recipient=xc;
tag = document.createElement('a');
tag.id='aem';
tag.target='_top';
tag.href='sms:' + recipient + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#' + encodeURIComponent(svgoh.replace(' onclick="top.ourprompt(this.outerHTML);"', ' title="' + outfile + '"')));
tag.style.display='none';
document.body.appendChild(tag);
tag.click();
} else if (xc.trim() != '' && xc.indexOf('<') == -1 && xc.indexOf(' ') == -1) {
outfile='http://www.rjmprogramming.com.au/tmp/svg_e_a_o_' + xc + '.svg';
} else if (xc.trim() != '' && xc.indexOf('<svg') == 0 && xc.indexOf('</svg>') != -1) {
oursvgoh='' + xc.split('</svg>')[0] + '</svg>';
} else {
outfile='';
}
if (outfile != '') {
czhr = new XMLHttpRequest();
czform = new FormData();
czform.append('an_i_thingo', oursvgoh);
czform.append('svg_filename', outfile);
czhr.onreadystatechange = showStuff;
czhr.open('post', '/HTMLCSS/signature_signature.php', true);
czhr.send(czform);
}
}
function showStuff() {
if (czhr != null) {
if (czhr.readyState == 4) {
if (czhr.status == 200) {
setTimeout(function(){
wootoo=window.open('','_blank','top=50,left=50,width=800,height=800');
wootoo.document.write('<html><body onload="document.title=document.body.title;" title="' + outfile + '"><img type="image/svg" src="//' + outfile.split('//')[1] + '"></img><scri' + 'pt type=text/javascript> setTimeout(function(){ document.title=document.body.title; }, 5000); </scr' + 'ipt></body></html>');
}, 1000);
}
}
}
}
function alsobox(invl, elo) {
var eloid='' + elo.id;
if (!document.getElementById('bbox')) {
document.getElementById('box').innerHTML=invl;
} else {
document.getElementById('bbox').innerHTML=invl;
}
document.getElementById('xbox').innerHTML=invl;
if (aconto) {
if (!aconto.getElementById('bbox')) {
aconto.getElementById('box').innerHTML=invl;
} else {
aconto.getElementById('bbox').innerHTML=invl;
}
}
if (eloid == 'box' && document.getElementById('bbox')) { return elo.innerHTML; }
return invl;
}
</script>
</head>
<body onload=" checkforparent(); ">
<details onclick="document.getElementById('bbox').style.visibility='visible';" id=topdet><summary>Emoji and Animation and Overlay (saveable to SVG image via right hand cell click) below ...</summary>
<table style=width:120%; title="Click on right hand cell to optionally copy SVG below and save to a SVG file ( eg. text.svg ) that will open via a web browser Open File option ( eg. file:///Applications/MAMP/htdocs/test.svg ) or on a macOS MAMP local web server environment ( or http://localhost:8888/test.svg could also work here )."><tr><td style=vertical-align:top; title="Click on right hand cell to optionally copy SVG below and save to a SVG file ( eg. text.svg ) that will open via a web browser Open File option ( eg. file:///Applications/MAMP/htdocs/test.svg ) or on a macOS MAMP local web server environment ( or http://localhost:8888/test.svg could also work here ).">
<br><br><br><br><br><br><br><br><div data-hover='👋 ' id=box data-class=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='waving' contenteditable=true onblur=" document.getElementById('words').value=alsobox(this.innerText || this.contentWindow || this.contentDocument, document.getElementById('words')); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=alsobox(isih,this); } ">Hello</div>
<br><br><br><br><br><br><br><br><br><br><br><br></td><td id=tdr style=background-color:white;vertical-align:top;width:50%;>
<iframe onload="checkif(this);" style="width:100%;height:950px;background-color:white;" srcdoc='<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" onclick="top.ourprompt(this.outerHTML);"><style> html { background-color: white; } div { margin: 0 0 0 0; background-color: white; height: 90%; overflow: auto; font-size: 128px; } #xbox:before { content: attr(data-hover); } #box:after { content: attr(data-hover); } #bbox:after { content: attr(data-hover); } .box { -webkit-animation: frotate 16s ease-out infinite; -moz-animation: frotate 16s ease-out infinite; animation: frotate 16s ease-out infinite; } @keyframes frotate { from { transform: rotate(0deg); margin-left: 0px; } to { transform: rotate(90deg); margin-left: 130px; } } @keyframes fadebutton { from { margin-left: 0px; } to { margin-left: 130px; } } </style><polygon fill="white" points="0,0 845,10 835,835 10,845" /><foreignObject x="0" y="0" width="760" height="920"><div xmlns="http://www.w3.org/1999/xhtml"><div data-hover="👋 " id=box data-class=box data-title="Double click to show in new window">Hello</div></div><div data-hover="👋 " id=bbox data-class=box data-title="Double click to show in new window">Hello</div></foreignObject></svg>'></iframe>
</td></tr></table>
</details>
<table id=toptable border=12 cellpadding=3 cellspacing=3><tr><td style=vertical-align:top; title='Click to show card above in new window' onclick="newwin(document.getElementById('box'));" ondblclick="newwin(document.getElementById('box'));">
<br><br><br><div data-hover='👋 ' id=xbox class=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='waving' contenteditable=true onblur=" document.getElementById('words').value=alsobox(this.innerText || this.contentWindow || this.contentDocument,document.getElementById('words')); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=alsobox(isih,this); } ">Hello</div><br>
</td><td id=tdmid style=vertical-align:top;text-align:center;><h1>Text Background Clip <input type=button onclick=emailit(); style=display:none; id=bemail value='Email 📧'></input> <input type=button onclick=smsit(); style=display:none; id=bsms value='SMS 📟'></input></h1><h3>RJM Programming - May, 2022</h3><h4>Thanks to <a target=_blank title=https://codepen.io/shshaw/pen/ELBayz href='https://codepen.io/shshaw/pen/ELBayz'>Emoji + background-clip:text</a></h4>
</td><td style=vertical-align:top;>
<form id=myform method=POST action=./overlay_emoji.php>
<table border=18 style=background-color:pink;>
<tr><th><input onblur="wordize(this);" style=display:inline-block;width:60px; type=text id=ewords value='👋 '></input> Words</th><th><input id=subbut type=submit value=Post style=background-color:pink;display:none;></input> CSS</th></tr>
<tr><td style=vertical-align:top;><textarea id=words name=words rows=40 onblur=" showb(); isih=this.value; if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } } document.getElementById('box').innerHTML=alsobox(isih,document.getElementById('box')); document.getElementById('bbox').innerHTML=alsobox(isih,document.getElementById('bbox')); ">Hello</textarea></td>
<td style=vertical-align:top;><textarea id=css name=css cols=52 rows=40 onblur=" showb(); iframeit(this); " title='Can use, within that SVG defining the card border, an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control=space for iOS, top left + for Android keyboard).'><style>
#xbox:before {
content: attr(data-hover);
}
#box:after {
content: attr(data-hover);
}
#bbox:after {
content: attr(data-hover);
}
div {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;
background: url(https://picsum.photos/1000/1000?image=580) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: rgba(255,0,0,0.6);
span { color: transparent; }
}
h1 {
-webkit-animation: fadebutton 4s ease-out infinite;
-moz-animation: fadebutton 4s ease-out infinite;
animation: fadebutton 4s ease-out infinite;
}
@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
margin-left: 0px;
}
to {
margin-left: 30px;
}
}
.box {
-webkit-animation: frotate 16s ease-out infinite;
-moz-animation: frotate 16s ease-out infinite;
animation: frotate 16s ease-out infinite;
}
@keyframes frotate { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
transform: rotate(0deg);
margin-left: 0px;
}
to {
transform: rotate(90deg);
margin-left: 130px;
}
}
@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
margin-left: 0px;
}
to {
margin-left: 130px;
}
}
html { height: 100%; display: flex; }
/* body {
margin: auto;
max-width: 300px;
text-align: center;
} */
</style>
</textarea></td></tr></table>
<div id=eof style=display:none;></div>
</form>
</td></tr></table>
<iframe name=ifp id=ifp style=display:none; src=''></iframe>
<div id=spares style=display:none;></div>
<iframe name=jfp id=jfp style=display:none; src=''></iframe>
<div data-hover='👋 ' id=bbox data-class=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='waving' contenteditable=true onblur=" document.getElementById('words').value=alsobox(this.innerText || this.contentWindow || this.contentDocument,document.getElementById('words')); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=alsobox(isih,this); } ">Hello</div>
<!--iframe style="width:100%;height:850px;background-color:white;" srcdoc='<svg viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><style> div { background-color: white; font: 18px serif; height: 70%; overflow: auto; font-size: 36px; border: 2px solid transparent; } #xbox:before { content: attr(data-hover); } #box:after { content: attr(data-hover); } #box:after { content: attr(data-hover); } .box { -webkit-animation: frotate 16s ease-out infinite; -moz-animation: frotate 16s ease-out infinite; animation: frotate 16s ease-out infinite; } @keyframes frotate { from { transform: rotate(0deg); margin-left: 0px; } to { transform: rotate(90deg); margin-left: 130px; } } @keyframes fadebutton { from { margin-left: 0px; } to { margin-left: 130px; } } </style><polygon points="5,5 795,10 785,785 10,795" /><foreignObject x="20" y="20" width="760" height="760"><div xmlns="http://www.w3.org/1999/xhtml"><br><br><br><br><br><br><div data-hover="👋 " id=box class=box title="Double click to show in new window">Hello</div></div></foreignObject></svg>'></iframe-->
</body>
</html>