├── .dockerignore
├── .github
    └── workflows
    │   ├── fly-deploy.yml
    │   └── main.yml
├── .gitignore
├── .prettierrc
├── Dockerfile
├── LICENSE
├── README.md
├── bun.lockb
├── fly.toml
├── package.json
├── public
    ├── blobcdn-logo.png
    ├── blobcdn-logo.svg
    ├── blobcdn-mark.png
    ├── blobcdn-mark.svg
    ├── favicon.ico
    ├── favicon.png
    ├── robots.txt
    └── vercel.svg
├── src
    ├── app.ts
    ├── blob.ts
    ├── index.ts
    └── validator.ts
├── tsconfig.json
└── views
    └── index.html


/.dockerignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | Dockerfile*
 3 | docker-compose*
 4 | .dockerignore
 5 | .git
 6 | .gitignore
 7 | README.md
 8 | LICENSE
 9 | .vscode
10 | Makefile
11 | helm-charts
12 | .env
13 | .editorconfig
14 | .idea
15 | coverage*
16 | 


--------------------------------------------------------------------------------
/.github/workflows/fly-deploy.yml:
--------------------------------------------------------------------------------
 1 | # See https://fly.io/docs/app-guides/continuous-deployment-with-github-actions/
 2 | 
 3 | name: Fly Deploy
 4 | on:
 5 |   push:
 6 |     branches:
 7 |       - main
 8 | jobs:
 9 |   deploy:
10 |     name: Deploy app
11 |     runs-on: ubuntu-latest
12 |     concurrency: deploy-group    # optional: ensure only one action runs at a time
13 |     steps:
14 |       - uses: actions/checkout@v4
15 |       - uses: superfly/flyctl-actions/setup-flyctl@master
16 |       - run: flyctl deploy --remote-only
17 |         env:
18 |           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
19 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Create docker image
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   build:
10 |     name: Build and push
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: oven-sh/setup-bun@v1
14 |         with:
15 |           bun-version: latest
16 | 
17 |       - uses: actions/checkout@v3
18 |       - run: |
19 |           echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io --username ${{ github.repository_owner }} --password-stdin
20 |           docker build -t ghcr.io/${{ github.repository }} .
21 |           docker push ghcr.io/${{ github.repository}}
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules
3 | .vercel
4 | blobcdn


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "semi": true,
4 |   "trailingComma": "all",
5 |   "tabWidth": 2,
6 |   "printWidth": 80
7 | }
8 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # use the official Bun image
 2 | # see all versions at https://hub.docker.com/r/oven/bun/tags
 3 | FROM oven/bun:alpine AS base
 4 | WORKDIR /app
 5 | COPY . .
 6 | RUN bun install --frozen-lockfile --production\
 7 |       && bun run build
 8 | 
 9 | # copy production dependencies and source code into final image
