<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./index.js"></script>
</head>
<body>
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<rect height="100%" width="100%" fill="#222" rx="10" />
<g id="dvd" height="100%" width="100%" fill="#0ff">
<path fill="inherit" d="M 91.2 12.7 c 0 0 -11 13.6 -10.4 14.4 c 0.8 -0.8 -4 -14.6 -4 -14.6 s -1 -2.8 -4 -12.4 h -59 l -2 8.8 h 19 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.4 11.4 -19.8 11.4 h -3.4 l 4.4 -19.4 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 35 -20.2 c 0.4 -2 0.4 -7.4 -0.8 -10.4 c -0.2 -0.4 -0.4 -1 0 -1 c 0.2 0 0.4 0.2 0.4 0.2 l 14.2 40.8 l 35.6 -41 h 18.6 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.6 11.4 -19.8 11.4 h -3.6 l 4.4 -19.2 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 34.8 -20.2 c 2.6 -11.4 -8.8 -20.2 -25.6 -20.2 h -32.8 c -8.4 10.4 -10 12.4 -10 12.4 l 0 0 z m -15.6 37.6 c -41.8 0 -75.6 5 -75.6 11 c 0 6 33.8 11 75.6 11 c 41.8 0 75.6 -4.8 75.6 -11 c 0 -6 -33.8 -11 -75.6 -11 z m -2.8 14.8 c -9.6 0 -17.2 -1.6 -17.2 -3.6 c 0 -2 7.6 -3.6 17.2 -3.6 c 9.6 0 17.2 1.6 17.2 3.6 c 0 2 -7.6 3.6 -17.2 3.6 z">
<animate id="xAnim" attributeName="d" values="M 91.2 12.7 c 0 0 -11 13.6 -10.4 14.4 c 0.8 -0.8 -4 -14.6 -4 -14.6 s -1 -2.8 -4 -12.4 h -59 l -2 8.8 h 19 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.4 11.4 -19.8 11.4 h -3.4 l 4.4 -19.4 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 35 -20.2 c 0.4 -2 0.4 -7.4 -0.8 -10.4 c -0.2 -0.4 -0.4 -1 0 -1 c 0.2 0 0.4 0.2 0.4 0.2 l 14.2 40.8 l 35.6 -41 h 18.6 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.6 11.4 -19.8 11.4 h -3.6 l 4.4 -19.2 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 34.8 -20.2 c 2.6 -11.4 -8.8 -20.2 -25.6 -20.2 h -32.8 c -8.4 10.4 -10 12.4 -10 12.4 l 0 0 z m -15.6 37.6 c -41.8 0 -75.6 5 -75.6 11 c 0 6 33.8 11 75.6 11 c 41.8 0 75.6 -4.8 75.6 -11 c 0 -6 -33.8 -11 -75.6 -11 z m -2.8 14.8 c -9.6 0 -17.2 -1.6 -17.2 -3.6 c 0 -2 7.6 -3.6 17.2 -3.6 c 9.6 0 17.2 1.6 17.2 3.6 c 0 2 -7.6 3.6 -17.2 3.6 z; M 772.2 12.7 c 0 0 -11 13.6 -10.4 14.4 c 0.8 -0.8 -4 -14.6 -4 -14.6 s -1 -2.8 -4 -12.4 h -59 l -2 8.8 h 19 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.4 11.4 -19.8 11.4 h -3.4 l 4.4 -19.4 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 35 -20.2 c 0.4 -2 0.4 -7.4 -0.8 -10.4 c -0.2 -0.4 -0.4 -1 0 -1 c 0.2 0 0.4 0.2 0.4 0.2 l 14.2 40.8 l 35.6 -41 h 18.6 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.6 11.4 -19.8 11.4 h -3.6 l 4.4 -19.2 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 34.8 -20.2 c 2.6 -11.4 -8.8 -20.2 -25.6 -20.2 h -32.8 c -8.4 10.4 -10 12.4 -10 12.4 l 0 0 z m -15.6 37.6 c -41.8 0 -75.6 5 -75.6 11 c 0 6 33.8 11 75.6 11 c 41.8 0 75.6 -4.8 75.6 -11 c 0 -6 -33.8 -11 -75.6 -11 z m -2.8 14.8 c -9.6 0 -17.2 -1.6 -17.2 -3.6 c 0 -2 7.6 -3.6 17.2 -3.6 c 9.6 0 17.2 1.6 17.2 3.6 c 0 2 -7.6 3.6 -17.2 3.6 z; M 91.2 12.7 c 0 0 -11 13.6 -10.4 14.4 c 0.8 -0.8 -4 -14.6 -4 -14.6 s -1 -2.8 -4 -12.4 h -59 l -2 8.8 h 19 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.4 11.4 -19.8 11.4 h -3.4 l 4.4 -19.4 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 35 -20.2 c 0.4 -2 0.4 -7.4 -0.8 -10.4 c -0.2 -0.4 -0.4 -1 0 -1 c 0.2 0 0.4 0.2 0.4 0.2 l 14.2 40.8 l 35.6 -41 h 18.6 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.6 11.4 -19.8 11.4 h -3.6 l 4.4 -19.2 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 34.8 -20.2 c 2.6 -11.4 -8.8 -20.2 -25.6 -20.2 h -32.8 c -8.4 10.4 -10 12.4 -10 12.4 l 0 0 z m -15.6 37.6 c -41.8 0 -75.6 5 -75.6 11 c 0 6 33.8 11 75.6 11 c 41.8 0 75.6 -4.8 75.6 -11 c 0 -6 -33.8 -11 -75.6 -11 z m -2.8 14.8 c -9.6 0 -17.2 -1.6 -17.2 -3.6 c 0 -2 7.6 -3.6 17.2 -3.6 c 9.6 0 17.2 1.6 17.2 3.6 c 0 2 -7.6 3.6 -17.2 3.6 z" begin="0s" repeatCount="indefinite" dur="9s" />
<animate id="yAnim" attributeName="d" values="M 91.2 12.7 c 0 0 -11 13.6 -10.4 14.4 c 0.8 -0.8 -4 -14.6 -4 -14.6 s -1 -2.8 -4 -12.4 h -59 l -2 8.8 h 19 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.4 11.4 -19.8 11.4 h -3.4 l 4.4 -19.4 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 35 -20.2 c 0.4 -2 0.4 -7.4 -0.8 -10.4 c -0.2 -0.4 -0.4 -1 0 -1 c 0.2 0 0.4 0.2 0.4 0.2 l 14.2 40.8 l 35.6 -41 h 18.6 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.6 11.4 -19.8 11.4 h -3.6 l 4.4 -19.2 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 34.8 -20.2 c 2.6 -11.4 -8.8 -20.2 -25.6 -20.2 h -32.8 c -8.4 10.4 -10 12.4 -10 12.4 l 0 0 z m -15.6 37.6 c -41.8 0 -75.6 5 -75.6 11 c 0 6 33.8 11 75.6 11 c 41.8 0 75.6 -4.8 75.6 -11 c 0 -6 -33.8 -11 -75.6 -11 z m -2.8 14.8 c -9.6 0 -17.2 -1.6 -17.2 -3.6 c 0 -2 7.6 -3.6 17.2 -3.6 c 9.6 0 17.2 1.6 17.2 3.6 c 0 2 -7.6 3.6 -17.2 3.6 z; M 91.2 862.7 c 0 0 -11 13.6 -10.4 14.4 c 0.8 -0.8 -4 -14.6 -4 -14.6 s -1 -2.8 -4 -12.4 h -59 l -2 8.8 h 19 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.4 11.4 -19.8 11.4 h -3.4 l 4.4 -19.4 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 35 -20.2 c 0.4 -2 0.4 -7.4 -0.8 -10.4 c -0.2 -0.4 -0.4 -1 0 -1 c 0.2 0 0.4 0.2 0.4 0.2 l 14.2 40.8 l 35.6 -41 h 18.6 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.6 11.4 -19.8 11.4 h -3.6 l 4.4 -19.2 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 34.8 -20.2 c 2.6 -11.4 -8.8 -20.2 -25.6 -20.2 h -32.8 c -8.4 10.4 -10 12.4 -10 12.4 l 0 0 z m -15.6 37.6 c -41.8 0 -75.6 5 -75.6 11 c 0 6 33.8 11 75.6 11 c 41.8 0 75.6 -4.8 75.6 -11 c 0 -6 -33.8 -11 -75.6 -11 z m -2.8 14.8 c -9.6 0 -17.2 -1.6 -17.2 -3.6 c 0 -2 7.6 -3.6 17.2 -3.6 c 9.6 0 17.2 1.6 17.2 3.6 c 0 2 -7.6 3.6 -17.2 3.6 z; M 91.2 12.7 c 0 0 -11 13.6 -10.4 14.4 c 0.8 -0.8 -4 -14.6 -4 -14.6 s -1 -2.8 -4 -12.4 h -59 l -2 8.8 h 19 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.4 11.4 -19.8 11.4 h -3.4 l 4.4 -19.4 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 35 -20.2 c 0.4 -2 0.4 -7.4 -0.8 -10.4 c -0.2 -0.4 -0.4 -1 0 -1 c 0.2 0 0.4 0.2 0.4 0.2 l 14.2 40.8 l 35.6 -41 h 18.6 c 10 0 16 4.2 14.4 11.4 c -1.8 8 -10.6 11.4 -19.8 11.4 h -3.6 l 4.4 -19.2 h -15.4 l -6.6 28.2 h 22 c 16.4 0 32.2 -8.8 34.8 -20.2 c 2.6 -11.4 -8.8 -20.2 -25.6 -20.2 h -32.8 c -8.4 10.4 -10 12.4 -10 12.4 l 0 0 z m -15.6 37.6 c -41.8 0 -75.6 5 -75.6 11 c 0 6 33.8 11 75.6 11 c 41.8 0 75.6 -4.8 75.6 -11 c 0 -6 -33.8 -11 -75.6 -11 z m -2.8 14.8 c -9.6 0 -17.2 -1.6 -17.2 -3.6 c 0 -2 7.6 -3.6 17.2 -3.6 c 9.6 0 17.2 1.6 17.2 3.6 c 0 2 -7.6 3.6 -17.2 3.6 z" begin="0s" repeatCount="indefinite" dur="10s" additive="sum" />
</path>
<animate attributeName="fill" values="#ff0" begin="xAnim.repeatEvent" repeatCount="indefinite" dur="0s" />
<animate attributeName="fill" values="#0ff" begin="yAnim.repeatEvent" repeatCount="indefinite" dur="0s" />
<animate attributeName="fill" values="#f0f" begin="xx.repeatEvent" repeatCount="indefinite" dur="0s" />
<animate attributeName="fill" values="#0f0" begin="yy.repeatEvent" repeatCount="indefinite" dur="0s" />
<!-- empty animations for triggering color changes -->
<animate id="xx" begin="-4.5s" repeatCount="indefinite" dur="9s" />
<animate id="yy" begin="-5s" repeatCount="indefinite" dur="10s" />
</g>
</svg>
</body>
</html>
index.html
style.css
index.js