📑 Style Workout 02

xxxxxxxxxx
 
string='text rows in this box could be changed and displayed in the next cell'
html("""
<table>
    <tr><td style='color:darkorchid;'><center>
    linked html elements: input text
    </center></td></tr>
    <tr><td colspan='3'>
        <textarea id='input_text_area' style='color:darkblue;' cols='100' rows='3'>"""+string+"""</textarea>
    </td></tr>
</table>""")

xxxxxxxxxx
 
html("""
<table>
    <tr><td style='color:darkorchid;'><center>
    linked html elements: output text
    </center></td></tr>
    <tr><td colspan='3'>
        <textarea id='output_text_area' style='color:darkblue;' cols='100' rows='3'></textarea>
    </td></tr>
</table>
<script>
var myObj,myJSON,text,obj;
myObj={'input_text':document.getElementById('input_text_area').value};
myJSON=JSON.stringify(myObj);
localStorage.setItem('testJSON',myJSON);
text=localStorage.getItem('testJSON');
obj=JSON.parse(text);
document.getElementById('output_text_area').innerHTML=obj.input_text;
<"""+"""/script>""")

xxxxxxxxxx
 
%%html
<div id='div002_01'></div>
<script>
const listener=new BroadcastChannel('channel1'),
      out=document.querySelector('#div002_01');
listener.onmessage=(msg)=>{
  var div=document.createElement('div');
  div.textContent=msg.data;
  div.style.border='double white'; 
  div.style.background='black'; div.style.color='white';
  div.style.width='50%'; div.style.padding='10px';
  out.appendChild(div); };

xxxxxxxxxx
 
%%javascript
const sender=new BroadcastChannel('channel1');
sender.postMessage('😋 😌 😍 😎 😏 << HELLO >> 😋 😌 😍 😎 😏');

xxxxxxxxxx
 
%%html
<div id='div002_02'></div>
<script>
function FromArrayToURL(dataArray,arrayType) {
  return URL.createObjectURL(new Blob([dataArray.buffer],{type:arrayType}))};
const L=new Uint8Array(26);
for (let i=0; i<26; i++) {L[i]=65+i;}
const url=FromArrayToURL(L,'text/plain'),
      link=document.createElement('a');
link.href=url; link.innerText='😋 😌 😍 😎 😏 ARRAY URL 😋 😌 😍 😎 😏'; 
const out2=document.querySelector('#div002_02');
out2.style.border='double white'; out2.style.background='black';
out2.style.width='50%'; out2.style.padding='10px';
out2.appendChild(link);

xxxxxxxxxx
 
%%html
<style>
#sun {position:absolute; top:0px; left:0%; width:100%; height:50%;
      background-repeat: no-repeat; z-index:10; opacity:.5;
      background:-webkit-radial-gradient(
          bottom,circle,
          rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%,rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,
          gba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);}
#sunDay {position:absolute; top:0px; left:0px; width:100%; height:50%;
         background-repeat: no-repeat; z-index:999; opacity:.5;  
         background:-webkit-radial-gradient(
             bottom,circle,
             rgba(252,255,251,.9) 0%,rgba(253,250,219,.4) 30%,rgba(226,219,197,.01) 70%,rgba(226,219,197,0.) 70%,rgba(201,165,132,0.) 100%);}
#moon {position:absolute; top:0px; left:0px; width:100%; height:50%;
       background-repeat: no-repeat; z-index:10001; opacity:0; 
       background:-webkit-radial-gradient(
           40% 55%,circle,
           rgba(249,249,250,1) -1%,rgba(189,255,254,1) 1%,rgba(8,49,78,1) 1%,rgba(8,26,56,1) 10%,rgba(4,16,46,1) 40%,rgba(2,8,13,1) 70%);}
#sunSet {position:absolute; top:0px; left:0px; width:100%; height:50%;
         background-repeat: no-repeat;   
         background: -webkit-radial-gradient(
             bottom,circle,rgba(254,255,255,.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%,rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);
         z-index:999; opacity:.3;}