10 | FROM alpine:latest
11 | WORKDIR /app
12 | 
13 | LABEL org.opencontainers.image.source=https://github.com/fransallen/blobcdn
14 | 
15 | RUN apk add libgcc libstdc++
16 | 
17 | COPY --from=base /app/blobcdn ./blobcdn
18 | RUN chmod +x ./blobcdn
19 | 
20 | COPY ./views ./views
21 | COPY ./public ./public
22 | 
23 | EXPOSE 3000/tcp
24 | CMD [ "./blobcdn" ]
25 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) Frans Allen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # BlobCDN
 2 | 
 3 | BlobCDN is the CDN for beautiful SVG shapes. The service allows you to quickly generate SVG shapes on the fly.
 4 | 
 5 | ## Docker
 6 | 
 7 | To run BlobCDN using Docker, execute the following command:
 8 | 
 9 | ```
10 | docker run -p 3000:3000 ghcr.io/fransallen/blobcdn:latest
11 | ```
12 | 
13 | This command will run the latest BlobCDN image and expose it on port 3000, accessible at http://localhost:3000.
14 | 
15 | ## Contributing
16 | 
17 | Please feel free to submit an issue or pull request. To develop, you'll need [Bun](https://bun.sh). Run `bun install` && `bun dev`.
18 | 
19 | ## License
20 | 
21 | [MIT](https://github.com/fransallen/blobcdn/blob/main/LICENSE)
22 | 


--------------------------------------------------------------------------------
/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fransallen/blobcdn/ea54e825bbe523d3b25e5c40e4f5b6c61a4b1e6f/bun.lockb


--------------------------------------------------------------------------------
/fly.toml:
--------------------------------------------------------------------------------
 1 | # fly.toml app configuration file generated for blobcdn on 2025-03-07T13:44:29+07:00
 2 | #
 3 | # See https://fly.io/docs/reference/configuration/ for information about how to use this file.
 4 | #
 5 | 
 6 | app = 'blobcdn'
 7 | primary_region = 'sin'
 8 | 
 9 | [build]
10 | 
11 | [http_service]
12 |   internal_port = 3000
13 |   force_https = true
14 |   auto_stop_machines = 'stop'
15 |   auto_start_machines = true
16 |   min_machines_running = 2
17 |   processes = ['app']
18 | 
19 | [[vm]]
20 |   size = 'shared-cpu-1x'
21 | 
22 | [checks]
23 |   [checks.http_check_app]
24 |     grace_period = "10s"
25 |     interval = "60s"
26 |     method = "get"
27 |     path = "/blob.svg"
28 |     port = 3000
29 |     timeout = "10s"
30 |     type = "http"
31 | 
32 | [http_service.http_options.response]
33 |   pristine = true
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blobcdn",
 3 |   "description": "The CDN for beautiful SVG shapes.",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "blobs": "^2.2.1-beta.1",
 7 |     "etag": "^1.8.1",
 8 |     "express": "^4.21.1",
 9 |     "randomcolor": "^0.6.2"
10 |   },
11 |   "devDependencies": {
12 |     "@types/bun": "^1.1.11",
13 |     "@types/etag": "^1.8.0",
14 |     "@types/express": "^4.17.14",
15 |     "@types/node": "^22.7.5",
16 |     "@types/randomcolor": "^0.5.7",
17 |     "nodemon": "^2.0.12"
18 |   },
19 |   "scripts": {
20 |     "dev": "bun --watch src/index.ts",
21 |     "build": "bun build src/index.ts --compile --minify --sourcemap --outfile blobcdn",
22 |     "build:docker": "docker build -t ghcr.io/fransallen/blobcdn .",
23 |     "start": "./blobcdn",
24 |     "start:docker": "docker rm -f blobcdn && docker run -p 3000:3000 --name blobcdn ghcr.io/fransallen/blobcdn"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/public/blobcdn-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fransallen/blobcdn/ea54e825bbe523d3b25e5c40e4f5b6c61a4b1e6f/public/blobcdn-logo.png


--------------------------------------------------------------------------------
/public/blobcdn-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="166.82mm" height="33.979mm" version="1.1" viewBox="0 0 166.82 33.979" xmlns="http://www.w3.org/2000/svg">
 2 |  <g transform="translate(155.4 -51.266)">
 3 |   <g transform="translate(-175.05 -137.39)">
 4 |    <g transform="matrix(.60631 0 0 .60631 -63.521 157.12)">
 5 |     <path d="m161.18 108.04c12.016 0.44686 24.01-5.1561 28.19-16.431 4.7249-12.746 2.3234-28.034-8.8223-35.817-10.662-7.4449-24.795-2.9041-34.887 5.2962-8.4244 6.8447-10.287 18.333-6.88 28.639 3.3463 10.124 11.745 17.916 22.4 18.312" fill="#ff5f7a" stroke="#none" stroke-width="0"/>
 6 |     <path d="m177.55 75.163a0.88834 0.88834 0 0 0-0.77282-0.45038h-11.637l1.951-14.907a0.89345 0.89345 0 0 0-1.6374-0.58052l-14.152 24.794a0.88834 0.88834 0 0 0 0.75664 1.3536h11.463l-1.5461 14.929a0.89367 0.89367 0 0 0 1.6459 0.54656l13.918-24.791a0.88834 0.88834 0 0 0 0.01-0.89434z" fill="#fff" stroke-width=".22209"/>
 7 |    </g>
 8 |    <text x="62.776329" y="216.83032" fill="#1a1a1a" font-family="sans-serif" font-size="29.035px" letter-spacing="0px" stroke-width="1.2389" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><tspan x="62.776329" y="216.83032" fill="#1a1a1a" font-family="Ubuntu" font-size="29.035px" font-weight="bold" stroke-width="1.2389" style="line-height:1.25">BlobCDN</tspan></text>
 9 |   </g>
10 |  </g>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/public/blobcdn-mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fransallen/blobcdn/ea54e825bbe523d3b25e5c40e4f5b6c61a4b1e6f/public/blobcdn-mark.png


--------------------------------------------------------------------------------
/public/blobcdn-mark.svg:
--------------------------------------------------------------------------------
1 | <svg width="27.454mm" height="27.454mm" version="1.1" viewBox="0 0 27.454 27.454" xmlns="http://www.w3.org/2000/svg">
2 |  <circle cx="13.727" cy="13.727" r="13.727" fill="none" opacity=".95" stroke-width=".26458"/>
3 |  <g transform="matrix(.4587 0 0 .4587 -61.691 -22.989)">
4 |   <path d="m161.18 108.04c12.016 0.44686 24.01-5.1561 28.19-16.431 4.7249-12.746 2.3234-28.034-8.8223-35.817-10.662-7.4449-24.795-2.9041-34.887 5.2962-8.4244 6.8447-10.287 18.333-6.88 28.639 3.3463 10.124 11.745 17.916 22.4 18.312" fill="#ff5f7a" stroke="#none" stroke-width="0"/>
5 |   <path d="m177.55 75.163a0.88834 0.88834 0 0 0-0.77282-0.45038h-11.637l1.951-14.907a0.89345 0.89345 0 0 0-1.6374-0.58052l-14.152 24.794a0.88834 0.88834 0 0 0 0.75664 1.3536h11.463l-1.5461 14.929a0.89367 0.89367 0 0 0 1.6459 0.54656l13.918-24.791a0.88834 0.88834 0 0 0 0.01-0.89434z" fill="#fff" stroke-width=".22209"/>
6 |  </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fransallen/blobcdn/ea54e825bbe523d3b25e5c40e4f5b6c61a4b1e6f/public/favicon.ico


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fransallen/blobcdn/ea54e825bbe523d3b25e5c40e4f5b6c61a4b1e6f/public/favicon.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /*


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="4437.6" height="1e3" version="1.1" viewBox="0 0 4437.6 1e3" xmlns="http://www.w3.org/2000/svg">
2 |  <rect width="4437.6" height="1e3" fill="#fff" opacity=".95" stroke-width="1.0198"/>
3 |  <path d="m2223.4 269.87c-158.8 0-273.29 103.56-273.29 258.91 0 155.34 128.74 258.91 287.68 258.91 95.931 0 180.51-37.973 232.86-101.98l-110.03-63.576c-29.053 31.789-73.212 50.343-122.83 50.343-68.904 0-127.44-35.96-149.17-93.492h403.04c3.1575-16.11 5.0354-32.795 5.0354-50.342 0-155.2-114.35-258.76-273.29-258.76zm-135.93 208.56c17.978-57.39 67.173-93.492 135.93-93.492 68.894 0 118.09 36.103 135.93 93.492zm-32.505-366.79-398.57 690.42-398.71-690.42h149.44l249.13 431.51 249.12-431.51zm-1347.1-71.918 531.48 920.55h-1063zm2367.1 489.04c0 86.302 56.384 143.84 143.84 143.84 59.265 0 103.71-26.898 126.58-70.768l110.47 63.72c-45.742 76.233-131.46 122.12-237.04 122.12-158.94 0-273.28-103.56-273.28-258.91 0-155.34 114.49-258.91 273.28-258.91 105.58 0 191.16 45.884 237.04 122.12l-110.47 63.72c-22.867-43.87-67.311-70.768-126.58-70.768-87.305 0-143.84 57.535-143.84 143.84zm1186.4-417.12v661.65h-129.45v-661.65zm-489.04 158.22c-158.8 0-273.28 103.56-273.28 258.91s128.88 258.91 287.67 258.91c95.931 0 180.51-37.973 232.86-101.98l-110.03-63.576c-29.053 31.789-73.212 50.343-122.83 50.343-68.904 0-127.44-35.96-149.17-93.492h403.04c3.1575-16.11 5.0262-32.795 5.0262-50.342 0-155.2-114.34-258.76-273.28-258.76zm-135.93 208.56c17.988-57.39 67.035-93.492 135.93-93.492s118.09 36.103 135.93 93.492zm-733.99-194.18v139.38c-14.379-4.171-29.633-7.0478-46.028-7.0478-83.568 0-143.84 57.535-143.84 143.84v212.88h-129.45v-489.04h129.45v132.33c0-73.069 85.004-132.33 189.86-132.33z" stroke-width=".92055"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
 1 | import { Request, Response } from 'express';
 2 | import etag from 'etag';
 3 | import randomColor from 'randomcolor';
 4 | import { getBlob } from './blob';
 5 | import { getInt } from './validator';
 6 | import os from 'os';
 7 | 
 8 | type BlobQuery = {
 9 |   seed?: string;
10 |   extraPoints?: string;
11 |   randomness?: string;
12 |   size?: string;
13 |   fill?: string;
14 |   stroke?: string;
15 |   strokeWidth?: string;
16 | };
17 | 
18 | export async function getApp(req: Request, res: Response): Promise<void> {
19 |   try {
20 |     const query: BlobQuery = req.query;
21 |     const color: string = randomColor();
22 |     const random = Math.random();
23 |     const blobQuery = [
24 |       query.seed ?? random.toString(),
25 |       getInt(query.extraPoints) ?? 4,
26 |       getInt(query.randomness) ?? 6,
27 |       getInt(query.size) ?? 256,
28 |       query.fill ? `#${query.fill}` : color,
29 |       query.stroke ? `#${query.stroke}` : 'none',
30 |       getInt(query.strokeWidth) ?? 0,
31 |     ] as const;
32 | 
33 |     const blob = getBlob(...blobQuery);
34 | 
35 |     res
36 |       .status(200)
37 |       .header('Content-Disposition', 'filename="blob.svg"')
38 |       .header('Content-Type', 'image/svg+xml')
39 |       .header('Cache-Control', 'public, max-age=0, must-revalidate')
40 |       .header('ETag', etag(blob))
41 |       .header(
42 |         'Blob-Version',
43 |         `${
44 |           process.env.FLY_REGION
45 |             ? `${os.hostname()}-${[process.env.FLY_REGION]}`
46 |             : '1.0-dev'
47 |         }`,
48 |       )
49 |       .header(
50 |         'Blob-Path',
51 |         `/blob.svg?seed=${blobQuery[0]}&extraPoints=${
52 |           blobQuery[1]
53 |         }&randomness=${blobQuery[2]}&size=${
54 |           blobQuery[3]
55 |         }&fill=${blobQuery[4].replace('#', '')}&stroke=${blobQuery[5].replace(
56 |           '#',
57 |           '',
58 |         )}&strokeWidth=${blobQuery[6]}`,
59 |       )
60 |       .send(blob);
61 |   } catch (e) {
62 |     console.error((e as Error).message);
63 |     res
64 |       .status(500)
65 |       .type('text/plain')
66 |       .send('Failed to generate a blob SVG image.');
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/blob.ts:
--------------------------------------------------------------------------------
 1 | import blobs2 from 'blobs/v2';
 2 | 
 3 | interface BlobOptions {
 4 |   seed: string | number;
 5 |   extraPoints: number;
 6 |   randomness: number;
 7 |   size: number;
 8 | }
 9 | 
10 | interface BlobStyle {
11 |   fill: string;
12 |   stroke: string;
13 |   strokeWidth: number;
14 | }
15 | 
16 | export function getBlob(
17 |   seed: string | number,
18 |   extraPoints: number,
19 |   randomness: number,
20 |   size: number,
21 |   fill: string,
22 |   stroke: string,
23 |   strokeWidth: number,
24 | ): string {
25 |   const options: BlobOptions = { seed, extraPoints, randomness, size };
26 |   const style: BlobStyle = {
27 |     fill,
28 |     stroke,
29 |     strokeWidth,
30 |   };
31 | 
32 |   return blobs2.svg(options, style);
33 | }
34 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import express, { Request, Response, NextFunction } from 'express';
 2 | import path from 'path';
 3 | import { getApp } from './app';
 4 | 
 5 | const app = express();
 6 | const port: number = parseInt(process.env.PORT || '3000', 10);
 7 | 
 8 | app.disable('x-powered-by');
 9 | 
10 | // Serve static files
11 | app.use(express.static(path.join(__dirname, '../public')));
12 | 
13 | // Redirect blobcdn.fly.dev to blobcdn.com
14 | app.use((req: Request, res: Response, next: NextFunction) => {
15 |   if (req.hostname === 'blobcdn.fly.dev') {
16 |     return res.redirect(301, 'https://blobcdn.com');
17 |   }
18 |   next();
19 | });
20 | 
21 | // Root route
22 | app.get('/', (req: Request, res: Response) => {
23 |   res.sendFile(path.join(__dirname, '../views', 'index.html'));
24 | });
25 | 
26 | // Blob route
27 | app.get('/blob.svg', getApp);
28 | 
29 | // Start the server
30 | app.listen(port, () => {
31 |   console.log(`BlobCDN listening at http://localhost:${port}`);
32 | });
33 | 


--------------------------------------------------------------------------------
/src/validator.ts:
--------------------------------------------------------------------------------
 1 | import { URL } from 'url';
 2 | 
 3 | export function getInt(str: string | number | undefined): number | undefined {
 4 |   if (typeof str === 'number') {
 5 |     return Math.floor(str);
 6 |   }
 7 |   return /[0-9]+/.test(String(str)) ? parseInt(String(str), 10) : undefined;
 8 | }
 9 | 
10 | export function isValidUrl(str: string): boolean {
11 |   try {
12 |     new URL(str);
13 |     return true;
14 |   } catch {
15 |     return false;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2018",
 4 |     "module": "commonjs",
 5 |     "strict": true,
 6 |     "esModuleInterop": true,
 7 |     "skipLibCheck": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "types": ["node"],
10 |     "outDir": "./dist",
11 |     "rootDir": "./src"
12 |   },
13 |   "include": ["src/**/*.ts"],
14 |   "exclude": ["node_modules", "public"]
15 | }
16 | 


