logo d'article

100%

logo d'article

✓ Published0🌍 Public

Last edited Apr 18, 2015

Created on Apr 18, 2015

This example shows how to automatically generate a standardized square logo for an article when no explicit logo is provided. It first scans the article’s documents for an image file (JPG, GIF, or PNG) and uses that as the logo, otherwise it falls back to a user-supplied logo. The chosen image is then cropped and resized to 100×100 pixels using SPIP’s `image_passe_partout` and `image_recadre` filters. The rendering is handled through a SPIP template pipeline that calls a custom PHP function, `traiter_logo_article`, which uses `recuperer_fond` to render the logo snippet.

AI-generated description

Similar vizzes

Loading thumbnail…

Revised D3 Logo

This example presents a geometrically precise reconstruction of the D3 logo, replacing cubic Béziers with strictly circular arcs and straight lines. The SVG rendering shows the logo’s path alongside a grid of construction lines, key anchor points, and intersecting circles that define the arcs. The code computes several points via circle-line and circle-circle intersection, using SVG elements like `<path>`, `<circle>`, and `<line>` to visualize the underlying geometry. The result highlights how the logo’s shape is derived from a small set of overlapping radii and horizontal guides.

Mmbostock

48% match

Loading thumbnail…

WebPlatform.org SVG Logo

This example recreates the WebPlatform.org logo as a scalable SVG graphic, combining geometric line shapes and text in the Bitter web font. The logo displays eight colored segments—orange, red, cyan, purple, and blended hues—formed by reusing two path definitions with transforms and clipping paths. The SVG markup uses inline styles, `<use>` elements, and `<clipPath>` to layer the shapes precisely. The result is a crisp, responsive logo suitable for Retina displays, print, and presentation slides, with selectable text and potential for animation or interactivity.

Mmbostock

48% match

Loading thumbnail…

Twitter SVG Logo

This example renders the Twitter logo as a single SVG path built entirely from elliptical arc segments, rather than the more common cubic Bézier curves. The path data specifies each curve using SVG’s `A` command with explicit radii and rotation. The author derived the arc geometry from circle-circle intersection math, referencing Upperdog Interactive’s CSS-based logo as a visual guide. The result is a clean, mathematically precise vector approximation of the logo, shown in a light blue fill on a plain background.

Mmbostock

47% match

Loading thumbnail…

D3 Logo

This example displays the D3.js logo as a purely vector-based SVG graphic. It defines a custom path, assigned the ID "deethree", which encodes the logo's shape through a series of arc and line commands. The graphic is first rendered as a thick black outline using a `<use>` element with a stroke, then duplicated with a white fill. The implementation directly leverages the SVG `<defs>` and `<use>` tags within the HTML markup, with no JavaScript libraries involved.

LLGBY4

47% match

Loading thumbnail…

Gist efe06cf99253646a0da41501d118459a

This example demonstrates a Python function that automatically adds watermarks and logos to images. It opens an input image, resizes a secondary watermark image to 70% of the image width and a logo to 15% of the width, then pastes the watermark at the center and the logo at the bottom-left corner using the PIL `Image.paste` method with alpha-channel masks. The process uses `Image.open` with `convert('RGBA')` to handle transparency, and finally saves the composited result in RGB format.

CCharlesFr

47% match

Loading thumbnail…

Logo design

A simple SVG logo presents the wordmark "V z Hub" inside a black rounded rectangle, paired with a white circular dot and stem that form the letter "i." D3 selection methods append the SVG container, groups, and individual shape elements, while CSS classes style the rectangle and large monospaced text. The layout positions elements with fixed pixel coordinates derived from the 960-by-800 viewport, demonstrating a static, code-driven design without interaction or data binding.

NNita

46% match

Loading thumbnail…

Gist 4636174

This example demonstrates a web service that converts an SVG file, passed by URL, into a PNG image. The code first validates the incoming `url` parameter against an HTTP/HTTPS pattern ending in `.svg`, then downloads the file locally. It relies on the `rsvg-convert` command-line tool to perform the rasterization, with ImageMagick’s `convert` as an alternate. The resulting PNG is streamed back to the client with the appropriate `Content-Type` header, and temporary files are cleaned up. The script integrates with the SPIP framework, using its `inc/distant` and `abstract_sql` includes for remote file handling.

PPhilippe Rivière

46% match

Loading thumbnail…

D3 Logo

The D3 logo is rendered as a stylized “d3” in a 400×400 SVG viewport, with the letterforms clipped from three overlapping linear gradients in orange and red. The example demonstrates the official logo artwork directly from the d3-logo repository, embedded via an `<img>` tag in a minimal HTML page. The SVG uses a `clipPath` to define the letter shapes, while the gradients—`gradient-1`, `gradient-2`, and `gradient-3`—paint the clipped areas with smooth color transitions. The rendering is static, with no animation or interaction.

Mmbostock

45% match