#sky {cursor:pointer; position:absolute; z-index:5; opacity:.52;
      top:0px; left:0px; width:100%; height:50%; 
      background: -webkit-linear-gradient(
          bottom,rgba(249,251,240,1) 10%,rgba(215,253,254,1) 20%,rgba(167,222,253,1) 40%,rgba(110,175,255,1) 100%);
      background: linear-gradient(
          bottom,rgba(249,251,240,1) 10%,rgba(215,253,254,1) 20%,rgba(167,222,253,1) 40%,rgba(110,175,255,1) 100%);}
#horizon {cursor:pointer; position:absolute; top:0px; left:0;
          width:100%; height:50%; background-repeat:no-repeat; 
          background:-webkit-linear-gradient(bottom,rgba(212,87,43,.9) 0%,rgba(246,149,52,.8) 20%,rgba(24,75,106,0.) 100%);
          background:linear-gradient(bottom,rgba(212,87,43,.9) 0%,rgba(246,149,52,.8) 20%,rgba(24,75,106,0) 100%);
          z-index:5; opacity:.99;}
#horizonNight {cursor:pointer; top:0px; left:0; 
               width:100%; height:50%; opacity:0; position:absolute; 
               background-repeat:no-repeat; z-index:10000; 
               background: -webkit-linear-gradient(bottom,rgba(57,167,255,1) 0%,rgba(13,98,245,1) 20%,rgba(0,11,22,.1) 60%);
               background:linear-gradient(bottom,rgba(57,167,255,1) 0%,rgba(13,98,245,1) 20%,rgba(0,11,22,.1) 60%);}
#darknessOverlaySky {background-color:#000; opacity:0; position:absolute; 
                     top:0px; left:0px; width:100%; height:50%; z-index:9999;}
#darknessOverlay {cursor:default; background-color:#000; opacity:0;
                  position:absolute; bottom:0px; left:0px; width:100%; height:50%; z-index:99;}
#waterDistance {position:absolute; bottom:0px; left:0px; z-index:20; 
                width:100%; height:50%; background-repeat:no-repeat; 
                background: -webkit-linear-gradient(90deg,rgba(0,0,0,0.) 10%,rgba(0,0,0,.2) 44%,rgba(0,0,0,.65) 95%,rgba(0,0,0,.62) 100%);}
#water {overflow:hidden; position:absolute; 
        bottom:0px; left:0px; z-index:10;
        width:100%; height:50%; background-repeat:no-repeat;   
        background: -webkit-linear-gradient(bottom,rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%,rgba(26,126,174,1) 70%,rgba(62,168,220,1) 100%); 
        background:linear-gradient(bottom,rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%,rgba(26,126,174,1) 70%,rgba(62,168,220,1) 100%);}
#waterReflectionContainer {
    -webkit-perspective:30; perspective:30;
    -webkit-perspective-origin:50% -12%;
    perspective-origin:50% -12%; overflow:hidden; position:absolute; top:50%; left:-3%;
    width:103%; height:50%; z-index:25;}
#waterReflectionMiddle {
    position:absolute; top:0px; left:-50%; width:200%; height:55%; z-index:999; opacity:.7;
    background-repeat:no-repeat;   
    background:-webkit-radial-gradient(
        50% 0px,
        rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,.4) 35%,rgba(176,91,48,.1) 45%,
        rgba(141,88,47,0.) 60%,rgba(116,82,63,0.) 70%,rgba(44,65,68,0.) 80%,rgba(7,19,31,0.) 100%);
    -webkit-transform:rotateX(45deg);}