--------------------------------------------------------------------------------
/views/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  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 |     <title>BlobCDN - Make beautiful SVG shapes on the fly</title>
  8 |     <meta
  9 |       name="description"
 10 |       content="BlobCDN is a simple CDN for generating SVG shapes on the fly."
 11 |     />
 12 |     <meta name="twitter:card" content="summary_large_image" />
 13 |     <meta name="twitter:site" content="@blobcdn" />
 14 |     <meta
 15 |       name="twitter:title"
 16 |       content="BlobCDN - Make beautiful SVG shapes on the fly"
 17 |     />
 18 |     <meta
 19 |       name="twitter:description"
 20 |       content="BlobCDN is a simple CDN for generating SVG shapes on the fly."
 21 |     />
 22 |     <meta property="og:url" content="https://blobcdn.com/" />
 23 |     <meta property="og:type" content="website" />
 24 |     <meta
 25 |       property="og:title"
 26 |       content="BlobCDN - Make beautiful SVG shapes on the fly"
 27 |     />
 28 |     <meta
 29 |       property="og:description"
 30 |       content="BlobCDN is a simple CDN for generating SVG shapes on the fly."
 31 |     />
 32 |     <meta property="og:image" content="https://blobcdn.com/og.png" />
 33 |     <meta name="twitter:image" content="https://blobcdn.com/og.png" />
 34 |     <link rel="shortcut icon" href="/favicon.png" type="image/icon" />
 35 |     <link rel="preconnect" href="https://fonts.upset.dev" />
 36 |     <link
 37 |       rel="stylesheet"
 38 |       href="https://fonts.upset.dev/css2?family=Inter:wght@400;700&amp;display=swap"
 39 |     />
 40 |     <style>
 41 |       body {
 42 |         color: #444;
 43 |         font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI,
 44 |           Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
 45 |           sans-serif;
 46 |         margin: 0;
 47 |       }
 48 | 
 49 |       header {
 50 |         align-items: center;
 51 |         display: flex;
 52 |         justify-content: space-between;
 53 |         margin-top: 30px;
 54 |       }
 55 | 
 56 |       a {
 57 |         color: #222;
 58 |         text-decoration: none;
 59 |       }
 60 | 
 61 |       h1 {
 62 |         color: #222;
 63 |         font-size: 2em;
 64 |       }
 65 | 
 66 |       h2 {
 67 |         font-size: 1.5em;
 68 |         margin-top: 1.5em;
 69 |       }
 70 | 
 71 |       h3 {
 72 |         font-size: 1.17em;
 73 |       }
 74 | 
 75 |       h4 {
 76 |         margin: 1.33em 0 0.8em;
 77 |       }
 78 | 
 79 |       p {
 80 |         line-height: 1.5;
 81 |         margin: 0.8em 0;
 82 |       }
 83 | 
 84 |       code {
 85 |         background-color: #feffc0;
 86 |         border-radius: 2px;
 87 |         padding: 2px 4px;
 88 |       }
 89 | 
 90 |       .container {
 91 |         margin-left: auto;
 92 |         margin-right: auto;
 93 |         padding: 0 1rem;
 94 |         max-width: 640px;
 95 |       }
 96 | 
 97 |       .text-center {
 98 |         text-align: center;
 99 |       }
