├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── boringavatars.png
    ├── favicon.ico
    └── index.html
├── rollup.config.js
├── src
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Avatar.vue
    │   ├── AvatarBauhaus.vue
    │   ├── AvatarBeam.vue
    │   ├── AvatarMarble.vue
    │   ├── AvatarPixels.vue
    │   ├── AvatarRing.vue
    │   └── AvatarSunset.vue
    ├── demo
    │   ├── button.vue
    │   ├── colorDot.vue
    │   ├── global.css
    │   └── playground.vue
    ├── index.js
    ├── main.js
    └── utils.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue2-boring-avatars
 2 | 
 3 | Vue port of [Boring Avatars](https://github.com/boringdesigners/boring-avatars)
 4 | 
 5 | ## Install
 6 | 
 7 | ```
 8 | yarn add vue2-boring-avatars
 9 | ```
10 | ```
11 | npm i vue2-boring-avatars
12 | ```
13 | 
14 | ## Usage
15 | ```
16 | import Avatar from 'vue2-boring-avatars'
17 | ```
18 | ```
19 | <avatar :variant="variant" :colors="colors" :name="name" />
20 | ```                
21 | 
22 | ## Demo
23 | ```
24 | yarn serve
25 | ```
26 | 
27 | ## Props
28 | 
29 | | Prop    | Type                                                         |
30 | | ------- | ------------------------------------------------------------ |
31 | | size    | number or string                                             |
32 | | name    | string                                                       |
33 | | variant | oneOf: `marble`, `beam`, `pixels`,`sunset`, `ring`, `bauhaus` |
34 | | colors  | array of colors                                              |
35 | | square  | bool                                              |
36 | 
37 | Credit to original [Boring Avatars](https://github.com/boringdesigners/boring-avatars) library.
38 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue2-boring-avatars",
 3 |     "description": "Vue2 port of boring avatars",
 4 |     "version": "0.3.6",
 5 |     "homepage": "https://github.com/stonega/vue2-boring-avatars",
 6 |     "license": "GPL v3",
 7 |     "scripts": {
 8 |         "serve": "vue-cli-service serve",
 9 |         "build": "vue-cli-service build",
10 |         "build:lib": "rollup --config",
11 |         "lint": "vue-cli-service lint"
12 |     },
13 |     "files": [
14 |         "dist",
15 |         "src"
16 |     ],
17 |     "main": "./dist/vue-2-boring-avatars.umd.js",
18 |     "module": "./dist/vue-2-boring-avatars.es.js",
19 |     "exports": {
20 |         ".": {
21 |             "import": "./dist/vue-2-boring-avatars.es.js",
22 |             "require": "./dist/vue-2-boring-avatars.umd.js"
23 |         }
24 |     },
25 |     "dependencies": {
26 |         "core-js": "^3.6.5",
27 |         "vue": "^2.6.11",
28 |         "vue-color": "^2.8.1"
29 |     },
30 |     "devDependencies": {
31 |         "@rollup/plugin-alias": "^3.1.9",
32 |         "@rollup/plugin-commonjs": "^22.0.1",
33 |         "@rollup/plugin-node-resolve": "^13.3.0",
34 |         "@vue/cli-plugin-babel": "~4.5.0",
35 |         "@vue/cli-plugin-eslint": "~4.5.0",
36 |         "@vue/cli-service": "~4.5.0",
37 |         "babel-eslint": "^10.1.0",
38 |         "esbuild": "^0.14.47",
39 |         "eslint": "^6.7.2",
40 |         "eslint-plugin-vue": "^6.2.2",
41 |         "rollup": "^2.75.7",
42 |         "rollup-plugin-delete": "^2.0.0",
43 |         "rollup-plugin-esbuild": "^4.9.1",
44 |         "rollup-plugin-vue": "^5.0.0",
45 |         "vue-template-compiler": "^2.6.11"
46 |     },
47 |     "eslintConfig": {
48 |         "root": true,
49 |         "env": {
50 |             "node": true
51 |         },
52 |         "extends": [
53 |             "plugin:vue/essential",
54 |             "eslint:recommended"
55 |         ],
56 |         "parserOptions": {
57 |             "parser": "babel-eslint"
58 |         },
59 |         "rules": {}
60 |     },
61 |     "browserslist": [
62 |         "> 1%",
63 |         "last 2 versions",
64 |         "not dead"
65 |     ],
66 |     "repository": {
67 |         "type": "git",
68 |         "url": "git+https://github.com/stonega/vue2-boring-avatars.git"
69 |     },
70 |     "author": "",
71 |     "bugs": {
72 |         "url": "https://github.com/stonega/vue2-boring-avatars/issues"
73 |     }
74 | }
75 | 


--------------------------------------------------------------------------------
/public/boringavatars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stonega/vue2-boring-avatars/26f2ed63e61504ae761d941da7db7a444442fa97/public/boringavatars.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stonega/vue2-boring-avatars/26f2ed63e61504ae761d941da7db7a444442fa97/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import vue from 'rollup-plugin-vue';
 2 | import alias from '@rollup/plugin-alias';
 3 | import del from 'rollup-plugin-delete';
 4 | import commonjs from '@rollup/plugin-commonjs';
 5 | import esbuild from 'rollup-plugin-esbuild';
 6 | import resolve from '@rollup/plugin-node-resolve';
 7 | import path from 'path';
 8 | 
 9 | const plugins = [
10 |   del({ targets: 'dist/*' }),
11 |   alias({
12 |     entries: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
13 |   }),
14 |   resolve(),
15 |   commonjs(),
16 |   vue(),
17 |   esbuild({
18 |     target: 'es2017',
19 |     minify: true,
20 |   }),
21 | ];
22 | 
23 | export default [
24 |   {
25 |     input: 'src/index.js',
26 |     output: [
27 |       {
28 |         name: 'vue-2-boring-avatars',
29 |         file: 'dist/vue-2-boring-avatars.es.js',
30 |         format: 'esm',
31 |         globals: { vue: 'Vue' },
32 |         sourcemap: true,
33 |       },
34 |       {
35 |         name: 'vue-2-boring-avatars',
36 |         file: 'dist/vue-2-boring-avatars.common.js',
37 |         format: 'cjs',
38 |         exports: 'auto',
39 |         globals: { vue: 'Vue' },
40 |         sourcemap: true,
41 |       },
42 |       {
43 |         name: 'vue-2-boring-avatars',
44 |         file: 'dist/vue-2-boring-avatars.umd.js',
45 |         format: 'umd',
46 |         globals: { vue: 'Vue' },
47 |         sourcemap: true,
48 |       },
49 |     ],
50 |     plugins,
51 |     external: ['vue'],
52 |   },
53 | ];
54 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stonega/vue2-boring-avatars/26f2ed63e61504ae761d941da7db7a444442fa97/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Avatar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <component :is="componentName" :name="name" :colors="colors" :size="size" :square="square"/>
 3 | </template>
 4 | 
 5 | <script>
 6 | import AvatarPixels from './AvatarPixels.vue'
 7 | import AvatarBauhaus from './AvatarBauhaus.vue'
 8 | import AvatarMarble from './AvatarMarble.vue'
 9 | import AvatarRing from './AvatarRing.vue'
10 | import AvatarSunset from './AvatarSunset.vue'
11 | import AvatarBeam from './AvatarBeam.vue'
12 | 
13 | const VARIANTS = ['pixels', 'bauhaus', 'ring', 'beam', 'sunset', 'marble']
14 | 
15 | export default {
16 |   components: {
17 |     AvatarPixels,
18 |     AvatarBauhaus,
19 |     AvatarMarble,
20 |     AvatarSunset,
21 |     AvatarRing,
22 |     AvatarBeam
23 |   },
24 |   props: {
25 |     variant: {
26 |       type: String,
27 |       default: 'pixels',
28 |       validator(value) {
29 |         return VARIANTS.includes(value)
30 |       }
31 |     },
32 |     name: { type: String, default: 'Mary Baker' },
33 |     colors: {
34 |       type: Array,
35 |       default: () => ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']
36 |     },
37 |     size: { type: Number, default: 80 },
38 |     square: { type: Boolean, default: false }
39 |   },
40 |   computed: {
41 |     componentName() {
42 |       if (!VARIANTS.includes(this.variant)) {
43 |         return 'avatar-pixels'
44 |       }
45 |       return 'avatar-' + this.variant
46 |     }
47 |   }
48 | }
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/components/AvatarBauhaus.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg
  3 |     :viewBox="`0 0 ${viewboxSize} ${viewboxSize}`"
  4 |     fill="none"
  5 |     xmlns="http://www.w3.org/2000/svg"
  6 |     :width="size"
  7 |     :height="size"
  8 |   >
  9 |     <mask
 10 |       id="mask__bauhaus"
 11 |       maskUnits="userSpaceOnUse"
 12 |       x="0"
 13 |       y="0"
 14 |       :width="viewboxSize"
 15 |       :height="viewboxSize"
 16 |     >
 17 |       <rect
 18 |         :width="viewboxSize"
 19 |         :height="viewboxSize"
 20 |         :rx="square ? undefinded : viewboxSize / 2"
 21 |         fill="#fff"
 22 |       />
 23 |     </mask>
 24 |     <g mask="url(#mask__bauhaus)">
 25 |       <rect
 26 |         :width="viewboxSize"
 27 |         :height="viewboxSize"
 28 |         :fill="properties[0].color"
 29 |       />
 30 |       <rect
 31 |         :x="(viewboxSize - 60) / 2"
 32 |         :y="(viewboxSize - 20) / 2"
 33 |         :width="viewboxSize"
 34 |         :height="properties[1].isSquare ? viewboxSize : viewboxSize / 8"
 35 |         :fill="properties[1].color"
 36 |         :transform="`translate(${properties[1].translateX} ${
 37 |           properties[1].translateY
 38 |         }) rotate(${properties[1].rotate} ${viewboxSize / 2} ${
 39 |           viewboxSize / 2
 40 |         })`"
 41 |       />
 42 |       <circle
 43 |         :cx="viewboxSize / 2"
 44 |         :cy="viewboxSize / 2"
 45 |         :fill="properties[2].color"
 46 |         :r="viewboxSize / 5"
 47 |         :transform="`translate(${properties[2].translateX} ${properties[2].translateY})`"
 48 |       />
 49 |       <line
 50 |         x1="0"
 51 |         :y1="viewboxSize / 2"
 52 |         :x2="viewboxSize"
 53 |         :y2="viewboxSize / 2"
 54 |         strokeWidth="2"
 55 |         :stroke="properties[3].color"
 56 |         :transform="`translate(${properties[3].translateX} ${
 57 |           properties[3].translateY
 58 |         }) rotate(${properties[3].rotate} ${viewboxSize / 2} ${
 59 |           viewboxSize / 2
 60 |         })`"
 61 |       />
 62 |     </g>
 63 |   </svg>
 64 | </template>
 65 | <script>
 66 | import { getNumber, getUnit, getRandomColor, getBoolean } from "@/utils";
 67 | const ELEMENTS = 4;
 68 | const SIZE = 80;
 69 | 
 70 | export default {
 71 |   props: {
 72 |     name: { type: String, required: true },
 73 |     colors: { type: Array, required: true },
 74 |     size: { type: Number, required: true },
 75 |     square: { type: Boolean, default: false }
 76 |   },
 77 |   data() {
 78 |     return {
 79 |       viewboxSize: SIZE,
 80 |     };
 81 |   },
 82 |   computed: {
 83 |     properties() {
 84 |       const numFromName = getNumber(this.name);
 85 |       const range = this.colors && this.colors.length;
 86 | 
 87 |       const elementProperties = Array.from({ length: ELEMENTS }, (_, i) => {
 88 |         return {
 89 |           color: getRandomColor(numFromName + i, this.colors, range),
 90 |           translateX: getUnit(numFromName * (i + 1), SIZE / 2 - (i + 17), 1),
 91 |           translateY: getUnit(numFromName * (i + 1), SIZE / 2 - (i + 17), 2),
 92 |           rotate: getUnit(numFromName * (i + 1), 360),
 93 |           isSqure: getBoolean(numFromName, 2),
 94 |         };
 95 |       });
 96 |       return elementProperties;
 97 |     },
 98 |   },
 99 | };
100 | </script>


--------------------------------------------------------------------------------
/src/components/AvatarBeam.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg
  3 |     :viewBox="`0 0 ${viewboxSize} ${viewboxSize}`"
  4 |     fill="none"
  5 |     xmlns="http://www.w3.org/2000/svg"
  6 |     :width="size"
  7 |     :height="size"
  8 |   >
  9 |     <mask
 10 |       id="mask__beam"
 11 |       maskUnits="userSpaceOnUse"
 12 |       x="0"
 13 |       y="0"
 14 |       :width="viewboxSize"
 15 |       :height="viewboxSize"
 16 |     >
 17 |       <rect
 18 |         :width="viewboxSize"
 19 |         :height="viewboxSize"
 20 |         :rx="square ? undefinded : viewboxSize / 2"
 21 |         fill="#fff"
 22 |       />
 23 |     </mask>
 24 |     <g mask="url(#mask__beam)" fill="transparent">
 25 |       <rect
 26 |         :width="viewboxSize"
 27 |         :height="viewboxSize"
 28 |         :fill="data.backgroundColor"
 29 |       />
 30 |       <rect
 31 |         x="0"
 32 |         y="0"
 33 |         :width="viewboxSize"
 34 |         :height="viewboxSize"
 35 |         :transform="`translate(${data.wrapperTranslateX} ${
 36 |           data.wrapperTranslateY
 37 |         }) rotate(${data.wrapperRotate} ${viewboxSize / 2} ${
 38 |           viewboxSize / 2
 39 |         }) scale(${data.wrapperScale})`"
 40 |         :fill="data.wrapperColor"
 41 |         :rx="data.isCircle ? viewboxSize : viewboxSize / 6"
 42 |       />
 43 |       <g
 44 |         :transform="`translate(${data.faceTranslateX} ${
 45 |           data.faceTranslateY
 46 |         }) rotate(${data.faceRotate} ${viewboxSize / 2} ${viewboxSize / 2})`"
 47 |       >
 48 |         <path
 49 |           v-if="data.isMonthOpen"
 50 |           :d="`M15 ${19 + data.mouthSpread} c2 1
 51 |         4 1 6 0`"
 52 |           :stroke="data.faceColor"
 53 |           fill="none"
 54 |           strokeLinecap="round"
 55 |         />
 56 |         <path
 57 |           v-else
 58 |           :d="`M13, ${19 + data.mouthSpread} a1,0.75 0 0,0 10,0`"
 59 |           :fill="data.faceColor"
 60 |         />
 61 |         <rect
 62 |           :x="14 + data.eyeSpread"
 63 |           y="14"
 64 |           width="1.5"
 65 |           height="2"
 66 |           rx="1"
 67 |           stroke="none"
 68 |           :fill="data.faceColor"
 69 |         />
 70 |         <rect
 71 |           :x="20 + data.eyeSpread"
 72 |           y="14"
 73 |           width="1.5"
 74 |           height="2"
 75 |           rx="1"
 76 |           stroke="none"
 77 |           :fill="data.faceColor"
 78 |         />
 79 |       </g>
 80 |     </g>
 81 |   </svg>
 82 | </template>
 83 | 
 84 | <script>
 85 | import {
 86 |   getNumber,
 87 |   getUnit,
 88 |   getRandomColor,
 89 |   getBoolean,
 90 |   getContrast,
 91 | } from "@/utils";
 92 | const SIZE = 36;
 93 | export default {
 94 |   props: {
 95 |     name: { type: String, required: true },
 96 |     colors: { type: Array, required: true },
 97 |     size: { type: Number, required: true },
 98 |     square: { type: Boolean, default: false }
 99 |   },
100 |   data() {
101 |     return {
102 |       viewboxSize: SIZE,
103 |     };
104 |   },
105 |   computed: {
106 |     data() {
107 |       const numFromName = getNumber(this.name);
108 |       const range = this.colors && this.colors.length;
109 |       const wrapperColor = getRandomColor(numFromName, this.colors, range);
110 |       const preTranslateX = getUnit(numFromName, 10, 1);
111 |       const wrapperTranslateX =
112 |         preTranslateX < 5 ? preTranslateX + SIZE / 9 : preTranslateX;
113 |       const preTranslateY = getUnit(numFromName, 10, 2);
114 |       const wrapperTranslateY =
115 |         preTranslateY < 5 ? preTranslateY + SIZE / 9 : preTranslateY;
116 | 
117 |       const data = {
118 |         wrapperColor: wrapperColor,
119 |         faceColor: getContrast(wrapperColor),
120 |         backgroundColor: getRandomColor(numFromName + 13, this.colors, range),
121 |         wrapperTranslateX: wrapperTranslateX,
122 |         wrapperTranslateY: wrapperTranslateY,
123 |         wrapperRotate: getUnit(numFromName, 360),
124 |         wrapperScale: 1 + getUnit(numFromName, SIZE / 12) / 10,
125 |         isMouthOpen: getBoolean(numFromName, 2),
126 |         isCircle: getBoolean(numFromName, 1),
127 |         eyeSpread: getUnit(numFromName, 5),
128 |         mouthSpread: getUnit(numFromName, 3),
129 |         faceRotate: getUnit(numFromName, 10, 3),
130 |         faceTranslateX:
131 |           wrapperTranslateX > SIZE / 6
132 |             ? wrapperTranslateX / 2
133 |             : getUnit(numFromName, 8, 1),
134 |         faceTranslateY:
135 |           wrapperTranslateY > SIZE / 6
136 |             ? wrapperTranslateY / 2
137 |             : getUnit(numFromName, 7, 2),
138 |       };
139 | 
140 |       return data;
141 |     },
142 |   },
143 | };
144 | </script>


--------------------------------------------------------------------------------
/src/components/AvatarMarble.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg
  3 |     :viewBox="`0 0 ${viewboxSize} ${viewboxSize}`"
  4 |     fill="none"
  5 |     xmlns="http://www.w3.org/2000/svg"
  6 |     :width="size"
  7 |     :height="size"
  8 |   >
  9 |     <mask
 10 |       id="mask__marble"
 11 |       maskUnits="userSpaceOnUse"
 12 |       x="0"
 13 |       y="0"
 14 |       :width="viewboxSize"
 15 |       :height="viewboxSize"
 16 |     >
 17 |       <rect
 18 |         :width="viewboxSize"
 19 |         :height="viewboxSize"
 20 |         :rx="square ? undefinded : viewboxSize / 2"
 21 |         fill="#fff"
 22 |       />
 23 |     </mask>
 24 |     <g mask="url(#mask__marble)">
 25 |       <rect
 26 |         :width="viewboxSize"
 27 |         :height="viewboxSize"
 28 |         :rx="2"
 29 |         :fill="properties[0].color"
 30 |       />
 31 |       <path
 32 |         filter="url(#prefix__filter0_f)"
 33 |         d="M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z"
 34 |         :fill="properties[1].color"
 35 |         :transform="`translate(${properties[1].translateX} ${
 36 |           properties[1].translateY
 37 |         }) rotate(${properties[1].rotate} ${viewboxSize / 2} ${
 38 |           viewboxSize / 2
 39 |         }) scale(${properties[2].scale})`"
 40 |       />
 41 |       <path
 42 |         filter="url(#prefix__filter0_f)"
 43 |         :style="{ mixBlendMode: 'overlay' }"
 44 |         d="M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005
 45 |       12.972 20.186-23.35 27.395L22.215 24z"
 46 |         :fill="properties[2].color"
 47 |         :transform="`translate(${properties[2].translateX} 
 48 |       ${properties[2].translateY}) rotate(${properties[2].rotate} ${
 49 |           viewboxSize / 2
 50 |         } ${viewboxSize / 2}) scale(${properties[2].scale})`"
 51 |       />
 52 |     </g>
 53 |     <defs>
 54 |       <filter
 55 |         id="prefix__filter0_f"
 56 |         filterUnits="userSpaceOnUse"
 57 |         color-interpolation-filters="sRGB"
 58 |       >
 59 |         <feFlood :flood-opacity="0" result="BackgroundImageFix" />
 60 |         <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
 61 |         <feGaussianBlur :stdDeviation="7" result="effect1_foregroundBlur" />
 62 |       </filter>
 63 |     </defs>
 64 |   </svg>
 65 | </template>
 66 | 
 67 | <script>
 68 | import { getNumber, getRandomColor, getUnit } from "@/utils";
 69 | const ELEMENTS = 3;
 70 | const SIZE = 80;
 71 | export default {
 72 |   props: {
 73 |     name: { type: String, required: true },
 74 |     colors: { type: Array, required: true },
 75 |     size: { type: Number, required: true },
 76 |     square: { type: Boolean, default: false }
 77 |   },
 78 |   data() {
 79 |     return {
 80 |       viewboxSize: SIZE,
 81 |     };
 82 |   },
 83 |   computed: {
 84 |     properties() {
 85 |       const numFromName = getNumber(this.name);
 86 |       const range = this.colors && this.colors.length;
 87 | 
 88 |       const elementsProperties = Array.from({ length: ELEMENTS }, (_, i) => ({
 89 |         color: getRandomColor(numFromName + i, this.colors, range),
 90 |         translateX: getUnit(numFromName * (i + 1), SIZE / 10, 1),
 91 |         translateY: getUnit(numFromName * (i + 1), SIZE / 10, 2),
 92 |         scale: 1.2 + getUnit(numFromName * (i + 1), SIZE / 20) / 10,
 93 |         rotate: getUnit(numFromName * (i + 1), 360, 1),
 94 |       }));
 95 | 
 96 |       return elementsProperties;
 97 |     },
 98 |   },
 99 | };
100 | </script>
101 | 


--------------------------------------------------------------------------------
/src/components/AvatarPixels.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg
  3 |     :viewBox="`0 0 ${viewboxSize} ${viewboxSize}`"
  4 |     fill="none"
  5 |     xmlns="http://www.w3.org/2000/svg"
  6 |     :width="size"
  7 |     :height="size"
  8 |   >
  9 |     <mask
 10 |       id="mask0"
 11 |       mask-type="alpha"
 12 |       maskUnits="userSpaceOnUse"
 13 |       x="0"
 14 |       y="0"
 15 |       :width="viewboxSize"
 16 |       :height="viewboxSize"
 17 |     >
 18 |       <rect
 19 |         :width="viewboxSize"
 20 |         :height="viewboxSize"
 21 |         :rx="square ? undefinded : viewboxSize / 2"
 22 |         fill="#fff"
 23 |       />
 24 |     </mask>
 25 |     <g mask="url(#mask0)">
 26 |       <rect width="10" height="10" :fill="properties[0].color" />
 27 |       <rect x="20" width="10" height="10" :fill="properties[1].color" />
 28 |       <rect x="40" width="10" height="10" :fill="properties[2].color" />
 29 |       <rect x="60" width="10" height="10" :fill="properties[3].color" />
 30 |       <rect x="10" width="10" height="10" :fill="properties[4].color" />
 31 |       <rect x="30" width="10" height="10" :fill="properties[5].color" />
 32 |       <rect x="50" width="10" height="10" :fill="properties[6].color" />
 33 |       <rect x="70" width="10" height="10" :fill="properties[7].color" />
 34 |       <rect y="10" width="10" height="10" :fill="properties[8].color" />
 35 |       <rect y="20" width="10" height="10" :fill="properties[9].color" />
 36 |       <rect y="30" width="10" height="10" :fill="properties[10].color" />
 37 |       <rect y="40" width="10" height="10" :fill="properties[11].color" />
 38 |       <rect y="50" width="10" height="10" :fill="properties[12].color" />
 39 |       <rect y="60" width="10" height="10" :fill="properties[13].color" />
 40 |       <rect y="70" width="10" height="10" :fill="properties[14].color" />
 41 |       <rect
 42 |         x="20"
 43 |         y="10"
 44 |         width="10"
 45 |         height="10"
 46 |         :fill="properties[15].color"
 47 |       />
 48 |       <rect
 49 |         x="20"
 50 |         y="20"
 51 |         width="10"
 52 |         height="10"
 53 |         :fill="properties[16].color"
 54 |       />
 55 |       <rect
 56 |         x="20"
 57 |         y="30"
 58 |         width="10"
 59 |         height="10"
 60 |         :fill="properties[17].color"
 61 |       />
 62 |       <rect
 63 |         x="20"
 64 |         y="40"
 65 |         width="10"
 66 |         height="10"
 67 |         :fill="properties[18].color"
 68 |       />
 69 |       <rect
 70 |         x="20"
 71 |         y="50"
 72 |         width="10"
 73 |         height="10"
 74 |         :fill="properties[19].color"
 75 |       />
 76 |       <rect
 77 |         x="20"
 78 |         y="60"
 79 |         width="10"
 80 |         height="10"
 81 |         :fill="properties[20].color"
 82 |       />
 83 |       <rect
 84 |         x="20"
 85 |         y="70"
 86 |         width="10"
 87 |         height="10"
 88 |         :fill="properties[21].color"
 89 |       />
 90 |       <rect
 91 |         x="40"
 92 |         y="10"
 93 |         width="10"
 94 |         height="10"
 95 |         :fill="properties[22].color"
 96 |       />
 97 |       <rect
 98 |         x="40"
 99 |         y="20"
100 |         width="10"
101 |         height="10"
102 |         :fill="properties[23].color"
103 |       />
104 |       <rect
105 |         x="40"
106 |         y="30"
107 |         width="10"
108 |         height="10"
109 |         :fill="properties[24].color"
110 |       />
111 |       <rect
112 |         x="40"
113 |         y="40"
114 |         width="10"
115 |         height="10"
116 |         :fill="properties[25].color"
117 |       />
118 |       <rect
119 |         x="40"
120 |         y="50"
121 |         width="10"
122 |         height="10"
123 |         :fill="properties[26].color"
124 |       />
125 |       <rect
126 |         x="40"
127 |         y="60"
128 |         width="10"
129 |         height="10"
130 |         :fill="properties[27].color"
131 |       />
132 |       <rect
133 |         x="40"
134 |         y="70"
135 |         width="10"
136 |         height="10"
137 |         :fill="properties[28].color"
138 |       />
139 |       <rect
140 |         x="60"
141 |         y="10"
142 |         width="10"
143 |         height="10"
144 |         :fill="properties[29].color"
145 |       />
146 |       <rect
147 |         x="60"
148 |         y="20"
149 |         width="10"
150 |         height="10"
151 |         :fill="properties[30].color"
152 |       />
153 |       <rect
154 |         x="60"
155 |         y="30"
156 |         width="10"
157 |         height="10"
158 |         :fill="properties[31].color"
159 |       />
160 |       <rect
161 |         x="60"
162 |         y="40"
163 |         width="10"
164 |         height="10"
165 |         :fill="properties[32].color"
166 |       />
167 |       <rect
168 |         x="60"
169 |         y="50"
170 |         width="10"
171 |         height="10"
172 |         :fill="properties[33].color"
173 |       />
174 |       <rect
175 |         x="60"
176 |         y="60"
177 |         width="10"
178 |         height="10"
179 |         :fill="properties[34].color"
180 |       />
181 |       <rect
182 |         x="60"
183 |         y="70"
184 |         width="10"
185 |         height="10"
186 |         :fill="properties[35].color"
187 |       />
188 |       <rect
189 |         x="10"
190 |         y="10"
191 |         width="10"
192 |         height="10"
193 |         :fill="properties[36].color"
194 |       />
195 |       <rect
196 |         x="10"
197 |         y="20"
198 |         width="10"
199 |         height="10"
200 |         :fill="properties[37].color"
201 |       />
202 |       <rect
203 |         x="10"
204 |         y="30"
205 |         width="10"
206 |         height="10"
207 |         :fill="properties[38].color"
208 |       />
209 |       <rect
210 |         x="10"
211 |         y="{40}"
212 |         width="10"
213 |         height="10"
214 |         :fill="properties[39].color"
215 |       />
216 |       <rect
217 |         x="10"
218 |         y="50"
219 |         width="10"
220 |         height="10"
221 |         :fill="properties[40].color"
222 |       />
223 |       <rect
224 |         x="10"
225 |         y="60"
226 |         width="10"
227 |         height="10"
228 |         :fill="properties[41].color"
229 |       />
230 |       <rect
231 |         x="10"
232 |         y="70"
233 |         width="10"
234 |         height="10"
235 |         :fill="properties[42].color"
236 |       />
237 |       <rect
238 |         x="30"
239 |         y="10"
240 |         width="10"
241 |         height="10"
242 |         :fill="properties[43].color"
243 |       />
244 |       <rect
245 |         x="30"
246 |         y="20"
247 |         width="10"
248 |         height="10"
249 |         :fill="properties[44].color"
250 |       />
251 |       <rect
252 |         x="30"
253 |         y="30"
254 |         width="10"
255 |         height="10"
256 |         :fill="properties[45].color"
257 |       />
258 |       <rect
259 |         x="30"
260 |         y="{40}"
261 |         width="10"
262 |         height="10"
263 |         :fill="properties[46].color"
264 |       />
265 |       <rect
266 |         x="30"
267 |         y="50"
268 |         width="10"
269 |         height="10"
270 |         :fill="properties[47].color"
271 |       />
272 |       <rect
273 |         x="30"
274 |         y="60"
275 |         width="10"
276 |         height="10"
277 |         :fill="properties[48].color"
278 |       />
279 |       <rect
280 |         x="30"
281 |         y="70"
282 |         width="10"
283 |         height="10"
284 |         :fill="properties[49].color"
285 |       />
286 |       <rect
287 |         x="50"
288 |         y="10"
289 |         width="10"
290 |         height="10"
291 |         :fill="properties[50].color"
292 |       />
293 |       <rect
294 |         x="50"
295 |         y="20"
296 |         width="10"
297 |         height="10"
298 |         :fill="properties[51].color"
299 |       />
300 |       <rect
301 |         x="50"
302 |         y="30"
303 |         width="10"
304 |         height="10"
305 |         :fill="properties[52].color"
306 |       />
307 |       <rect
308 |         x="50"
309 |         y="{40}"
310 |         width="10"
311 |         height="10"
312 |         :fill="properties[53].color"
313 |       />
314 |       <rect
315 |         x="50"
316 |         y="50"
317 |         width="10"
318 |         height="10"
319 |         :fill="properties[54].color"
320 |       />
321 |       <rect
322 |         x="50"
323 |         y="60"
324 |         width="10"
325 |         height="10"
326 |         :fill="properties[55].color"
327 |       />
328 |       <rect
329 |         x="50"
330 |         y="70"
331 |         width="10"
332 |         height="10"
333 |         :fill="properties[56].color"
334 |       />
335 |       <rect
336 |         x="70"
337 |         y="10"
338 |         width="10"
339 |         height="10"
340 |         :fill="properties[57].color"
341 |       />
342 |       <rect
343 |         x="70"
344 |         y="20"
345 |         width="10"
346 |         height="10"
347 |         :fill="properties[58].color"
348 |       />
349 |       <rect
350 |         x="70"
351 |         y="30"
352 |         width="10"
353 |         height="10"
354 |         :fill="properties[59].color"
355 |       />
356 |       <rect
357 |         x="70"
358 |         y="{40}"
359 |         width="10"
360 |         height="10"
361 |         :fill="properties[60].color"
362 |       />
363 |       <rect
364 |         x="70"
365 |         y="50"
366 |         width="10"
367 |         height="10"
368 |         :fill="properties[61].color"
369 |       />
370 |       <rect
371 |         x="70"
372 |         y="60"
373 |         width="10"
374 |         height="10"
375 |         :fill="properties[62].color"
376 |       />
377 |       <rect
378 |         x="70"
379 |         y="70"
380 |         width="10"
381 |         height="10"
382 |         :fill="properties[63].color"
383 |       />
384 |     </g>
385 |   </svg>
386 | </template>
387 | 
388 | <script>
389 | import { getNumber, getRandomColor } from "@/utils";
390 | const ELEMENTS = 64;
391 | const SIZE = 80;
392 | 
393 | export default {
394 |   props: {
395 |     name: { type: String, required: true },
396 |     colors: { type: Array, required: true },
397 |     size: { type: Number, required: true},
398 |     square: { type: Boolean, default: false }
399 |   },
400 |   data() {
401 |     return {
402 |       viewboxSize: SIZE,
403 |     };
404 |   },
405 |   computed: {
406 |     properties () {
407 |       return this.generateColors()
408 |     }
409 |   },
410 |   methods: {
411 |     generateColors() {
412 |       const numFromName = getNumber(this.name);
413 |       const range = this.colors && this.colors.length;
414 | 
415 |       const elementProperties = Array.from({ length: ELEMENTS }, (_, i) => {
416 |         return { color: getRandomColor(numFromName % (i + 13), this.colors, range) };
417 |       });
418 | 
419 |       return elementProperties;
420 |     },
421 |   },
422 | };
423 | </script>


--------------------------------------------------------------------------------
/src/components/AvatarRing.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <svg
 3 |       :viewBox="`0 0 ${viewboxSize} ${viewboxSize}`"
 4 |       fill="none"
 5 |       xmlns="http://www.w3.org/2000/svg"
 6 |       :width="size"
 7 |       :height="size"
 8 |     >
 9 |     <mask
10 |       id="mask__ring"
11 |       maskUnits="userSpaceOnUse"
12 |       x="0"
13 |       y="0"
14 |       :width="viewboxSize"
15 |       :height="viewboxSize"
16 |     >
17 |       <rect
18 |         :width="viewboxSize"
19 |         :height="viewboxSize"
20 |         :rx="square ? undefinded : viewboxSize / 2"
21 |         fill="#fff"
22 |       />
23 |     </mask>
24 |       <path d="M0 0h90v45H0z" :fill="cellColors[0]"/>
25 |       <path d="M0 45h90v45H0z" :fill="cellColors[1]"/>
26 |       <path d="M83 45a38 38 0 00-76 0h76z" :fill="cellColors[2]" />
27 |       <path d="M83 45a38 38 0 01-76 0h76z" :fill="cellColors[3]" />
28 |       <path d="M77 45a32 32 0 10-64 0h64z" :fill="cellColors[4]" />
29 |       <path d="M77 45a32 32 0 11-64 0h64z" :fill="cellColors[5]" />
30 |       <path d="M71 45a26 26 0 00-52 0h52z" :fill="cellColors[6]" />
31 |       <path d="M71 45a26 26 0 01-52 0h52z" :fill="cellColors[7]" />
32 |       <circle cx="45" cy="45" r="23" :fill="cellColors[8]" />
33 |     </svg>    
34 | </template>
35 | 
36 | <script>
37 | import { getNumber, getRandomColor } from "@/utils";
38 | const SIZE = 90;
39 | const COLORS = 5;
40 | 
41 | export default {
42 |   props: {
43 |     name: { type: String, required: true },
44 |     colors: { type: Array, required: true },
45 |     size: { type: Number, required: true },
46 |     square: { type: Boolean, default: false }
47 |   },
48 |   data() {
49 |     return {
50 |       viewboxSize: SIZE,
51 |     };
52 |   },
53 |   computed: {
54 |     cellColors() {
55 |       const numFromName = getNumber(this.name);
56 |       const range = this.colors && this.colors.length;
57 |       const colorsShuffle = Array.from({ length: COLORS }, (_, i) =>
58 |         getRandomColor(numFromName + (i + 1), this.colors, range)
59 |       );
60 |       const iconColors = [];
61 |       iconColors[0] = colorsShuffle[0];
62 |       iconColors[1] = colorsShuffle[1];
63 |       iconColors[2] = colorsShuffle[1];
64 |       iconColors[3] = colorsShuffle[2];
65 |       iconColors[4] = colorsShuffle[2];
66 |       iconColors[5] = colorsShuffle[3];
67 |       iconColors[6] = colorsShuffle[3];
68 |       iconColors[7] = colorsShuffle[0];
69 |       iconColors[8] = colorsShuffle[4];
70 | 
71 |       return iconColors;
72 |     },
73 |   },
74 | };
75 | </script>


--------------------------------------------------------------------------------
/src/components/AvatarSunset.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     :viewBox="`0 0 ${viewboxSize} ${viewboxSize}`"
 4 |     fill="none"
 5 |     xmlns="http://www.w3.org/2000/svg"
 6 |     :width="size"
 7 |     :height="size"
 8 |   >
 9 |     <mask
10 |       id="mask__sunset"
11 |       maskUnits="userSpaceOnUse"
12 |       x="0"
13 |       y="0"
14 |       :width="viewboxSize"
15 |       :height="viewboxSize"
16 |     >
17 |       <rect
18 |         :width="viewboxSize"
19 |         :height="viewboxSize"
20 |         :rx="square ? undefinded : viewboxSize / 2"
21 |         fill="#fff"
22 |       />
23 |     </mask>
24 |     <g mask="url(#mask__sunset)">
25 |       <path
26 |         :fill="`url(#gradient_paint0_linear_${shortName})`"
27 |         d="M0 0h80v40H0z"
28 |       />
29 |       <path
30 |         :fill="`url(#gradient_paint1_linear_${shortName})`"
31 |         d="M0 40h80v40H0z"
32 |       />
33 |     </g>
34 |     <defs>
35 |       <linearGradient
36 |         :id="`gradient_paint0_linear_${shortName}`"
37 |         :x1="viewboxSize / 2"
38 |         y1="0"
39 |         :x2="viewboxSize / 2"
40 |         :y2="viewboxSize / 2"
41 |         gradientUnits="userSpaceOnUse"
42 |       >
43 |         <stop :stop-color="properties[0].color" />
44 |         <stop offset="1" :stop-color="properties[1].color" />
45 |       </linearGradient>
46 |       <linearGradient
47 |         :id="`gradient_paint1_linear_${shortName}`"
48 |         :x1="viewboxSize / 2"
49 |         :y1="viewboxSize / 2"
50 |         :x2="viewboxSize / 2"
51 |         :y2="viewboxSize"
52 |         gradientUnits="userSpaceOnUse"
53 |       >
54 |         <stop :stop-color="properties[2].color" />
55 |         <stop offset="1" :stop-color="properties[3].color" />
56 |       </linearGradient>
57 |     </defs>
58 |   </svg>
59 | </template>
60 | 
61 | <script>
62 | import { getNumber, getRandomColor } from "@/utils";
63 | const ELEMENTS = 4;
64 | const SIZE = 80;
65 | export default {
66 |   props: {
67 |     name: { type: String, required: true },
68 |     colors: { type: Array, required: true },
69 |     size: { type: Number, required: true },
70 |     square: { type: Boolean, default: false }
71 |   },
72 |   data() {
73 |     return {
74 |       viewboxSize: SIZE,
75 |     };
76 |   },
77 |   computed: {
78 |     shortName() {
79 |       return this.name.replace(/\s/g, "");
80 |     },
81 |     properties() {
82 |       const numFromName = getNumber(this.name);
83 |       const range = this.colors && this.colors.length;
84 | 
85 |       const elementsProperties = Array.from({ length: ELEMENTS }, (_, i) => ({
86 |         color: getRandomColor(numFromName + i, this.colors, range),
87 |       }));
88 | 
89 |       return elementsProperties;
90 |     },
91 |   },
92 |   filters: {
93 |     short(value) {
94 |       return value.replace(/\s/g, "");
95 |     },
96 |   },
97 | };
98 | </script>


--------------------------------------------------------------------------------
/src/demo/button.vue:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stonega/vue2-boring-avatars/26f2ed63e61504ae761d941da7db7a444442fa97/src/demo/button.vue


--------------------------------------------------------------------------------
/src/demo/colorDot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="main">
 3 |     <div
 4 |       @click="() => (showPicker = !showPicker)"
 5 |       class="color-dot"
 6 |       :style="{ backgroundColor: color }"
 7 |     ></div>
 8 |     <transition name="fade">
 9 |       <chrome
10 |         v-if="showPicker"
11 |         :value="color"
12 |         @input="(value) => updateColor(value)"
13 |         class="chrome-picker"
14 |       />
15 |     </transition>
16 |   </main>
17 | </template>
18 | 
19 | <script>
20 | import { Chrome } from "vue-color";
21 | 
22 | export default {
23 |   name: "ColorDot",
24 |   components: { Chrome },
25 |   props: {
26 |     color: { type: String, required: true },
27 |   },
28 |   data() {
29 |     return {
30 |       showPicker: false,
31 |     };
32 |   },
33 |   methods: {
34 |     updateColor(colors) {
35 |       this.showPicker = false;
36 |       this.$emit("input", colors.hex);
37 |     },
38 |   },
39 | };
40 | </script>
41 | 
42 | <style scoped>
43 | .main {
44 |   position: relative;
45 | }
46 | .color-dot {
47 |   cursor: pointer;
48 |   width: 2rem;
49 |   height: 2rem;
50 |   border-radius: 1rem;
51 | }
52 | .chrome-picker {
53 |   position: absolute;
54 |   top: 3rem;
55 | }
56 | .fade-enter-active,
57 | .fade-leave-active {
58 |   transition: opacity 0.5s;
59 | }
60 | .fade-enter,
61 | .fade-leave-to {
62 |   opacity: 0;
63 | }
64 | </style>


--------------------------------------------------------------------------------
/src/demo/global.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stonega/vue2-boring-avatars/26f2ed63e61504ae761d941da7db7a444442fa97/src/demo/global.css


--------------------------------------------------------------------------------
/src/demo/playground.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div class="header">
  4 |       <div class="panel">
  5 |         <div class="variant-picker">
  6 |           <div
  7 |             v-for="(v, index) in variants"
  8 |             :key="index"
  9 |             class="variant-tag"
 10 |             :class="{active: v === variant}"
 11 |             @click="() => (variant = v)"
 12 |           >
 13 |             {{ v }}
 14 |           </div>
 15 |         </div>
 16 |         <input type="checkbox" id="shape" name="shape" v-model="square">
 17 |         <div class="square">Square</div>
 18 |         <div class="color-button">
 19 |           <div v-for="(color, index) in colors" :key="index">
 20 |             <color-dot
 21 |               :color="color"
 22 |               @input="(event) => updateColors(event, index)"
 23 |             />
 24 |           </div>
 25 |         </div>
 26 |       </div>
 27 |     </div>
 28 |     <section class="avatar-list">
 29 |       <div v-for="(name, index) in names" :key="index">
 30 |         <avatar :variant="variant" :colors="colors" :name="name" :square="square" />
 31 |         <p>{{ name }}</p>
 32 |       </div>
 33 |     </section>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import Avatar from "../components/Avatar.vue";
 39 | import ColorDot from "./colorDot.vue";
 40 | 
 41 | const VARIANTS = ["pixels", "bauhaus", "ring", "beam", "sunset", "marble"];
 42 | export default {
 43 |   name: "Playground",
 44 |   components: {
 45 |     Avatar,
 46 |     ColorDot,
 47 |   },
 48 |   data() {
 49 |     return {
 50 |       colors: ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"],
 51 |       variants: VARIANTS,
 52 |       variant: "pixels",
 53 |       square: false,
 54 |       names: ["Tether", "Uniswap", "ChainLink", "Automata", "Binance"],
 55 |     };
 56 |   },
 57 |   methods: {
 58 |     updateColors(color, index) {
 59 |       this.colors.splice(index, 1, color);
 60 |     },
 61 |   },
 62 | };
 63 | </script>
 64 | 
 65 | <style>
 66 | #app {
 67 |   font-family: Avenir, Helvetica, Arial, sans-serif;
 68 |   -webkit-font-smoothing: antialiased;
 69 |   -moz-osx-font-smoothing: grayscale;
 70 |   text-align: center;
 71 |   color: #2c3e50;
 72 | }
 73 | .header {
 74 |   display: flex;
 75 |   flex-direction: row;
 76 |   justify-content: space-between;
 77 |   padding: 1rem 0.5rem;
 78 | }
 79 | .variant-picker {
 80 |   background-color: gray;
 81 |   color: white;
 82 |   padding: 0.5rem 1rem;
 83 |   display: flex;
 84 |   flex-direction: row;
 85 |   gap: 1rem;
 86 |   margin-right: 2rem;
 87 | }
 88 | .variant-tag {
 89 |   border-radius: 5rem;
 90 |   padding: 0.5rem;
 91 |   background-color: grey;
 92 |   cursor: pointer;
 93 | }
 94 | .variant-tag:hover{
 95 |   background-color: #9CA3AF;
 96 | }
 97 | .active {
 98 |   background-color: #9CA3AF;
 99 | }