#waterReflectionMiddleThin {
    position:absolute; bottom:0px; left:0px; width:100%; height:100%;
    background-repeat:no-repeat;   
    background:-webkit-linear-gradient(
        left,
        rgba(69,70,61,0.) 3%,rgba(216,100,38,.1) 32%,rgba(252,176,48,0.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,
        rgba(253,254,225,1) 52%,rgba(024,194,214,1) 55%,rgba(034,204,234,.1) 65%,rgba(034,204,234,.1) 60%,rgba(034,204,234,0.) 97%); 
    background:linear-gradient(
       left,
       rgba(69,70,61,0.) 3%,rgba(216,100,38,.1) 32%,rgba(252,176,48,.35) 35%,rgba(253,215,79,1) 45%,rgba(253,254,225,1) 48%,
       rgba(253,254,225,1) 52%,rgba(024,194,214,1) 55%, rgba(034,204,234,.1) 65%,rgba(034,204,234,.1) 60%,rgba(034,204,234,0.) 97%); 
    z-index:999; -webkit-transform:rotateX(45deg); transform:rotateX(45deg);}
#division {height:5px; width:100%; position:absolute; top:50%; bottom:50%;
           background-color:rgba(000,14,24,0.); z-index:9999; cursor:ns-resize;}
#oceanRipple {opacity:.5; position:absolute; left:0%; bottom:0px; 
              background-image:repeating-linear-gradient(
                  175deg,
                  rgba(165,165,165,.08) 43%,rgba(175,175,175,.08) 45%,rgba(235,235,235,.08) 49%,
                  rgba(195,195,195,.08) 50%,rgba(165,165,165,.08) 54%); 
              width:100%; height:50%; z-index:10;}
</style>

xxxxxxxxxx
 
%%html
<div id='frame' style='height:500px; margin:0; padding:0;'>
<div id='sun' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='sunDay' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='sunSet' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='sky' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='horizon' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='horizonNight' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='moon' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='division' onmousedown='startDraggingDivision();' onmouseup='stopMove();'></div>
<div id='water' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='waterReflectionContainer' onmousedown='startMove();' onmouseup='stopMove();'>
<div id='waterReflectionMiddle' onmousedown='startMove();' onmouseup='stopMove();'></div>
</div>
<div id='waterDistance' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='darknessOverlaySky' onmousedown='startMove();' onmouseup='stopMove();'></div>
<div id='darknessOverlay'></div>
<div id='oceanRippleContainer'></div>
<div id='oceanRipple'></div>
</div>

xxxxxxxxxx
 