100 | 
101 |       header nav a,
102 |       footer nav a {
103 |         border-radius: 4px;
104 |         padding: 6px 10px;
105 |       }
106 | 
107 |       header nav a:hover,
108 |       header nav a:focus {
109 |         background-color: #ffe9e9;
110 |       }
111 | 
112 |       footer nav a:hover,
113 |       footer nav a:focus {
114 |         background-color: #e9fff5;
115 |       }
116 | 
117 |       footer {
118 |         padding: 2rem 0 6rem;
119 |       }
120 | 
121 |       footer nav {
122 |         padding-bottom: 2em;
123 |       }
124 | 
125 |       .logo img {
126 |         width: 135px;
127 |       }
128 | 
129 |       .blob-img {
130 |         display: inline-block;
131 |         width: 320px;
132 |         height: 320px;
133 |       }
134 | 
135 |       .monospace {
136 |         font-family: monospace;
137 |       }
138 | 
139 |       .font-normal {
140 |         font-weight: 400;
141 |       }
142 | 
143 |       .main-content {
144 |         padding-top: 3rem;
145 |       }
146 | 
147 |       .main-content h3 {
148 |         margin-top: 2em;
149 |       }
150 | 
151 |       .params h4 {
152 |         font-size: 1.1em;
153 |       }
154 | 
155 |       .params p {
156 |         color: #666;
157 |       }
158 | 
159 |       .span-gray {
160 |         color: #adadad;
161 |       }
162 | 
163 |       .examples {
164 |         display: grid;
165 |         grid-auto-flow: row;
166 |         grid-template-columns: repeat(5, minmax(0, 1fr));
167 |         grid-template-rows: repeat(2, minmax(0, 1fr));
168 |         gap: 1rem;
169 |         margin: 0 auto;
170 |         padding: 3rem 1rem;
171 |         max-width: 1024px;
172 |         place-items: center;
173 |       }
174 | 
175 |       .examples img {
176 |         width: 200px;
177 |       }
178 | 
179 |       .btn {
180 |         position: relative;
181 |         display: block;
182 |         margin: auto;
183 |         padding: 6px 12px;
184 |         font-size: 13px;
185 |         font-weight: 700;
186 |         line-height: 20px;
187 |         color: #333;
188 |         white-space: nowrap;
189 |         cursor: pointer;
190 |         background-color: #fff;
191 |         border: 1px solid #d5d5d5;
192 |         border-radius: 5px;
193 |       }
194 | 
195 |       .btn:focus {
196 |         text-decoration: none;
197 |         border-color: #51a7e8;
198 |         outline: none;
199 |         box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
200 |       }
201 | 
202 |       .btn:hover,
203 |       .btn:active {
204 |         text-decoration: none;
205 |         background-color: #f5f5f5;
206 |         border-color: #ccc;
207 |       }
208 | 
209 |       .tooltipped {
210 |         position: relative;
211 |       }
212 | 
213 |       .tooltipped:after {
214 |         position: absolute;
215 |         z-index: 1000000;
216 |         display: none;
217 |         padding: 5px 8px;
218 |         font: normal normal 11px/1.5 Helvetica, arial, nimbussansl,
219 |           liberationsans, freesans, clean, sans-serif, 'Segoe UI Emoji',
220 |           'Segoe UI Symbol';
221 |         color: #fff;
222 |         text-align: center;
223 |         text-decoration: none;
224 |         text-shadow: none;
225 |         text-transform: none;
226 |         letter-spacing: normal;
227 |         word-wrap: break-word;
228 |         white-space: pre;
229 |         pointer-events: none;
230 |         content: attr(aria-label);
231 |         background: rgba(0, 0, 0, 0.8);
232 |         border-radius: 3px;
233 |         -webkit-font-smoothing: subpixel-antialiased;
234 |       }
235 | 
236 |       .tooltipped:before {
237 |         position: absolute;
238 |         z-index: 1000001;
239 |         display: none;
240 |         width: 0;
241 |         height: 0;
242 |         color: rgba(0, 0, 0, 0.8);
243 |         pointer-events: none;
244 |         content: '';
245 |         border: 5px solid transparent;
246 |       }
247 | 
248 |       .tooltipped:hover:before,
249 |       .tooltipped:hover:after,
250 |       .tooltipped:active:before,
251 |       .tooltipped:active:after,
252 |       .tooltipped:focus:before,
253 |       .tooltipped:focus:after {
254 |         display: inline-block;
255 |         text-decoration: none;
256 |       }
257 | 
258 |       .tooltipped-s:after {
259 |         top: 100%;
260 |         right: 50%;
261 |         margin-top: 5px;
262 |       }
263 | 
264 |       .tooltipped-s:before {
265 |         top: auto;
266 |         right: 50%;
267 |         bottom: -5px;
268 |         margin-right: -5px;
269 |         border-bottom-color: rgba(0, 0, 0, 0.8);
270 |       }
271 | 
272 |       .tooltipped-s:after {
273 |         -webkit-transform: translateX(50%);
274 |         -ms-transform: translateX(50%);
275 |         transform: translateX(50%);
276 |       }
277 | 
278 |       @media (max-width: 1024px) {
279 |         .examples img {
280 |           width: 150px;
281 |         }
282 |       }
283 | 
284 |       @media (max-width: 768px) {
285 |         .examples {
286 |           grid-template-columns: repeat(3, minmax(0, 1fr));
287 |         }
288 | 
289 |         .examples div:last-child {
290 |           display: none;
291 |         }
292 |       }
293 | 
294 |       @media (max-width: 640px) {
295 |         .examples {
296 |           grid-template-columns: repeat(2, minmax(0, 1fr));
297 |           grid-template-rows: repeat(5, minmax(0, 1fr));
298 |         }
299 | 
300 |         .examples div:last-child {
301 |           display: block;
302 |         }
303 | 
304 |         .examples img {
305 |           width: 100px;
306 |         }
307 |       }
308 | 
309 |       .text-sm {
310 |         font-size: 0.8rem;
311 |         line-height: 1.25rem;
312 |       }
313 | 
314 |       .text-base {
315 |         font-size: 1rem;
316 |         line-height: 1.5rem;
317 |       }
318 | 
319 |       .text-lg {
320 |         font-size: 1.125rem;
321 |         line-height: 1.75rem;
322 |       }
323 | 
324 |       @media (min-width: 768px) {
325 |         .md\:text-xl {
326 |           font-size: 1.25rem;
327 |           line-height: 1.75rem;
328 |         }
329 |       }
330 |     </style>
331 |     <script src="https://cdn.statically.io/gh/zenorocha/clipboard.js/v2.0.8/dist/clipboard.min.js"></script>
332 |     <script
333 |       async
334 |       src="https://api-scout.reflexapi.net/app"
335 |       data-website-id="aa16420a-0c98-4afc-a068-ec99cad8d73f"
336 |     ></script>
337 |   </head>
338 |   <body>
339 |     <header class="container">
340 |       <a class="logo" href="/">
341 |         <h1>
342 |           <img
343 |             src="/blobcdn-logo.png"
344 |             alt="BlobCDN logo"
345 |             width="135"
346 |             height="27"
347 |           />
348 |         </h1>
349 |       </a>
350 | 
351 |       <nav>
352 |         <a href="https://github.com/fransallen/blobcdn">GitHub</a>
353 |         <a
354 |           href="https://twitter.com/intent/tweet?text=Check%20out%20BlobCDN%21%20%F0%9F%9A%80%20It%27s%20a%20simple%20CDN%20for%20generating%20SVG%20shapes%20on%20the%20fly.%20Perfect%20for%20creative%20projects%21%20%F0%9F%8E%A8%20Try%20it%20now%3A%20https%3A%2F%2Fblobcdn.com."
355 |           target="_blank"
356 |           >Tweet this!</a
357 |         >
358 |       </nav>
359 |     </header>
360 | 
361 |     <main class="container">
362 |       <div class="text-center">
363 |         <img class="blob-img" src="/blob.svg" alt="Random blob image" />
364 |         <p>Add this to your design:</p>
365 |         <h3 class="monospace text-sm md:text-xl">
366 |           <span class="font-normal">&lt;img src="</span
367 |           >https://blobcdn.com/blob.svg<span class="font-normal">"/&gt;</span>
368 |         </h3>
369 |         <button class="btn btn-randomize">Randomize</button>
370 |       </div>
371 | 
372 |       <div class="main-content">
373 |         <h2>About BlobCDN</h2>
374 |         <p>BlobCDN is a simple CDN for generating SVG shapes on the fly.</p>
375 | 
376 |         <h2>How to use</h2>
377 |         <p>
378 |           Our SVG shapes generation service is powered by a simple URL-based
379 |           API. All accessible trough
380 |           <code class="monospace">/blob.svg?:Parameters</code>.
381 |         </p>
382 | 
383 |         <h2>Parameters</h2>
384 |         <div class="params">
385 |           <h4 class="monospace">
386 |             seed=<span class="span-gray">:Number|String</span>
387 |           </h4>
388 |           <p>
389 |             A given seed will always produce the same blob. Default to random.
390 |           </p>
391 | 
392 |           <h4 class="monospace">
393 |             extraPoints=<span class="span-gray">:Number</span>
394 |           </h4>
395 |           <p>
396 |             Actual number of points will be `3 + extraPoints`. Default to 4.
397 |           </p>
398 | 
399 |           <h4 class="monospace">
400 |             randomness=<span class="span-gray">:Number</span>
401 |           </h4>
402 |           <p>
403 |             Increases the amount of variation in point position. Default to 6.
404 |           </p>
405 | 
406 |           <h4 class="monospace">size=<span class="span-gray">:Number</span></h4>
407 |           <p>Size of the bounding box in pixel. Default to 256.</p>
408 | 
409 |           <h4 class="monospace">
410 |             fill=<span class="span-gray">:HexColor</span>
411 |           </h4>
412 |           <p>Color for shape. Default to random.</p>
413 | 
414 |           <h4 class="monospace">
415 |             stroke=<span class="span-gray">:HexColor</span>
416 |           </h4>
417 |           <p>Color for stroke. Default to none.</p>
418 | 
419 |           <h4 class="monospace">
420 |             strokeWidth=<span class="span-gray">:Number</span>
421 |           </h4>
422 |           <p>Width for stroke line. Default to 0.</p>
423 |         </div>
424 |       </div>
425 |     </main>
426 | 
427 |     <section class="examples text-center">
428 |       <div>
429 |         <img
430 |           src="/blob.svg?seed=1&extraPoints=1&fill=f9ccff"
431 |           alt="blob image 1"
432 |         />
433 |         <button
434 |           class="btn"
435 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=1&extraPoints=1&fill=f9ccff"
436 |         >
437 |           Copy URL
438 |         </button>
439 |       </div>
440 |       <div>
441 |         <img
442 |           src="/blob.svg?seed=2&extraPoints=2&fill=d64d20"
443 |           alt="blob image 2"
444 |         />
445 |         <button
446 |           class="btn"
447 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=2&extraPoints=2&fill=d64d20"
448 |         >
449 |           Copy URL
450 |         </button>
451 |       </div>
452 |       <div>
453 |         <img
454 |           src="/blob.svg?seed=3&extraPoints=3&fill=5fdce0"
455 |           alt="blob image 3"
456 |         />
457 |         <button
458 |           class="btn"
459 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=3&extraPoints=3&fill=5fdce0"
460 |         >
461 |           Copy URL
462 |         </button>
463 |       </div>
464 |       <div>
465 |         <img
466 |           src="/blob.svg?seed=4&extraPoints=4&fill=dbb948"
467 |           alt="blob image 4"
468 |         />
469 |         <button
470 |           class="btn"
471 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=4&extraPoints=4&fill=dbb948"
472 |         >
473 |           Copy URL
474 |         </button>
475 |       </div>
476 |       <div>
477 |         <img
478 |           src="/blob.svg?seed=5&extraPoints=5&fill=d414f7"
479 |           alt="blob image 5"
480 |         />
481 |         <button
482 |           class="btn"
483 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=5&extraPoints=5&fill=d414f7"
484 |         >
485 |           Copy URL
486 |         </button>
487 |       </div>
488 |       <div>
489 |         <img
490 |           src="/blob.svg?seed=6&extraPoints=6&fill=c64160"
491 |           alt="blob image 6"
492 |         />
493 |         <button
494 |           class="btn"
495 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=6&extraPoints=6&fill=c64160"
496 |         >
497 |           Copy URL
498 |         </button>
499 |       </div>
500 |       <div>
501 |         <img
502 |           src="/blob.svg?seed=7&extraPoints=7&fill=7dd64d"
503 |           alt="blob image 7"
504 |         />
505 |         <button
506 |           class="btn"
507 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=7&extraPoints=7&fill=7dd64d"
508 |         >
509 |           Copy URL
510 |         </button>
511 |       </div>
512 |       <div>
513 |         <img
514 |           src="/blob.svg?seed=8&extraPoints=8&fill=eab3a5"
515 |           alt="blob image 8"
516 |         />
517 |         <button
518 |           class="btn"
519 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=8&extraPoints=8&fill=eab3a5"
520 |         >
521 |           Copy URL
522 |         </button>
523 |       </div>
524 |       <div>
525 |         <img
526 |           src="/blob.svg?seed=9&extraPoints=9&fill=d69f53"
527 |           alt="blob image 9"
528 |         />
529 |         <button
530 |           class="btn"
531 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=9&extraPoints=9&fill=d69f53"
532 |         >
533 |           Copy URL
534 |         </button>
535 |       </div>
536 |       <div>
537 |         <img
538 |           src="/blob.svg?seed=10&extraPoints=10&fill=4fcc0a"
539 |           alt="blob image 10"
540 |         />
541 |         <button
542 |           class="btn"
543 |           data-clipboard-text="https://blobcdn.com/blob.svg?seed=10&extraPoints=10&fill=4fcc0a"
544 |         >
545 |           Copy URL
546 |         </button>
547 |       </div>
548 |     </section>
549 | 
550 |     <footer class="text-center">
551 |       <nav>
552 |         <a href="https://statically.io/">Statically</a>
553 |         <a href="https://favicone.com/">Favicone</a>
554 |         <a href="https://upset.dev/fonts">Fonts</a>
555 |       </nav>
556 |       <small>Made by <a href="https://upset.dev/">Frans Allen</a></small>
557 |     </footer>
558 | 
559 |     <script>
560 |       let intervalId;
561 | 
562 |       function randomizeImage() {
563 |         const img = document.querySelector('.blob-img');
564 |         img.src = '/blob.svg?t=' + new Date().getTime(); // Force reload with timestamp
565 |       }
566 | 
567 |       // Function to reset the interval
568 |       function resetInterval() {
569 |         clearInterval(intervalId); // Clear the previous interval
570 |         randomizeImage(); // Trigger an immediate randomization
571 |         intervalId = setInterval(randomizeImage, 2000); // Start a new interval
572 |       }
573 | 
574 |       document
575 |         .querySelector('.btn-randomize')
576 |         .addEventListener('click', resetInterval);
577 | 
578 |       // Start the initial interval
579 |       intervalId = setInterval(randomizeImage, 2000);
580 |     </script>
581 | 
582 |     <script>
583 |       var clipboard = new ClipboardJS('.btn');
584 | 
585 |       clipboard.on('success', function (e) {
586 |         e.clearSelection();
587 | 
588 |         showTooltip(e.trigger, 'Copied!');
589 |       });
590 | 
591 |       var btns = document.querySelectorAll('.btn');
592 | 
593 |       for (var i = 0; i < btns.length; i++) {
594 |         btns[i].addEventListener('mouseleave', clearTooltip);
595 |         btns[i].addEventListener('blur', clearTooltip);
596 |       }
597 | 
598 |       function clearTooltip(e) {
599 |         e.currentTarget.setAttribute('class', 'btn');
600 |         e.currentTarget.removeAttribute('aria-label');
601 |       }
602 | 
603 |       function showTooltip(elem, msg) {
604 |         elem.setAttribute('class', 'btn tooltipped tooltipped-s');
605 |         elem.setAttribute('aria-label', msg);
606 |       }
607 |     </script>
608 |   </body>
609 | </html>
610 | 


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