Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
  #frameDiv {
    height: 200px;
    width: 200px;
    border: solid black 1px;
    margin: 10px;
    background-color: rgb(222, 255, 244);
    position: relative;
    overflow: hidden;
  }
  #lineDiv {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100px;
    height: 0px;
    border: dashed 2px black;
    transform-origin: 50%;
    rotate: -45deg;
    animation: moveLine alternate ease-in-out 3s 4;
  }
  @keyframes moveLine {
    100%  { rotate: 45deg;}
  }
  #pinkDiv {
    width: 20px;
    height: 20px;
    border-radius: 25%;
    background-color: hotpink;
    position: absolute;
    z-index: 1;
    offset-path: path('M20 180 L180 20');
    stroke-width: 2px;
    stroke: black;
    animation: movePinkDiv alternate ease-in-out 3s 4;