%%javascript
var mouse={x:0,y:0},myWidth=0,myHeight=0;
var mouseIsDown=false,mouseIsDownDivision=false;
document.addEventListener('mousemove',function(e){ 
    mouse.x=e.clientX || e.pageX; 
    mouse.y=e.clientY || e.pageY
        updateDimensions();
    document.getElementById('sun').style.background='-webkit-radial-gradient('+mouse.x+'px '+mouse.y+ 
        'px,circle,rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%,rgba(248,200,95,1) 12%,'+
        'rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%)';
    document.getElementById('sunDay').style.background='-webkit-radial-gradient('+mouse.x+'px '+mouse.y+
        'px,circle,rgba(252,255,251,.9) 0%,rgba(253,250,219,.4) 30%,rgba(226,219,197,.01) 70%,'+
        'rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%)';
    document.getElementById('sunDay').style.background='-moz-radial-gradient('+mouse.x+'px '+mouse.y+
        'px,circle,rgba(252,255,251,.9) 0%,rgba(253,250,219,.4) 30%,rgba(226,219,197,.01) 70%,'+
        'rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%)';
    document.getElementById('sunDay').style.background='-ms-radial-gradient('+mouse.x+'px '+mouse.y+
        'px,circle,rgba(252,255,251,.9) 0%,rgba(253,250,219,.4) 30%,rgba(226,219,197,.01) 70%,'+
        'rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%)';
    document.getElementById('sunSet').style.background='-webkit-radial-gradient('+mouse.x+'px '+mouse.y+
        'px,circle,rgba(254,255,255,.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%,'+
        'rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%)';
    document.getElementById('sunSet').style.background='-moz-radial-gradient('+mouse.x+'px '+mouse.y+
        'px,circle,rgba(254,255,255,.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%,'+
        'rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%)';
    document.getElementById('sunSet').style.background='-ms-radial-gradient('+mouse.x+'px '+mouse.y+
        'px,circle,rgba(254,255,255,.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%,'+
        'rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%)';
    document.getElementById('waterReflectionContainer').style.perspectiveOrigin=(mouse.x/myWidth*100).toString()+'% -15%';
    document.getElementById('waterReflectionMiddle').style.left=(mouse.x-myWidth-(myWidth*.03)).toString()+'px';
    var bodyWidth=document.getElementsByTagName('body')[0].clientWidth;
    document.getElementById('sun').style.width=(bodyWidth);
    document.getElementById('sun').style.left='0px';
    document.getElementById('sunDay').style.width=(bodyWidth);
    document.getElementById('sunDay').style.left='0px';
    var sky=document.getElementById('sun'),water=document.getElementById('water');
    var waterHeight=water.clientHeight,skyHeight=sky.clientHeight;
    var skyRatio=mouse.y/skyHeight,waterRatio=waterHeight/myHeight;
    document.getElementById('darknessOverlay').style.opacity=Math.min((mouse.y-(myHeight/2))/(myHeight/2),1);
    document.getElementById('darknessOverlaySky').style.opacity=Math.min((mouse.y-(myHeight*.7))/(myHeight-(myHeight*.7)),1);
    document.getElementById('moon').style.opacity=Math.min((mouse.y-(myHeight*.9))/(myHeight-(myHeight*.9)),.65);
    document.getElementById('horizonNight').style.opacity=(mouse.y-(myHeight*.8))/(myHeight-(myHeight*.8));
    document.getElementById('waterDistance').style.opacity=(mouse.y/myHeight+.6);
    document.getElementById('sunDay').style.opacity=(1-mouse.y/myHeight);
    document.getElementById('sky').style.opacity=Math.min((1-mouse.y/myHeight),.99);
    document.getElementById('sunSet').style.opacity=(mouse.y/myHeight-.2);
    if (mouse.y>0) {
        if (mouse.y>myHeight/2) {
            document.getElementById('sun').style.opacity=Math.min((myHeight-mouse.y)/(myHeight/2)+.2,.5);
            document.getElementById('horizon').style.opacity=(myHeight-mouse.y)/(myHeight/2)+.2;
            document.getElementById('waterReflectionMiddle').style.opacity=(myHeight-mouse.y)/(myHeight/2)-.1;
        } else {
        document.getElementById('horizon').style.opacity=Math.min(mouse.y/(myHeight/2),.99);
        document.getElementById('sun').style.opacity=Math.min(mouse.y/(myHeight/2),.5);
        document.getElementById('waterReflectionMiddle').style.opacity=mouse.y/(myHeight/2)-.1; }
    } else if (mouseIsDownDivision) {
        var sunElement=document.getElementById('sun'),
            water=document.getElementById('water'),
            division=document.getElementById('division');
        sunElement.style.height=(mouse.y).toString()+'px';
        document.getElementById('sunDay').style.height=(mouse.y).toString()+'px';
        division.style.top=(mouse.y).toString()+'px';
        var waterHeight=myHeight-mouse.y;
        water.style.height=waterHeight.toString()+'px';
        document.getElementById('sun').style.height=(mouse.y).toString()+'px';
        document.getElementById('sunDay').style.height=(mouse.y).toString()+'px';
        document.getElementById('horizon').style.height=(mouse.y).toString()+'px';
        document.getElementById('waterDistance').style.height=(myHeight-mouse.y).toString()+'px';
        document.getElementById('oceanRippleContainer').style.height=(myHeight-mouse.y).toString()+'px';
        document.getElementById('darknessOverlay').style.height=(myHeight-mouse.y).toString()+'px'; }
},false);
function updateDimensions() {
    if (typeof(window.innerWidth)=='number') {
        myWidth=window.innerWidth; myHeight=window.innerHeight;
    } else if (document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)) {
        myWidth=document.documentElement.clientWidth; myHeight=document.documentElement.clientHeight;
    } else if (document.body&&(document.body.clientWidth||document.body.clientHeight)) {
        myWidth=document.body.clientWidth; myHeight=document.body.clientHeight; } };
