View online: https://vgmoose.bdns.dev/dvd.html
This is using CSS animations, and no javascript, so it works embedded within an SVG, which can also be embedded within BDNS profiles.
Example on my profile: http://bdns.bio/vgmoose
Profile embed:
HTML/CSS:
<body>
<style>
body {
margin: 0;
background-color: darkblue;
background: linear-gradient(to top, #3204fdba, #9907facc), darkblue no-repeat top center;
width: 100%;
height: 100%;
}
img, div {
width: 110px;
height: 66px;
}
.x {
animation: x 6.5s linear infinite alternate;
}
.y {
animation: y 3.5s linear infinite alternate;
}
@keyframes x {
100% {
transform: translateX( calc(400px - 110px) );
}
}
@keyframes y {
100% {
transform: translateY( calc(400px - 66px) );
}
}
</style>
<div class="x">
<img class="y" src="https://vgmoose.bdns.dev/dvd_logo.png" alt="dvd" />
</div>
</body>
To learn more about CSS animations and keyframes, see this page: https://www.w3schools.com/css/css3_animations.asp
