CUTwC 2020 Pot-of-Winks Logos

These logos are available for CUTwC-related content: publicity, merchandise, anything not bringing the Club into disrepute.

It is the experience of the web site maintainer that the idea of having something with a Club Logo on it tends to happen when there is not a convenient time to create one. This page is intended to be a central repository so that we have these designs in a suitable range of variations available in advance.

Please see the end of the page if you need vector logos converted to a PNG image.


The Pot-of-Winks (2020-2021)

It took nearly three years to observe that the aspect ratio of the “pot of winks”, while similar to the other abstract logos, really looked too tall for a “real” winks pot. This was a bit odd given that the source really wasn’t very far from using the official sizes, and the web site maintainer hasn’t bothered to work out what was going on there. The Pot-of-Winks has now been replaced with one of more natural proportions, but the original is archived here. Note that the “realistic” svg version is a massive pain to produce, and so will probably not be recreated in the correct aspect ratio. The bitmap version compresses quite well, so hopefully this is no great loss.

In 2024 the maths were recalculated, and the “new” design from 2023 was discovered to be squashed relative to the actual shape of a pot.

The “pot made of winks” logo is more abstract, relies on colour, and particularly only has a CUTwC connection if combined with a Cambridge Blue glow — the “realistic” version is also pixel art and therefore doesn’t scale arbitrarily (and high-resolution versions are large files; file sizes are shown in parentheses for this design). Despite this, it conveniently doubles as a “layered” image which gives it a mild visual pun for the home page link of the web site, and it’s a more convenient logo shape than some alternatives; it’s also got enough detail for interest viewed large, but enough distinct about the shape that it’s identifiable at very small scale (making it work as a favicon). Note that, although the colours are a little dark because it’s self-shadowing, lightening them quickly makes them look unrealistic; the current version is probably the best balance, after some experimentation. So long as full colour is available, it’s a recommended option in situations where an abstract logo is appropriate. POVRay source for the colour and grey versions is available.

The nature of the design means that different variants will be suitable for different uses. Please use a minimum of 16×16 pixels (preferably 24×24) or 1cm height (whichever is larger) to retain visible detail unless the image is used to complement/echo a larger version of the logo (e.g. as custom bullet points where a larger logo on the same page makes it clear what the small image is supposed to be).

Bitmap: glow as part of the image

The most basic approach: the Cambridge Blue glow in this case uses transparency in the image to allow the glow to fade into the background; this approach will not work for all situations, but is probably the most flexible (without knowing how the image is to be reproduced, it’s about the best we can do, and generating a solid version on a specified background colour is fairly trivial from this starting point). The pixel art nature means that the file size varies depending on the amount of detail desired, with small files being pixellated/blurry when enlarged, and detailed versions producing large files. To avoid unnecessarily large files (and slow downloads or increased demands on computing/storage), please pick a suitable resolution — the web site navigation adaptively uses the 95×95 or 48×48 versions, for example.

Other resolutions are available as favicons for the web site, derived from the 4800×4800 version:

12² 16² 20² 24² 32² 36² 57² 60² 64² 70² 72² 76² 96² 114² 120² 128² 144² 150² 152² 180² 192² 256² 310²

Some places one might want to reproduce the logo use processes that may be incompatible with transparency — notably on T-shirts, drinking receptacles, etc. The following versions are variants of the 4800×4800 image with the glow effect reproduced as a half-tone pattern, which should work better in these situations (the fine half-tone for larger reproductions, the coarse half-tone for smaller ones). The assumption is that high resolution is suitable for print jobs, so smaller versions are not provided.

Bitmap: glow as post-process

In some cases for web use, it can be more helpful to apply the glow as a CSS post-process effect; this allows better overlapping with other object, for example. Safari, in particular, seems prone to clipping the edges of the effect, so it’s a bit fragile compared with integrating it in the image. Here, then, are plain images without the glow — to which the glow can then be applied in CSS. Without the glow, the “Cambridge” connection disappears; the glow is considered part of the logo, so these aren’t intended to be used “naked”. The glow can be relatively slightly larger with smaller images to increase visibility (not used for the image-only version where there is less risk of overlap with other objects hiding the glow). Again, please pick a suitable resolution to manage file size.

These use a Cambridge Blue drop shadow (tripled for density):
filter:drop-shadow(0px 0px npx rgb(163,193,173)) × 3, where n is shown below.

Icon-sized pot-of-winks (glow as styling)
80×80 (8.4KB)
(n=1.5)
WebP (3.9KB)
40×40 (3.7KB)
(n=0.75)
Pot-of-winks (glow as styling)
400×400 (60KB)
(n=5)
WebP (24KB)
4096×4096 (4.8MB)
(n=50)
WebP (477KB)
Icon-sized grey pot-of-winks (glow as styling)
80×80 (4.7KB)
(n=1.5)
WebP (3.3KB)
40×40 (2.2KB)
(n=0.75)
Grey pot-of-winks (glow as styling)
400×400 (50KB)
(n=5)
WebP (15KB)
4096×4096 (2.9MB)
(n=50)
WebP (438KB)

Vector approximation

The bitmap art version is more “physically accurate” (it’s ray traced), the higher-resolution files are large, and (eventually) pixellated. Where this is an issue, there is a (moderately) realistic hand-drawn approximation in SVG (vector) form; this will avoid going “blocky” like the bitmapped versions at larger sizes. However, the highlights in particular are inaccurate (visibly more diffuse, and the left of the yellow especially less bright); it was enough effort to get this far and I’ve given up editing it (for now) — so, unlike most artwork, the guidance is to use one of the bitmap versions unless you absolutely need this.

Note that the the edges of the SVG glow effect are a bit rough, especially at larger sizes, due to calculation accuracy in the SVG renderer — this is more visible on some backgrounds than others.

Pot-of-winks vector art (with integrated glow)
SVG glow (55KB)
Pot-of-winks vector art (with integrated glow) at icon size
Same (shown icon sized)

To mitigate issues with the SVG glow effect, there is a version without it, instead using CSS drop shadow to apply the glow as described in the previous section.

Pot-of-winks vector art (glow as styling)
CSS glow (48KB)
n=5
Pot-of-winks vector art at icon size (glow as styling)
Same (shown icon sized)
n=1.5

Colour-reduced versions

While the pot of winks works best as a “realistic” image, not all printing processes support a full range of colours. In some cases one of the alternative logos would be a better option, but for consistency of branding, simplified forms are available. Note that, without the colours drawing the connection to winks, the polite objects that the monochrome ones resemble are some designs of bottle stopper or honey dipper, and they resemble... some other objects commonly described as “ribbed”... as well, so please think carefully before using them and ensure that the context is obvious.

Pot-of-winks: solid colours
Solid colours
e.g. stickers
Pot-of-winks: separated colours
Separated colours
e.g. embroidery/enamel
Pot-of-winks: separated colours/text border
+ text ring,
light
Pot-of-winks: separated colours/text border
+ text ring,
dark
Pot-of-winks: monochrome, dark background
Mono, light
Pot-of-winks: monochrome, light background
Mono, dark

PNG generator

For convenience, this form converts the vector logos above to a requested size (and background colour), which can then be downloaded as a png (right click, or your browser’s equivalent, and “save image as” or similar). This conversion is performed entirely in your browser, so don’t blame me if the size you request is too big.