Skip to content

Commit 0d4552c

Browse files
kyechan99kyechan99
authored
Merge pull request #83 from kyechan99/feat/blur
feat: new model type - blur
2 parents fce85ea + d2ff725 commit 0d4552c

File tree

14 files changed

+384
-34
lines changed

14 files changed

+384
-34
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ Type data makes to change Background Image.
9595
- [waving](#waving)
9696
- [venom](#venom)
9797
- [speech](#speech)
98+
- [blur](#blur)
9899
- [transparent](#transparent)
99100

100101
Write `&type= ` on the URL
@@ -433,4 +434,8 @@ Value must be greater than or equal to 0.
433434

434435
![speech](https://capsule-render.vercel.app/api?type=speech&height=200&fontSize=45&color=gradient&text=speech-nl-bubble&animation=blinking&fontAlign=30,60&fontAlignY=35,55)
435436

437+
## Blur <a id="blur">
438+
439+
![blur](https://capsule-render.vercel.app/api?type=blur&height=300&color=gradient&text=Blur&strokeWidth=2&section=footer&reversal=true&fontAlign=50&stroke=E0E0E0&fontSize=55&textBg=false)
440+
436441
<hr/>

‎__test__/__snapshots__/model.test.ts.snap‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,217 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Test Models blur model 1`] = `
4+
<svg
5+
height="300"
6+
style="z-index:1;position:relative"
7+
viewBox="0 0 854 300"
8+
width="854"
9+
xmlns="http://www.w3.org/2000/svg"
10+
xmlns:xlink="http://www.w3.org/1999/xlink"
11+
>
12+
13+
14+
<style>
15+
16+
.text { font-size: 20px; font-weight: 700; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; } .desc { font-size: 30px; font-weight: 500; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; } .text, .desc { transform-origin: center center; transform: rotate(1deg); }
17+
.text, .desc { animation: fadeIn 1.2s ease-in-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
18+
19+
</style>
20+
21+
22+
<defs>
23+
24+
25+
<lineargradient
26+
id="linear"
27+
x1="0%"
28+
x2="100%"
29+
y1="0%"
30+
y2="0%"
31+
>
32+
33+
34+
<stop
35+
offset="0%"
36+
stop-color="#ddd6f3"
37+
/>
38+
<stop
39+
offset="100%"
40+
stop-color="#faaca8"
41+
/>
42+
43+
44+
</lineargradient>
45+
46+
47+
</defs>
48+
49+
50+
51+
<defs>
52+
53+
54+
<filter
55+
id="blurFilter"
56+
>
57+
58+
59+
<fegaussianblur
60+
stdDeviation="12"
61+
/>
62+
63+
64+
</filter>
65+
66+
67+
</defs>
68+
69+
70+
71+
<circle
72+
cx="50%"
73+
cy="50%"
74+
fill="url(#linear)"
75+
filter="url(#blurFilter)"
76+
opacity="0.2"
77+
r="75"
78+
transform="scale (-1, 1)"
79+
transform-origin="center"
80+
>
81+
82+
83+
<animate
84+
attributeName="cx"
85+
begin="0s"
86+
calcMode="spline"
87+
dur="10s"
88+
keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"
89+
repeatCount="indefinite"
90+
values="50%;50%;50%;50%;50%"
91+
/>
92+
93+
94+
<animate
95+
attributeName="cy"
96+
begin="0s"
97+
calcMode="spline"
98+
dur="12s"
99+
keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"
100+
repeatCount="indefinite"
101+
values="50%;50%;50%;50%;50%"
102+
/>
103+
104+
105+
</circle>
106+
107+
108+
109+
<circle
110+
cx="45%"
111+
cy="50%"
112+
fill="url(#linear)"
113+
filter="url(#blurFilter)"
114+
opacity="0.3"
115+
r="90"
116+
transform="scale (-1, 1)"
117+
transform-origin="center"
118+
>
119+
120+
121+
<animate
122+
attributeName="cx"
123+
begin="1s"
124+
calcMode="spline"
125+
dur="30s"
126+
keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"
127+
repeatCount="indefinite"
128+
values="45%;50%;55%;50%;45%"
129+
/>
130+
131+
132+
<animate
133+
attributeName="cy"
134+
begin="1s"
135+
calcMode="spline"
136+
dur="36s"
137+
keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"
138+
repeatCount="indefinite"
139+
values="50%;50%;50%;50%;50%"
140+
/>
141+
142+
143+
</circle>
144+
145+
146+
147+
<circle
148+
cx="60%"
149+
cy="50%"
150+
fill="url(#linear)"
151+
filter="url(#blurFilter)"
152+
opacity="0.15"
153+
r="84.00000000000001"
154+
transform="scale (-1, 1)"
155+
transform-origin="center"
156+
>
157+
158+
159+
<animate
160+
attributeName="cx"
161+
begin="2s"
162+
calcMode="spline"
163+
dur="15s"
164+
keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"
165+
repeatCount="indefinite"
166+
values="60%;50%;40%;50%;60%"
167+
/>
168+
169+
170+
<animate
171+
attributeName="cy"
172+
begin="2s"
173+
calcMode="spline"
174+
dur="18s"
175+
keySplines="0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1; 0.4 0 0.6 1"
176+
repeatCount="indefinite"
177+
values="50%;50%;50%;50%;50%"
178+
/>
179+
180+
181+
</circle>
182+
183+
184+
185+
186+
<text
187+
alignment-baseline="middle"
188+
class="text"
189+
stroke="#none"
190+
stroke-width="1"
191+
style="fill:#f7f5f5;"
192+
text-anchor="middle"
193+
x="40%"
194+
y="50%"
195+
>
196+
blur
197+
</text>
198+
199+
200+
<text
201+
alignment-baseline="middle"
202+
class="desc"
203+
style="fill:#f7f5f5;"
204+
text-anchor="middle"
205+
x="40%"
206+
y="50%"
207+
>
208+
blur
209+
</text>
210+
211+
212+
</svg>
213+
`;
214+
3215
exports[`Test Models cylinder model 1`] = `
4216
<svg
5217
height="300"

‎__test__/model.test.ts‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import api from "../api";
22
import { DOMParser } from "xmldom";
3+
import { MODELS } from "../constants/model";
34

45
const route = query => {
56
const req = {
@@ -16,21 +17,6 @@ const route = query => {
1617
return { req, res };
1718
};
1819

19-
const modelList = [
20-
"wave",
21-
"egg",
22-
"shark",
23-
"slice",
24-
"rect",
25-
"soft",
26-
"rounded",
27-
"cylinder",
28-
"waving",
29-
"venom",
30-
"speech",
31-
"transparent",
32-
];
33-
3420
describe("Test Models", () => {
3521
beforeEach(() => {
3622
jest.spyOn(Math, "random").mockReturnValue(0.5);
@@ -40,7 +26,7 @@ describe("Test Models", () => {
4026
jest.restoreAllMocks();
4127
});
4228

43-
modelList.map(type => {
29+
MODELS.map(type => {
4430
it(`${type} model`, () => {
4531
const { req, res } = route({
4632
type,
@@ -80,7 +66,7 @@ describe("Test Models", () => {
8066
});
8167
});
8268

83-
modelList.map(type => {
69+
MODELS.map(type => {
8470
it(`${type} model`, () => {
8571
// This is a safe query that will not be modified with a high probability.
8672
const { req, res } = route({

‎constants/model.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
// agonizing whether to get the name from the file name..
2-
export const ANIMATION_MODELS = ["waving", "venom"];
3-
export const NORMAL_MODELS = ["cylinder", "egg", "rect", "rounded", "shark", "slice", "soft", "wave"];
2+
3+
import animationModel from "../model/animationModel";
4+
import normalMode from "../model/normalModel";
5+
6+
export const ANIMATION_MODELS = Object.keys(animationModel);
7+
export const NORMAL_MODELS = Object.keys(normalMode);
8+
export const MODELS = [...NORMAL_MODELS, ...ANIMATION_MODELS];

‎docs/README_de.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ Diesen Arten können angegeben werden, um den Hintergrund zu ändern:
9595
- [waving](#waving)
9696
- [venom](#venom)
9797
- [speech](#speech)
98+
- [blur](#blur)
9899
- [transparent](#transparent)
99100

100101
Schreibe `&type= ` in die URL:
@@ -432,4 +433,8 @@ Wert muss größer oder gleich 0 sein.
432433

433434
![speech](https://capsule-render.vercel.app/api?type=speech&height=200&fontSize=45&color=gradient&text=speech-nl-bubble&animation=blinking&fontAlign=30,60&fontAlignY=35,55)
434435

436+
## Blur <a id="blur">
437+
438+
![blur](https://capsule-render.vercel.app/api?type=blur&height=300&color=gradient&text=Blur&strokeWidth=2&section=footer&reversal=true&fontAlign=50&stroke=E0E0E0&fontSize=55&textBg=false)
439+
435440
<hr/>

‎docs/README_fr.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ Le paramètre `&type= ` change la forme de l'arrière-plan. Les formes dont vous
9898
- [waving](#waving)
9999
- [venom](#venom)
100100
- [speech](#speech)
101+
- [blur](#blur)
101102
- [transparent](#transparent)
102103

103104
Ajoute `&type= ` au URL, suivi par la forme que vous voulez afficher.
@@ -438,4 +439,8 @@ Le valeur devrais être plus grand que 0.
438439

439440
![speech](https://capsule-render.vercel.app/api?type=speech&height=200&fontSize=45&color=gradient&text=speech-nl-bubble&animation=blinking&fontAlign=30,60&fontAlignY=35,55)
440441

442+
## Blur <a id="blur">
443+
444+
![blur](https://capsule-render.vercel.app/api?type=blur&height=300&color=gradient&text=Blur&strokeWidth=2&section=footer&reversal=true&fontAlign=50&stroke=E0E0E0&fontSize=55&textBg=false)
445+
441446
<hr/>

‎docs/README_kr.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ Type 데이터는 배경 이미지를 변경합니다.
9595
- [waving](#waving)
9696
- [venom](#venom)
9797
- [speech](#speech)
98+
- [blur](#blur)
9899
- [transparent](#transparent)
99100

100101
`&type= ` 에 데이터를 작성하여 사용합니다.
@@ -420,4 +421,8 @@ stroke의 굵기를 변경합니다.
420421

421422
![speech](https://capsule-render.vercel.app/api?type=speech&height=200&fontSize=45&color=gradient&text=speech-nl-bubble&animation=blinking&fontAlign=30,60&fontAlignY=35,55)
422423

424+
## Blur <a id="blur">
425+
426+
![blur](https://capsule-render.vercel.app/api?type=blur&height=300&color=gradient&text=Blur&strokeWidth=2&section=footer&reversal=true&fontAlign=50&stroke=E0E0E0&fontSize=55&textBg=false)
427+
423428
<hr/>

‎docs/README_zh-cn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ HTML 格式：
9595
- [waving](#waving)
9696
- [venom](#venom)
9797
- [speech](#speech)
98+
- [blur](#blur)
9899
- [transparent](#transparent)
99100

100101
在 URL 中添加 `&type=`
@@ -433,4 +434,8 @@ HTML 格式：
433434

434435
![speech](https://capsule-render.vercel.app/api?type=speech&height=200&fontSize=45&color=gradient&text=speech-nl-bubble&animation=blinking&fontAlign=30,60&fontAlignY=35,55)
435436

437+
## Blur <a id="blur">
438+
439+
![blur](https://capsule-render.vercel.app/api?type=blur&height=300&color=gradient&text=Blur&strokeWidth=2&section=footer&reversal=true&fontAlign=50&stroke=E0E0E0&fontSize=55&textBg=false)
440+
436441
<hr/>

‎docs/README_zh-hk.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ HTML 格式：
9595
- [waving](#waving)
9696
- [venom](#venom)
9797
- [speech](#speech)
98+
- [blur](#blur)
9899
- [transparent](#transparent)
99100

100101
喺 URL 度加 `&type=`
@@ -433,4 +434,8 @@ HTML 格式：
433434

434435
![speech](https://capsule-render.vercel.app/api?type=speech&height=200&fontSize=45&color=gradient&text=speech-nl-bubble&animation=blinking&fontAlign=30,60&fontAlignY=35,55)
435436

437+
## Blur <a id="blur">
438+
439+
![blur](https://capsule-render.vercel.app/api?type=blur&height=300&color=gradient&text=Blur&strokeWidth=2&section=footer&reversal=true&fontAlign=50&stroke=E0E0E0&fontSize=55&textBg=false)
440+
436441
<hr/>

‎docs/README_zh-tw.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ HTML 格式：
9595
- [waving](#waving)
9696
- [venom](#venom)
9797
- [speech](#speech)
98+
- [blur](#blur)
9899
- [transparent](#transparent)
99100

100101
在 URL 中添加 `&type=`
@@ -433,4 +434,8 @@ HTML 格式：
433434

434435
![speech](https://capsule-render.vercel.app/api?type=speech&height=200&fontSize=45&color=gradient&text=speech-nl-bubble&animation=blinking&fontAlign=30,60&fontAlignY=35,55)
435436

437+
## Blur <a id="blur">
438+
439+
![blur](https://capsule-render.vercel.app/api?type=blur&height=300&color=gradient&text=Blur&strokeWidth=2&section=footer&reversal=true&fontAlign=50&stroke=E0E0E0&fontSize=55&textBg=false)
440+
436441
<hr/>

0 commit comments

Comments
 (0)