# <mark>Motivation</mark> <hr> <center> ![w:300 h:220](./img/rain.gif) ![w:300 h:220](./img/suny.gif) ![w:300 h:250](./img/low_cd.gif) ![w:300 h:250](./img/high_cd.gif) </center> <div style="left:0%; top:88%; position: absolute"><hr width="1300px" color="lightgray" size="3"></div>
![w:400 h:250](./img/TRM.gif)
<?xml version="1.0" encoding="UTF-8"?> <svg id="b" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 322.01 322.01"> <defs> <style> .e{ fill:url(#d); } .rotate{ transform-origin: center; animation: rotation 20s infinite linear; } @keyframes rotation{ from{ transform: rotate(0deg); } to{ transform: rotate(359deg); } } </style> <radialGradient id="d" cx="161.01" cy="161.01" fx="161.01" fy="161.01" r="161.01" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="red"/> <stop offset=".22" stop-color="#ff0"/> <stop offset=".4" stop-color="#f7931e"/> <stop offset=".73" stop-color="#f0f"/> <stop offset="1" stop-color="#aca1c9"/> </radialGradient> </defs> <g id="c" class="rotate"> <path class="e" d="M322.01,161c-88.92,0-161.01,72.09-161.01,161.01,0-88.92-72.08-161.01-161-161.01C88.92,161,161,88.92,161,0c0,88.92,72.09,161,161.01,161Z"/> </g> </svg> --- <svg viewBox="0 0 500 1000" height="100%" width="100%"> <style> .draw {stroke-dasharray: 10; animation: dashdraw 4s linear ;} @keyframes dashdraw {to {stroke-dashoffset: 200;}} </style> <path class="draw" stroke-linejoin="round" stroke="darkslategray" fill="none" stroke-width="5" d="M 0 50 C 40 10, 60 10, 100 50 C 140 90, 160 90, 200 50"/>
</svg> <svg viewBox="0 0 800 500" style="border: solid 1px grey"> <style> .draw {stroke-dasharray:10;animation: dashdraw 1s linear infinite;} @keyframes dashdraw {0% {stroke-dashoffset:20;}} </style> <!-- <path class="draw" stroke-linejoin="round" stroke="darkslategray" fill="none" stroke-width="5" d="M 0 50 C 40 10, 60 10, 100 50 C 140 90, 160 90, 200 50"/> <path class="draw" stroke-linejoin="round" stroke="dodgerblue" fill="none" stroke-width="7" d="M 0 250 C 100 400, 150 400, 250 250, 350 100, 400 100, 500 250, 600 400, 750 400, 800 250"/> <path class="draw" stroke-linejoin="round" stroke="orangered" fill="none" stroke-width="7" d="M 0 250 C 100 100, 150 100, 250 250, 350 400, 400 400, 500 250, 600 100, 750 100, 800 250"/> </svg> --- <svg viewBox="0 0 800 500" style="border: solid 1px grey"> <style> svg { width: 300px; display: block; position: absolute; } .ball { width: 10px; height: 10px; background-color: red; border-radius: 50%; offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80'); offset-distance: 0%; animation: red-ball 2s linear alternate infinite; } @keyframes red-ball { from { offset-distance: 0%; } to { offset-distance: 100%; } } </style> <path stroke="gray" stroke-width="3" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path> </svg> <div class="ball"></div>