Socket
Socket
Sign inDemoInstall

react-dvd-player-animation

Package Overview
Dependencies
3
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dvd-player-animation

![GitHub](https://img.shields.io/github/license/liorp/react-dvd-player-animation) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-dvd-player-animation) [![Edit react-dvd-player-animation-demo](https://codesandbox.io/static/img/play-cod


Version published
Maintainers
1
Weekly downloads
5
increased by66.67%

Weekly downloads

Readme

Source

GitHub npm bundle size Edit react-dvd-player-animation-demo

react-dvd-player-animation

dvd_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;
}

FAQs

Last updated on 07 May 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc