<html>
<head>
<title>CSS Conic Gradient Use - RJM Programming - December, 2022 ... Thanks to https://www.w3schools.com/cssref/func_conic-gradient.php</title>
<style>
td {
vertical-align: top;
}
#congrad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green);
}
</style>
<script type=text/javascript>
var mou='';
var three=3;
function angpremodeofuse(ioo) {
var secs=document.getElementById('tdstyourling').value.split('conic-gradient(');
var fromstrtwo='youllneverfindthis';
var tostrtwo='youllneverfindthis';
if (eval('' + secs.length) > 1) {
//if (eval('' + secs.length) > 1) {
if (eval('' + secs[1].split(' ,').length) > 1) {
fromstrtwo='' + secs[1].split(' ,')[0] + ' ,';
ioo.value=fromstrtwo.replace(/\ ,/g,',').replace(/\,$/g,' ,');
tostrtwo='';
} else if (eval('' + secs[1].split(',').length) > 1) {
if (secs[1].split(',')[0].indexOf(' ') != -1) {
fromstrtwo='' + secs[1].split(',')[0] + ',';
ioo.value=fromstrtwo.replace(' ,',',').replace(/\,$/g,' ,');
tostrtwo='';
}
}
//}
}
//premodeofuse();
}
function cirpremodeofuse(ioo) {
var secs=document.getElementById('tdstyourling').value.split('border-radius:');
var fromstrtwo='youllneverfindthis';
var tostrtwo='youllneverfindthis';
if (eval('' + secs.length) > 1) {
//if (eval('' + secs.length) > 1) {
if (eval('' + secs[1].split(' ;').length) > 1) {
fromstrtwo='border-radius:' + secs[1].split(' ;')[0] + ' ;';
ioo.value=fromstrtwo.replace(' ;',';');
tostrtwo='border-radius:';
} else if (eval('' + secs[1].split(';').length) > 1) {
//if (secs[1].split(';')[0].indexOf(' ') != -1) {
fromstrtwo='border-radius:' + secs[1].split(';')[0] + ';';
ioo.value=fromstrtwo.replace(' ;',';');
tostrtwo='border-radius:';
//}
}
//}
}
//premodeofuse();
}
function premodeofuse() {
if ((document.getElementById('icircle').value.trim() + ' ').substring(0,1) >= '0' && (document.getElementById('icircle').value.trim() + ' ').substring(0,1) <= '9') {
var ih=document.getElementById('icircle').value;
document.getElementById('icircle').value='border-radius:' + ih;
}
modeofuse(document.getElementById('isel'));
}
function modeofuse(sio) {
var i=0, j=0;
var dls=['(','[','{'];
var sld=[')',']','}'];
var defcolour='rgb(),rgb[],rgb{}';
var dc='';
var postsofar='';
var cangle='';
var sofar='';
var fromstr='youllneverfindthis';
var tostr='youllneverfindthis';
var fromstrtwo='youllneverfindthis';
var tostrtwo='youllneverfindthis';
var secs=document.getElementById('tdstyourling').value.split('conic-gradient(');
if (document.getElementById('icircle').value.indexOf('border-radius:') != -1) {
postsofar=String.fromCharCode(10) + ' ' + (document.getElementById('icircle').value + '; ').replace(';;',';') + String.fromCharCode(10);
if (document.getElementById('tdstyourling').value.indexOf('border-radius:') != -1) {
fromstr='border-radius:' + document.getElementById('tdstyourling').value.split('border-radius:')[1];
tostr=postsofar.substring(1) + '' + String.fromCharCode(10) + '}';
} else {
fromstr='}';
tostr=postsofar + '' + String.fromCharCode(10) + '}';
}
sofar=document.getElementById('tdstyourling').value;
}
if (document.getElementById('iangle').value.trim() != '') {
cangle=(document.getElementById('iangle').value.trim() + ',').replace(',,',',').replace(/\,$/g,' ,');
sofar=document.getElementById('tdstyourling').value;
if (eval('' + secs.length) > 1) {
if (eval('' + secs[1].split(' ,').length) > 1) {
fromstrtwo='(' + secs[1].split(' ,')[0] + ' ,';
tostrtwo='(';
} else if (eval('' + secs[1].split(',').length) > 1) {
if (secs[1].split(',')[0].indexOf(' ') != -1) {
fromstrtwo='(' + secs[1].split(',')[0] + ',';
tostrtwo='(';
}
}
}
}
if (document.getElementById('tdstyourling').value.indexOf('conic-gradient(') != -1) {
if ((sio.value + ' ').substring(0,1).toLowerCase() == 'r') {
sofar=document.getElementById('tdstyourling').value.split('conic-gradient(')[0] + 'conic-gradient(';
three=eval(sio.value.substring(1));
if (three > 3) { dls.push('<'); sld.push('>'); defcolour+=',rgb<>'; }
if (three > 4) { dls.push('!'); sld.push('|'); defcolour+=',rgb!|'; }
if ((sio.value + ' ').substring(0,1) == 'R') { defcolour=defcolour.replace(/rgb/g,'rgba'); }
dc=defcolour.replace(dls[0],dls[0] + Math.floor(Math.random() * 255));
for (j=0; j<three; j++) {
if (j > 0) { dc=dc.replace(dls[j],dls[j] + Math.floor(Math.random() * 255)); }
for (i=1; i<3; i++) {
dc=dc.replace(sld[j],',' + Math.floor(Math.random() * 255) + sld[j]);
if ((sio.value + ' ').substring(0,1) == 'R' && i == 2) { dc=dc.replace(sld[j],',' + ('0.' + Math.floor(Math.random() * 10)).replace('0.10','1.0') + sld[j]); }
}
}
sofar+=dc.replace('[','(').replace(']',')').replace('{','(').replace('}',')').replace('<','(').replace('>',')').replace('!','(').replace('|',')') + ');' + document.getElementById('tdstyourling').value.split('conic-gradient(')[1].split(');')[1];
}
//alert(sofar);
if (sofar != document.getElementById('tdstyourling').value.split('conic-gradient(')[0] + 'conic-gradient(' && sofar.trim() != '') {
//alert('here ' + sofar);
if (sofar != document.getElementById('tdstyourling').value) { setTimeout(premodeofuse, 5000); }
document.getElementById('dstyle').innerHTML+=sofar.replace('conic-gradient(', 'conic-gradient(' + cangle).replace(fromstr, tostr).replace(' border-radius:',' border-radius:');
document.getElementById('tdstyourling').value=sofar.replace(fromstrtwo, tostrtwo).replace('conic-gradient(', 'conic-gradient(' + cangle).replace(fromstr, tostr).replace(' border-radius:',' border-radius:');
//}
} else if (sofar == document.getElementById('tdstyourling').value && sofar.trim() != '') {
//alert(cangle + ' ... ' + sofar);
document.getElementById('dstyle').innerHTML+=sofar.replace(fromstrtwo, tostrtwo).replace('conic-gradient(', 'conic-gradient(' + cangle).replace(fromstr, tostr).replace(' border-radius:',' border-radius:');
document.getElementById('tdstyourling').value=sofar.replace(fromstrtwo, tostrtwo).replace('conic-gradient(', 'conic-gradient(' + cangle).replace(fromstr, tostr).replace(' border-radius:',' border-radius:');
} //else {
//alert('huh');
//}
}
}
function changeit(tio) {
document.getElementById('isel').value='';
document.getElementById('dstyle').innerHTML+=tio.value;
cirpremodeofuse(document.getElementById('icircle'));
angpremodeofuse(document.getElementById('iangle'));
}
function fixstyourling() {
var ihs=document.head.innerHTML + document.body.innerHTML;
document.getElementById('tdstyourling').value='<sty' + 'le> ' + String.fromCharCode(10) + '#co' + 'ngrad {' + ihs.split('#co' + 'ngrad {')[eval(-1 + ihs.split('#co' + 'ngrad {').length)].split('}')[0] + '}' + String.fromCharCode(10) + '</sty' + 'le> ';
}
</script>
</head>
<body onload=fixstyourling();>
<h1>CSS Conic Gradient Use</h1>
<h3>RJM Programming - December, 2022</h3>
<h4>Thanks to <a target=_blank title='https://www.w3schools.com/cssref/func_conic-gradient.php' href='https://www.w3schools.com/cssref/func_conic-gradient.php'>https://www.w3schools.com/cssref/func_conic-gradient.php</a></h4>
<table cellpadding=10 cellspacing=10><tr><td>
<select id=isel onchange=modeofuse(this);><option value=''>Mode of use (or change the CSS below) ...</option><option value='r3'>Random 3 colours</option><option value='r4'>Random 4 colours</option><option value='r5'>Random 5 colours</option><option value='R3'>Random 3 colours with opacity</option><option value='R4'>Random 4 colours with opacity</option><option value='R5'>Random 5 colours with opacity</option></select><br><br>
</td><td>
Angle: <input placeholder='from 90deg,' value='' title='Angle' id=iangle type=text onblur=premodeofuse();></input>
</td><td>
Border Radius: <input placeholder='border-radius:50%;' value='' title='Circularize' id=icircle type=text onblur=premodeofuse();></input>
</td></tr></table>
<table cellpadding=10 cellspacing=10 border=4>
<tr><td>
<div id=congrad onclick="document.getElementById('isel').value='';" title='Conic Gradient ... click to cease any randomosity'></div>
</td><td id=styourling><textarea style=font-size:12px;background-color:#f0f9f0; onblur=changeit(this); id=tdstyourling rows=20 cols=150></textarea></td>
</tr>
</table>
<div style=display:none; id=dstyle></div>
</body>
</html>