function startMove() {mouseIsDown=true;};
function stopMove() {mouseIsDown=false; mouseIsDownDivision=false; var sky=document.getElementById('sun');};
function startDraggingDivision() {mouseIsDownDivision=true;};
function windowResize() {
    updateDimensions();
    var skyHeight=document.getElementById('horizon').clientHeight;
    skyHeight=document.getElementById('sun').clientHeight;
    document.getElementById('waterDistance').style.height=myHeight-skyHeight;
    document.getElementById('division').style.top=skyHeight;};

xxxxxxxxxx
 
%%html
<div class='container' height='300px' style='background:slategray;'>
<svg class='ghost' id='layer1' x='0px' y='0px' width='127.433px' height='132.743px' viewBox='0 0 127.433 132.743' 
     enable-background='new 0 0 127.433 132.743' xml:space='preserve'>
<path fill='#ff355e' d='M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375
    s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6
    c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875
    s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z'/>
<circle fill='darkslategray' cx='86.238' cy='50.885' r='7.567'/>
<circle fill='darkslategray' cx='40.072' cy='50.885' r='7.567'/>
<path fill='darkslategray' d='M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771
    c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005
    c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749
    c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01
    c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034
    c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z'/>
<circle fill='#fcecee' stroke='#fecce6' stroke-miterlimit='15' cx='18.614' cy='97.426' r='3.292'/>
<circle fill='#fcecee' stroke='#fecce6' stroke-miterlimit='15' cx='95.364' cy='28.676' r='3.291'/>
<circle fill='#fcecee' stroke='#fecce6' stroke-miterlimit='15' cx='27.739' cy='91.551' r='2.667'/>
<circle fill='#fcecee' stroke='#fecce6' stroke-miterlimit='15' cx='101.489' cy='35.051' r='2.666'/>
<circle fill='#fcecee' stroke='#fecce6' stroke-miterlimit='15' cx='18.738' cy='87.717' r='2.833'/>
<path fill='#fcecee' stroke='#fecce6' stroke-miterlimit='15' 
    d='M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012
    c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259
    l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295
    c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962
    c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219
    c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936
    c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405
    c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566
    c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59
    c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366
    c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777
    c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995
    c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833
    c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074
    c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z'/>
</svg>
<p class='shadowFrame'>
<svg class='shadow' id='layer2' x='65px' y='20px' width='122.436px' height='39.744px' 
     viewBox='0 0 122.436 39.744' enable-background='new 0 0 122.436 39.744' xml:space='preserve'>
<ellipse fill='#ff355e' cx='65.128' cy='19.872' rx='49.25' ry='8.916'/>
</svg></p>
</div>

xxxxxxxxxx
 
%%html
<style>
#container {position:absolute; top:50%; left:50%; margin-left:-64.5px; margin-top:-85.5px;}
.ghost {animation:float 3s ease-out infinite;}
@keyframes float {50% {transform:translate(0,25px);} }
.shadowFrame {width:150px; margin-left:-12.5px; margin-top:15px;}
.shadow {animation:shrink 3s ease-out infinite; transform-origin:center center; ellipse {transform-origin:center center;} }
@keyframes shrink {0% {width:90%; margin:0 5%;} 50% {width:60%; margin:0 18%;} 100% {width:90%; margin:0 5%;} }
</style>

📑 Style Workout 02

Input-Output Exchange

Broadcast Channels

Blob Objects

CSS Drawing 🌐 The Original Source

CSS Anumation 🌐 The Original Source