defyner-logo

Defyner logo embed

Lightweight, self-contained logo animations for embedding in Webflow (or any website). Pure HTML + WebGL — no frameworks, no build step.

What’s here

defyner-embed/
├── defyner-light.html              # full wordmark, light theme (black), ~42 KB. Aspect 2.5:1
├── defyner-dark.html               # full wordmark, dark theme (white),  ~42 KB. Aspect 2.5:1
├── defyner-shorthand-light.html    # D-only, light theme,                ~25 KB. Aspect 1:1
├── defyner-shorthand-dark.html     # D-only, dark theme,                 ~25 KB. Aspect 1:1
├── fractals/                       # 30 fractal images, ~185 KB each
│   ├── fractal-01.webp
│   ├── ...
│   └── fractal-30.webp
├── wordmark-black.png              # Baked full wordmark (alpha mask). Colour is set per-variant by the shader.
├── wordmark-d-black.png            # Baked D-only mask, used by the shorthand variants.
└── build/                          # Build scripts (only needed if you want to regenerate)

Each HTML file is fully self-contained: the wordmark image is inlined as base64, and the only external resource is the fractal image (loaded on demand at runtime).

The canvas is responsive — it fills whatever iframe size you give it, auto-letterboxing or pillarboxing to its target aspect ratio (2.5:1 for the full wordmark, 1:1 for the shorthand).

Live URLs

Deployed via GitHub Pages from the private repo defynerltd/defyner-logo, served on the custom domain embeds.defyner.io. URLs are publicly accessible:

https://embeds.defyner.io/defyner-light.html — full wordmark, light
https://embeds.defyner.io/defyner-dark.html — full wordmark, dark
https://embeds.defyner.io/defyner-shorthand-light.html — D only, light
https://embeds.defyner.io/defyner-shorthand-dark.html — D only, dark

Embedding in Webflow

Use Webflow’s “Embed” component (HTML embed block):

<iframe
  src="https://embeds.defyner.io/defyner-light.html"
  width="800" height="320"
  frameborder="0" scrolling="no"
  style="display:block;border:0;background:transparent;"
  loading="lazy"
  title="Defyner">
</iframe>

Pick whatever width and height fit your layout. The full-wordmark variants render at 2.5:1 aspect; the shorthand (D-only) variants render at 1:1 aspect. If the iframe is a different shape, the canvas pillarboxes or letterboxes inside it with transparent margins; the wordmark/D stays centred. For zero margins, size the iframe at the variant’s native aspect — e.g., 800×320 for full wordmark, 400×400 for shorthand.

For the shorthand variant, use:

<iframe
  src="https://embeds.defyner.io/defyner-shorthand-light.html"
  width="400" height="400"
  frameborder="0" scrolling="no"
  style="display:block;border:0;background:transparent;"
  loading="lazy"
  title="Defyner D">
</iframe>

The iframe is transparent — whatever colour or image sits behind it on the Webflow page shows through everywhere except the wordmark/D itself.

URL parameters

Append these to the iframe src to control which fractal loads:

URL	Behaviour
`https://embeds.defyner.io/defyner-light.html`	Random fractal on each load (default)
`https://embeds.defyner.io/defyner-light.html?fractal=12`	Always use fractal-12
`https://embeds.defyner.io/defyner-light.html?seed=abc`	Deterministic — same seed → same fractal
`https://embeds.defyner.io/defyner-light.html?src=https://...`	Use any external image as the displacement source (e.g., brandfetch). Image host must allow CORS.

Local testing

cd defyner-embed
python3 -m http.server 8765
# Open http://localhost:8765/defyner-light.html in a browser

WebGL textures require HTTP (not file://) due to CORS, so always serve via a local server.

Rebuilding assets

Only needed if you want to update the wordmark or change fractal encoding. Requires Node.js.

cd build
npm install        # installs sharp (one-time)
node bake-wordmark.js     # regenerates wordmark-black.png
node encode-fractals.js   # re-encodes the 30 fractal JPGs to WebP
node generate-html.js     # regenerates the 2 HTML variant files

generate-html.js reads the wordmark PNG and produces self-contained HTML files with the base64-inlined wordmark. Run it after any wordmark or shader change.

Performance notes

Per-embed wire weight: ~42 KB HTML + ~185 KB fractal = ~230 KB total.
The animation pauses automatically when the browser tab is hidden.
loading="lazy" on the iframe defers fractal fetch until the iframe scrolls near the viewport.
Internal canvas resolution scales with devicePixelRatio (capped at 2× for battery).
Runs at 60 fps on typical hardware at any reasonable embed size.

Notes on the look-and-feel

The animation parameters are baked into the fragment shader as GLSL consts:

displacement strength 0.2, pulse range 0.15, pulse speed 0.3 Hz, factor 0.05
noise strength 0.015, scale 15, contrast 0.3, smoothness 0.8, speed 0.3
slide speed 0.05 on the Y axis

If you need to tune any of these, edit the GLSL constants at the top of build/generate-html.js, then re-run node generate-html.js.

The wordmark positioning is controlled by three constants near the top of build/bake-wordmark.js:

WORDMARK_WIDTH_FRAC — how much of the canvas the wordmark fills horizontally (default 0.91)
WORDMARK_CX_FRAC / WORDMARK_CY_FRAC — where the wordmark’s bbox centre sits in the canvas (default 0.534, 0.545)

After changing these, run node bake-wordmark.js && node generate-html.js.