100 | .panel {
101 |   display: flex;
102 |   flex-direction: row;
103 |   align-items: center;
104 | }
105 | .color-button {
106 |   display: flex;
107 |   flex-direction: row;
108 |   justify-content: flex-start;
109 |   gap: 1rem;
110 | }
111 | .avatar-list {
112 |   padding: 1rem;
113 |   display: flex;
114 |   flex-direction: row;
115 |   gap: 2rem;
116 | }
117 | .square {
118 |   padding-right: 1rem;
119 | }
120 | </style>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Avatar from "./components/Avatar.vue";
2 | 
3 | export default Avatar;


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Playground from './demo/playground.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(Playground),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | export const getNumber = (name) => {
 2 |     const charactersArray = Array.from(name)
 3 |     return charactersArray.reduce((accu, curr) =>
 4 |         accu + curr.charCodeAt(0)
 5 |         , 0)
 6 | }
 7 | 
 8 | export const getModules = (num, max) => {
 9 |     return num * max
10 | }
11 | 
12 | export const getDigit = (num, ntn) => {
13 |     return Math.floor((num / Math.pow(10, ntn)) % 10)
14 | }
15 | 
16 | export const getBoolean = (num, ntn) => {
17 |     return (!(getDigit(num, ntn) % 2))
18 | }
19 | 
20 | export const getAngle = (x, y) => {
21 |     return Math.atan2(x, y) * 180 / Math.PI
22 | }
23 | 
24 | export const getUnit = (num, range, index) => {
25 |     let value = num % range
26 | 
27 |     if (index && ((getDigit(num, index) % 2) === 0)) {
28 |         return -value
29 |     }
30 |     return value
31 | }
32 | 
33 | export const getRandomColor = (num, colors, range) => {
34 |     return colors[num % range]
35 | }
36 | 
37 | export const getContrast = (hexColor) => {
38 |     if (hexColor.slice(0, 1) === '#') {
39 |         hexColor = hexColor.slice(1)
40 |     }
41 | 
42 |     let r = parseInt(hexColor.substr(0, 2), 16)
43 |     let g = parseInt(hexColor.substr(2, 2), 16)
44 |     let b = parseInt(hexColor.substr(4, 2), 16)
45 | 
46 |     let yiq = ((r * 299) + (g * 587) + (b * 144)) / 1000
47 | 
48 |     return (yiq >= 128) ? 'black' : 'white'
49 | }


--------------------------------------------------------------------------------