react-dvd-player-animation

A fully composable React component that reproduces the iconic DVD animation.

Credit for the original code is due to andrewchmr

Installation

npm install react-dvd-player-animation

Usage

Simply import the DVDLogoAnimation component.

import React from "react";
import DVDLogoAnimation from "react-dvd-player-animation";

const MyDVDAnimationComponent = () => <DVDLogoAnimation />;

... or pass any child of an SVG element

import React from "react";
import DVDLogoAnimation from "react-dvd-player-animation";

const HEIGHT = 400;
const WIDTH = 400;

const MyDVDAnimationComponent = () => (
  <div
        style={{
          height: `${HEIGHT}px`,
          width: `${WIDTH}px`,
          border: "5px solid black",
          margin: "auto",
        }}
      >
        <DVDLogoAnimation
          height={HEIGHT}
          width={WIDTH}
          logoHeight={20}
          logoWidth={160}
        >
          <path
            d="M 158.24 1.94 L 157.54 3.52 Q 156.7 3.06 155.83 2.76 A 5.472 5.472 0 0 0 154.61 2.496 A 6.845 6.845 0 0 0 153.9 2.46 A 4.026 4.026 0 0 0 152.403 2.734 A 3.784 3.784 0 0 0 151.66 3.13 A 4.059 4.059 0 0 0 150.595 4.214 A 5.491 5.491 0 0 0 150.11 5.1 Q 149.616 6.227 149.55 7.791 A 11.662 11.662 0 0 0 149.54 8.28 A 9.102 9.102 0 0 0 149.626 9.564 Q 149.751 10.443 150.06 11.15 A 4.836 4.836 0 0 0 150.646 12.159 A 3.82 3.82 0 0 0 151.5 12.98 A 3.586 3.586 0 0 0 153.462 13.617 A 4.399 4.399 0 0 0 153.62 13.62 Q 154.74 13.62 155.61 13.15 A 8.072 8.072 0 0 0 156.21 12.793 Q 156.496 12.605 156.725 12.413 A 3.988 3.988 0 0 0 156.98 12.18 L 156.98 9.12 L 154.08 9.12 L 154.08 7.62 L 158.78 7.62 L 158.78 15.04 L 157.1 15.04 L 157.1 13.64 A 7.177 7.177 0 0 1 156.224 14.298 A 9.471 9.471 0 0 1 155.4 14.77 A 4.719 4.719 0 0 1 153.519 15.27 A 5.626 5.626 0 0 1 153.18 15.28 A 5.314 5.314 0 0 1 151.317 14.96 A 4.902 4.902 0 0 1 150.3 14.44 A 5.378 5.378 0 0 1 148.714 12.781 A 6.79 6.79 0 0 1 148.32 12.05 A 7.506 7.506 0 0 1 147.738 10.136 A 10.367 10.367 0 0 1 147.6 8.4 A 11.26 11.26 0 0 1 147.767 6.416 A 8.514 8.514 0 0 1 148.36 4.45 A 6.546 6.546 0 0 1 149.517 2.66 A 5.891 5.891 0 0 1 150.55 1.77 Q 151.98 0.8 154 0.8 A 9.052 9.052 0 0 1 155.194 0.875 A 6.722 6.722 0 0 1 156.32 1.12 Q 157.34 1.44 158.24 1.94 Z M 123.84 13.86 L 124.8 12.26 Q 125.52 12.86 126.42 13.24 Q 127.32 13.62 128.52 13.62 A 5.596 5.596 0 0 0 129.429 13.551 Q 130.245 13.416 130.8 13.02 A 2.056 2.056 0 0 0 131.359 12.439 Q 131.622 12.018 131.639 11.473 A 2.423 2.423 0 0 0 131.64 11.4 A 2.388 2.388 0 0 0 131.573 10.821 A 1.963 1.963 0 0 0 131.4 10.37 Q 131.161 9.922 130.477 9.494 A 5.256 5.256 0 0 0 130.47 9.49 Q 129.78 9.06 128.44 8.56 Q 127.421 8.164 126.692 7.762 A 7.899 7.899 0 0 1 126.14 7.43 A 4.386 4.386 0 0 1 125.522 6.94 Q 125.13 6.563 124.91 6.13 A 3.333 3.333 0 0 1 124.606 5.196 A 4.586 4.586 0 0 1 124.54 4.4 Q 124.54 3.4 125.09 2.59 Q 125.64 1.78 126.71 1.29 A 5.112 5.112 0 0 1 127.89 0.923 Q 128.417 0.823 129.018 0.804 A 9.045 9.045 0 0 1 129.3 0.8 Q 130.54 0.8 131.53 1.05 Q 132.52 1.3 133.46 1.76 L 132.76 3.38 Q 132.08 2.98 131.17 2.71 Q 130.26 2.44 129.26 2.44 Q 127.94 2.44 127.18 2.96 A 1.98 1.98 0 0 0 126.747 3.353 A 1.472 1.472 0 0 0 126.42 4.3 A 2.093 2.093 0 0 0 126.478 4.804 A 1.712 1.712 0 0 0 126.64 5.22 A 1.382 1.382 0 0 0 126.854 5.505 Q 127.094 5.757 127.51 6 Q 128.16 6.38 129.46 6.86 A 16.246 16.246 0 0 1 130.456 7.266 Q 130.942 7.485 131.343 7.711 A 7.101 7.101 0 0 1 131.93 8.08 Q 132.676 8.604 133.065 9.203 A 2.846 2.846 0 0 1 133.22 9.47 A 3.516 3.516 0 0 1 133.568 10.643 A 4.431 4.431 0 0 1 133.6 11.18 A 4.342 4.342 0 0 1 133.467 12.28 A 3.421 3.421 0 0 1 132.95 13.4 A 3.924 3.924 0 0 1 131.564 14.605 A 4.871 4.871 0 0 1 131.15 14.8 A 6.104 6.104 0 0 1 129.668 15.201 A 8.005 8.005 0 0 1 128.52 15.28 Q 127.06 15.28 125.86 14.89 A 7.641 7.641 0 0 1 124.787 14.454 A 5.687 5.687 0 0 1 123.84 13.86 Z M 56.74 15.04 L 54.94 15.04 L 54.94 0.24 L 56.74 0.24 L 56.74 6.3 Q 57.3 5.48 58.16 4.94 A 3.514 3.514 0 0 1 59.585 4.438 A 4.519 4.519 0 0 1 60.18 4.4 A 4.645 4.645 0 0 1 61.193 4.504 Q 61.862 4.653 62.349 5.018 A 2.652 2.652 0 0 1 62.81 5.46 A 3.681 3.681 0 0 1 63.531 6.936 Q 63.68 7.54 63.68 8.26 L 63.68 15.04 L 61.88 15.04 L 61.88 8.46 Q 61.88 7.542 61.531 6.919 A 2.197 2.197 0 0 0 61.36 6.66 A 1.684 1.684 0 0 0 60.128 5.991 A 2.396 2.396 0 0 0 59.9 5.98 A 2.646 2.646 0 0 0 58.557 6.353 A 3.517 3.517 0 0 0 58.15 6.63 Q 57.32 7.28 56.74 8.16 L 56.74 15.04 Z M 25.1 19.28 L 25.5 17.78 Q 25.74 17.92 26.1 18.02 A 2.703 2.703 0 0 0 26.556 18.104 A 3.472 3.472 0 0 0 26.9 18.12 Q 27.74 18.12 28.4 17.58 A 2.401 2.401 0 0 0 28.787 17.168 Q 29.136 16.706 29.468 15.935 A 11.716 11.716 0 0 0 29.66 15.46 L 30.12 14.26 L 29.16 14.26 L 25.1 5.12 L 26.7 4.4 L 30.58 13.06 L 33.6 4.48 L 35.26 5.12 L 31.44 15.56 A 14.346 14.346 0 0 1 31.029 16.577 Q 30.626 17.469 30.18 18.06 Q 29.55 18.893 28.801 19.264 A 2.948 2.948 0 0 1 28.68 19.32 Q 27.86 19.68 26.86 19.68 A 6.086 6.086 0 0 1 26.851 19.68 Q 26.319 19.679 25.906 19.584 A 2.917 2.917 0 0 1 25.81 19.56 Q 25.498 19.477 25.278 19.375 A 1.723 1.723 0 0 1 25.1 19.28 Z M 141.88 15.04 L 139.74 15.04 L 134.6 1.54 L 136.46 0.82 L 140.86 12.96 L 145.28 0.88 L 147 1.54 L 141.88 15.04 Z M 16.56 15.04 L 14.76 15.04 L 14.76 4.64 L 16.5 4.64 L 16.5 6.38 Q 17.06 5.54 17.93 4.97 A 3.463 3.463 0 0 1 19.351 4.445 A 4.526 4.526 0 0 1 20 4.4 A 4.645 4.645 0 0 1 21.013 4.504 Q 21.682 4.653 22.169 5.018 A 2.652 2.652 0 0 1 22.63 5.46 A 3.681 3.681 0 0 1 23.351 6.936 Q 23.5 7.54 23.5 8.26 L 23.5 15.04 L 21.7 15.04 L 21.7 8.46 A 3.853 3.853 0 0 0 21.632 7.712 Q 21.544 7.269 21.344 6.919 A 2.193 2.193 0 0 0 21.17 6.66 Q 20.64 5.98 19.7 5.98 A 2.624 2.624 0 0 0 18.33 6.373 A 3.471 3.471 0 0 0 17.96 6.63 Q 17.14 7.28 16.56 8.16 L 16.56 15.04 Z M 52.24 1.52 L 51.66 3.12 Q 51.04 2.82 50.39 2.64 A 4.603 4.603 0 0 0 49.777 2.517 Q 49.461 2.474 49.103 2.464 A 8.141 8.141 0 0 0 48.86 2.46 A 4.235 4.235 0 0 0 47.279 2.751 A 3.996 3.996 0 0 0 46.57 3.12 Q 45.56 3.78 44.98 5.02 Q 44.4 6.26 44.4 8.02 A 8.373 8.373 0 0 0 44.523 9.491 A 6.186 6.186 0 0 0 44.97 10.96 A 5.135 5.135 0 0 0 45.687 12.126 A 4.285 4.285 0 0 0 46.55 12.92 A 3.941 3.941 0 0 0 48.779 13.619 A 4.779 4.779 0 0 0 48.86 13.62 A 6.743 6.743 0 0 0 49.654 13.576 Q 50.149 13.517 50.56 13.38 Q 51.28 13.14 51.96 12.76 L 52.54 14.34 A 7.512 7.512 0 0 1 51.641 14.749 A 9.579 9.579 0 0 1 50.85 15.01 A 6.718 6.718 0 0 1 49.857 15.208 Q 49.29 15.28 48.64 15.28 A 6.477 6.477 0 0 1 46.775 15.02 A 5.592 5.592 0 0 1 45.42 14.41 A 5.72 5.72 0 0 1 43.445 12.321 A 6.983 6.983 0 0 1 43.24 11.93 Q 42.471 10.343 42.46 8.163 A 12.563 12.563 0 0 1 42.46 8.1 Q 42.46 5.96 43.25 4.31 A 6.327 6.327 0 0 1 44.646 2.384 A 5.972 5.972 0 0 1 45.49 1.73 A 5.874 5.874 0 0 1 48.026 0.848 A 7.458 7.458 0 0 1 48.88 0.8 A 9.128 9.128 0 0 1 49.892 0.854 A 7.04 7.04 0 0 1 50.7 0.99 A 7.645 7.645 0 0 1 52.195 1.499 A 7.125 7.125 0 0 1 52.24 1.52 Z M 12.96 14.54 L 11.22 15.24 L 9.66 11.24 L 3.18 11.24 L 1.62 15.2 L 0 14.54 L 5.48 1.04 L 7.56 1.04 L 12.96 14.54 Z M 113.88 15.04 L 112.08 15.04 L 112.08 6.58 L 110.48 6.58 L 110.48 5.02 L 112.08 5.02 L 112.08 3.8 Q 112.08 2.04 113.06 1.02 A 3.273 3.273 0 0 1 115.141 0.025 A 4.492 4.492 0 0 1 115.62 0 Q 116.384 0 116.974 0.165 A 3.576 3.576 0 0 1 117.06 0.19 Q 117.68 0.38 118.24 0.66 L 117.7 2.18 A 7.792 7.792 0 0 0 116.978 1.849 A 8.778 8.778 0 0 0 116.8 1.78 A 2.834 2.834 0 0 0 116.076 1.616 A 3.471 3.471 0 0 0 115.74 1.6 A 2.16 2.16 0 0 0 115.134 1.681 A 1.658 1.658 0 0 0 114.39 2.13 A 1.692 1.692 0 0 0 114.001 2.804 Q 113.918 3.065 113.892 3.381 A 3.658 3.658 0 0 0 113.88 3.68 L 113.88 5.02 L 116.96 5.02 L 116.96 6.58 L 113.88 6.58 L 113.88 15.04 Z M 85.28 5.68 L 85.28 0.24 L 87.08 0.24 L 87.08 12.52 A 2.43 2.43 0 0 0 87.1 12.847 Q 87.167 13.334 87.45 13.51 Q 87.82 13.74 88.26 13.74 L 87.88 15.14 Q 85.98 15.14 85.56 13.62 A 3.897 3.897 0 0 1 84.994 14.25 Q 84.701 14.516 84.33 14.76 A 3.028 3.028 0 0 1 83.327 15.177 Q 82.874 15.28 82.34 15.28 Q 81.06 15.28 80 14.62 A 4.538 4.538 0 0 1 78.492 13.062 A 5.524 5.524 0 0 1 78.32 12.75 Q 77.7 11.54 77.7 9.9 A 6.788 6.788 0 0 1 77.878 8.317 A 5.593 5.593 0 0 1 78.33 7.08 A 5.458 5.458 0 0 1 79.254 5.762 A 4.837 4.837 0 0 1 80.01 5.12 Q 81.06 4.4 82.32 4.4 A 4.328 4.328 0 0 1 83.174 4.48 A 3.188 3.188 0 0 1 84.11 4.82 A 6.869 6.869 0 0 1 84.626 5.138 Q 85.018 5.405 85.28 5.68 Z M 102.66 15.28 Q 101.1 15.28 99.88 14.71 Q 98.66 14.14 97.81 13.15 A 6.871 6.871 0 0 1 96.598 11.085 A 7.875 7.875 0 0 1 96.51 10.84 A 8.554 8.554 0 0 1 96.067 8.392 A 9.783 9.783 0 0 1 96.06 8.02 A 9.236 9.236 0 0 1 96.283 5.953 A 7.598 7.598 0 0 1 96.85 4.33 Q 97.64 2.7 99.12 1.75 A 5.932 5.932 0 0 1 101.414 0.895 A 7.87 7.87 0 0 1 102.66 0.8 A 7.284 7.284 0 0 1 104.252 0.968 A 5.985 5.985 0 0 1 105.43 1.36 Q 106.66 1.92 107.52 2.92 Q 108.38 3.92 108.83 5.22 A 8.288 8.288 0 0 1 109.264 7.465 A 9.643 9.643 0 0 1 109.28 8.02 Q 109.28 9.52 108.83 10.84 A 6.947 6.947 0 0 1 107.785 12.824 A 6.528 6.528 0 0 1 107.52 13.15 Q 106.66 14.14 105.44 14.71 A 6.015 6.015 0 0 1 103.692 15.213 A 7.67 7.67 0 0 1 102.66 15.28 Z M 71.68 11.78 L 71.68 0.24 L 73.48 0.24 L 73.48 11.6 Q 73.48 12.68 73.93 13.2 A 1.473 1.473 0 0 0 74.847 13.695 A 2.145 2.145 0 0 0 75.18 13.72 Q 75.56 13.72 75.93 13.63 A 4.438 4.438 0 0 0 76.223 13.549 Q 76.41 13.489 76.56 13.42 L 77 14.88 Q 76.72 15.004 76.338 15.105 A 6.996 6.996 0 0 1 76.11 15.16 A 4.763 4.763 0 0 1 75.479 15.257 A 6.103 6.103 0 0 1 74.94 15.28 Q 74.02 15.28 73.28 14.93 A 2.537 2.537 0 0 1 72.215 13.977 A 3.171 3.171 0 0 1 72.11 13.8 A 3.151 3.151 0 0 1 71.816 13.029 Q 71.727 12.667 71.696 12.242 A 6.421 6.421 0 0 1 71.68 11.78 Z M 102.66 13.64 A 5.303 5.303 0 0 0 103.85 13.513 A 3.863 3.863 0 0 0 105.24 12.9 A 4.494 4.494 0 0 0 106.705 11.126 A 5.451 5.451 0 0 0 106.81 10.89 A 6.822 6.822 0 0 0 107.274 9.104 A 8.701 8.701 0 0 0 107.34 8.02 Q 107.34 6.94 107.02 5.94 A 5.947 5.947 0 0 0 106.192 4.275 A 5.624 5.624 0 0 0 106.1 4.15 Q 105.5 3.36 104.63 2.9 A 3.984 3.984 0 0 0 103.147 2.464 A 4.916 4.916 0 0 0 102.66 2.44 A 4.817 4.817 0 0 0 101.362 2.608 A 3.909 3.909 0 0 0 100.15 3.18 Q 99.1 3.92 98.55 5.18 A 6.559 6.559 0 0 0 98.059 7.018 A 8.251 8.251 0 0 0 98 8.02 Q 98 9.1 98.31 10.11 A 5.876 5.876 0 0 0 99.146 11.819 A 5.585 5.585 0 0 0 99.22 11.92 A 4.374 4.374 0 0 0 100.69 13.18 A 3.984 3.984 0 0 0 102.173 13.616 A 4.916 4.916 0 0 0 102.66 13.64 Z M 68.58 15.04 L 66.78 15.04 L 66.78 4.64 L 68.58 4.64 L 68.58 15.04 Z M 85.28 12.42 L 85.28 7.26 A 3.169 3.169 0 0 0 84.858 6.825 Q 84.581 6.588 84.22 6.37 Q 83.54 5.96 82.72 5.96 A 2.989 2.989 0 0 0 81.729 6.12 A 2.677 2.677 0 0 0 81.04 6.48 Q 80.32 7 79.93 7.87 A 4.438 4.438 0 0 0 79.582 9.143 A 5.623 5.623 0 0 0 79.54 9.84 A 4.951 4.951 0 0 0 79.659 10.944 A 4.065 4.065 0 0 0 79.96 11.81 A 3.641 3.641 0 0 0 80.568 12.713 A 3.224 3.224 0 0 0 81.11 13.18 Q 81.84 13.68 82.74 13.68 Q 83.48 13.68 84.15 13.33 Q 84.82 12.98 85.28 12.42 Z M 6.42 2.92 L 3.78 9.64 L 9.04 9.64 L 6.42 2.92 Z M 66.807 2.498 A 1.195 1.195 0 0 0 67.68 2.86 A 1.635 1.635 0 0 0 67.979 2.834 A 1.129 1.129 0 0 0 68.6 2.51 A 1.155 1.155 0 0 0 68.885 2.017 A 1.502 1.502 0 0 0 68.94 1.6 Q 68.94 1.08 68.57 0.71 A 1.481 1.481 0 0 0 68.558 0.699 A 1.212 1.212 0 0 0 67.68 0.34 A 1.653 1.653 0 0 0 67.349 0.372 A 1.132 1.132 0 0 0 66.76 0.68 A 1.118 1.118 0 0 0 66.466 1.206 A 1.597 1.597 0 0 0 66.42 1.6 A 1.198 1.198 0 0 0 66.518 2.084 A 1.329 1.329 0 0 0 66.79 2.48 A 1.493 1.493 0 0 0 66.807 2.498 Z"
            vector-effect="non-scaling-stroke"
          />
        </DVDLogoAnimation>
);

Available props

All default styles can be overriden. A full list of props:

export interface DVDLogoAnimationProps {
  height: number;
  width: number;
  logoHeight: number;
  logoWidth: number;
  xSpeed: number;
  ySpeed: number;
}