CUTwC 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 we have various designs available when needed.

Technically, there is not really an "official CUTwC logo"; alternatives exist if you prefer.

In most cases, click an image or text to download.
Very large or very small images are linked by text.

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


The text logo should be used where the name "CUTwC" is significant and where the association with tiddlywinks is non-obvious (where a more abstract logo would be meaningless). Used inline in text, the height of the text in the logo should match the height of capital lettering in the surrounding font. The logo should not be used below the size where the lettering can be distinguished; the "16px" height used in the inline colour logo on the home page is probably near the limit. For smaller text height consider the "CUTWC" wink text, below. The colour version of both is obviously preferred, since it makes the wink stand out and contains the Cambridge Blue reference.

CUTwC text logo
Colour
CUTwC monochrome text logo
Monochrome
CUTwC monochrome borderless text logo
Borderless
“Tw” abbreviation

The “Tw” abbreviation may be useful as a narrower marker to complement the full name. It is probably too abstract to be used without the "CUTwC" logo providing context, but unlike the other designs it is clearly derived from the full "CUTwC" version.

Squarer CUTwC 'Tw' text logo
Colour
Squarer CUTwC 'Tw' monochrome text logo
Monochrome
Squarer CUTwC 'Tw' borderless monochrome text logo
Borderless

The Pot-of-Winks (2020-2023)

On the Pot-of-Winks

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.

The "pot made of winks" logo is a more abstract design, relies on colour, and particularly only has a CUTwC connection if combined with a Cambridge Blue glow — the "realistic" version is also pixel art. It conveniently doubles as a "layered" image as 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 also has enough detail for large viewing while being identifiable at very small scale (e.g. as a favicon).

So long as full colour is available, the Pot-of-Winks is a recommended option in situations where an abstract logo is appropriate, and in particular where a relatively square logo is needed.

POVRay source for the colour and grey versions (just of the winks) 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 explains the small blurry image).

Glow as part of the image

The Cambridge Blue glow here uses transparency in the image to fade into the background; this approach will not work for all situations, but is probably the most flexible. The pixel art make file size vary with the amount of detail; small files are pixellated/blurry when enlarged, and detailed versions are large files. Please try to pick a suitable resolution — the web site banner picks adaptively, for example.

The glow in this case is generated manually.

The process in Photoshop starts with the rendered image just of the winks. The "glow" expands the image by 1.2× — the PovRay source allows for this extra space if an 11.03° viewing angle is used, but an angle of 9.2° is a "tight fit" and the image will need to be expanded correspondingly. Most images use a square aspect ratio, although the larger ones for desktop backdrop use have a more precise 8:7 ratio of width to height; those designed to have a glow added retrospectively are sized expecting this 1.2 factor to be applied. The process to add a glow to a rendered PNG in PhotoShop is:

  • Expand the image by a factor of 1.2 if necessary.
  • Convert to 16-bit mode.
  • If generating a "light" version, apply a gamma of 1.5 in the "levels" dialogue.
  • Duplicate the initial layer to what we'll call layer 2.
  • Create a layer mask for layer 2 from its transparency.
  • Temporarily disable layer 2's layer mask.
  • Select the colour part of layer 2.
  • Fill layer 2 entirely with Cambridge Blue (RGB(163,193,173)).
  • Re-enable layer 2's layer mask.
  • To the layer mask, apply a Gaussian blur of radius 1/20 the unexpanded image width (or 1/24 of the width if the image was already expanded).
  • Adjust the levels of the layer mask to 5 at the low end and 128 at the high end, with a gamma of 2.00.
  • Move layer 2 below layer 1.
  • Merge layer 2 and layer 1.
  • Convert back to 8-bit mode.
  • If necessary, assign the sRGB profile to the image.
  • The naming convention used here is a "G" suffix for images with "glow" and "GL" for "glow, lightened".

The grey version of the image uses the same process but converts to 16-bit "Grayscale" mode, and uses the default interpretation of Cambridge Blue in that mode. The image is converted back to RGB before saving.

Different resolutions

Alternatives are available in a range of smallish resolutions:

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

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

These versions are sized for use as desktop backgrounds for common 16:9 resolutions
Fit short dimensionFill long dimension
Landscape FHD 4K 8K FHD 4K 8K
Portrait FHD 4K 8K FHD 4K 8K
Lighter variant (better for light background)

Glow as part of the image, lighter

The default colours are a little dark on a light background as it's self-shadowing.

Lightened versions the square renditions exist that are suited for lighter backgrounds where adaptation makes the default colours look dark; the web site uses these lighter versions for the navigation when not in "dark mode" — on a dark background the lightened versions look washed out.

Alternatives are available in a range of smallish resolutions:

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

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

Monochrome version

Glow as part of the image, monochrome

The varying colours can map strangley to a monochrome representation; here therefore is a version with the winks a uniform grey colour.

Half-toned version (for merchandise)

Glow as part of the image, half-toned

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.

Glow as a post-process effect

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.

Alternatives are available in smallish resolutions, sized to allow the glow to be added (not tightly cropped):

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

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

Lighter version for light backgrounds
Monochrome version

Glow as post-process, monochrome

Note: These versions have not been tightly cropped, so the images contain space for the glow.

Desktop backgrounds with no glow

Desktop backgrounds, no glow

Desktop background sized assuming 20% padding to be added for glow:
Fit short dimensionFill long dimension
Landscape FHD 4K 8K FHD 4K 8K
Portrait FHD 4K 8K FHD 4K 8K
Desktop background sized fully filling the space with no glow:
Fit short dimensionFill long dimension
Landscape FHD 4K 8K FHD 4K 8K
Portrait FHD 4K 8K FHD 4K 8K
Colour-reduced line art versions

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.

These are all resolution-independent line art; see the PNG generator if you need a specific resolution.

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,
dark-on-light
Pot-of-winks: monochrome, light background
Mono, dark-on-light
Pot-of-winks: monochrome, dark background
Mono, light-on-dark
Pot-of-winks: separated colours/text border
+ text ring,
light-on-dark

“CUTWC” wink text (2021)

On when this version is appropriate

The "CUTwC text logo" above has sensible-looking lettering, a clear tiddlywink, and a little bit of a visual pun in the pot effect — it works as a stand-alone design. However, for plain text uses, it is a little tall, and this can be inconvenient; it is also "a logo" of itself, which is distracting as an adjuct to other designs where lettering (with some mild branding) is more important — such as adding a reference to the name of the Club to the Pot-of-Winks or Pot Rampant.

For situations that require wider, plainer wording (such as banners), there is an alternative design based on circles (hence a tenuous tiddlywinks connection); apparently Bauhaus/geometric designs are popular at the moment, too. The coloured version "works" only at larger sizes (like a banner) — it is too visually "busy" otherwise, but adds some visual interest at scale (like graffiti). Other versions work acceptably as text alongside a logo, since their design is more clearly textual and less graphical. Please ensure sufficient contrast (which will depend on size) for the solid logo. Consider the mono logo where an extremely short logo is needed (including inlining a logo in text with a small font), since it is distinguishable at smaller vertical sizes than the pot-of-winks or CUTwC text logos.

CUTWC circles: colours
Colours
CUTWC circles: filled Cambridge Blue
Filled
CUTWC circles: monochrome
Outline
CUTWC circles: solid
Solid
CUTWC circles: mono
Mono
CUTWC circles: mono
Inverse
Pure CSS version

It has come to the web site maintainer's attention that embedded images in emails don't work as well as you'd hope, which is a pain if you want a logo in a signature. However, there's a chance that some basic CSS styling will. To that end, here's approximately the same logo described in CSS border terms (sadly the sizes have to be chosen to be integer pixels, or rounding errors make the result inconsistent, so it's a little larger than ideal):

The source for that, should you wish to past it into an email program, is:

<style>.cutwclogo_container {position:relative;border-color:#A3C1AD;width:170px;height:32px;display:inline-block;} .cutwclogo_c1 {position:absolute;width:0px;height:0px;border:16px solid;border-color:inherit;border-right-color:transparent;border-radius:16px;left:0px;top:0px;} .cutwclogo_u1 {position:absolute;width:0px;height:0px;border:solid;border-color:inherit;border-width:0 16px 14px 16px;border-bottom-left-radius:16px 14px;border-bottom-right-radius:16px 14px;left:31px;top:18px;} .cutwclogo_u2 {position:absolute;width:0px;height:0px;border:solid;border-color:inherit;border-width:9px 7px 9px 7px;left:31px;top:0px;} .cutwclogo_t1 {position:absolute;width:0px;height:0px;border:solid 7px;border-color:inherit;left:49px;top:0px;} .cutwclogo_t2 {position:absolute;width:0px;height:0px;border:solid;border-color:inherit;border-width:16px 7px 16px 7px;left:67px;top:0px;} .cutwclogo_t3 {position:absolute;width:0px;height:0px;border:solid 7px;border-color:inherit;left:85px;top:0px;} .cutwclogo_w1 {position:absolute;width:0px;height:0px;border:solid;border-color:inherit;border-width:0 16px 14px 16px;border-bottom-left-radius:16px 14px;border-bottom-right-radius:16px 14px;left:85px;top:18px;} .cutwclogo_w2 {position:absolute;width:0px;height:0px;border:solid;border-color:inherit;border-width:0 16px 14px 16px;border-bottom-left-radius:16px 14px;border-bottom-right-radius:16px 14px;left:103px;top:18px;} .cutwclogo_w3 {position:absolute;width:0px;height:0px;border:solid;border-width:9px 7px 9px 7px;border-color:inherit;left:103px;top:0px;} .cutwclogo_w4 {position:absolute;width:0px;height:0px;border:solid;border-width:9px 7px 9px 7px;border-color:inherit;left:121px;top:0px;} .cutwclogo_c2 {position:absolute;width:0px;height:0px;border:16px solid;border-color:inherit;border-right-color:transparent;border-radius:16px;left:139px;top:0px;} </style><span class="cutwclogo_container"><span class="cutwclogo_c1"></span><span class="cutwclogo_u1"></span><span class="cutwclogo_u2"></span><span class="cutwclogo_t1"></span><span class="cutwclogo_t2"></span><span class="cutwclogo_t3"></span><span class="cutwclogo_w1"></span><span class="cutwclogo_w2"></span><span class="cutwclogo_w3"></span><span class="cutwclogo_w4"></span><span class="cutwclogo_c2"></span></span>

(Change the "#A3C1AD" to "black" or "white" if you need a monochrome version.)


The Pot Rampant (1980s)

The Pot Rampant has been used as a logo since the 1980s. This was reconsidered relatively recently on the basis that it's not clearly associated with Cambridge and also doesn't scale either up (in terms of being simplistic) or down (in terms of retaining distinguishable features: Tiny Pot Rampant — c.f. Tiny Pot-of-Winks) particularly well. It remains appropriate in historical references.

The Pot Rampant (colour)
Colour
The Pot Rampant (grey)
Grey
The Pot Rampant (monochrome)
Solid
The Pot Rampant (monochrome dark background)
Inverse

QR code

The following QR code points to https://cutwc.org (not strictly a logo, but included here because it's likely to be needed in similar circumstances).

Note the converter at the end of the page if you need this in bitmap form.

https://cutwc.org QR code
QR code for https://cutwc.org
https://etwa.org QR code
QR code for https://etwa.org

These logos date back to CUTwC events in the 1960s (notably ties and early Winkings World), and remain appropriate in reference to historical events. They presumably refer more to the excitement surrounding new-fangled nuclear energy than to the actual shape of a pot at the time. Unfortunately they scale to small sizes very badly (e.g. Tiny filled atomic logo and Tiny solid orbit atomic logo).

'Atomic' CUTwC logo (filled)
Solid
PDF
'Atomic' CUTwC logo (filled orbits)
Solid orbits
PDF
'Atomic' CUTwC logo (outline orbits)
Outline orbits
PDF
'Atomic' CUTwC logo (2-colour)
2-colour
PDF
'Atomic' CUTwC logo (3-colour)
3-colour
PDF

Background mat

The CUTwC site background is provided in case it's useful for presentations, slides, etc. The dark mode of the web site uses CSS to darken the light version, which saves space and cache (it avoids a reload when the site colours are changed), but a manually-generated dark version is provided here where that is not an option.

Pale background mat
Pale mat (4.5KB)
Dark background mat (CSS)
Dark mat (CSS)
Explicit dark background mat
Explicit dark mat (11KB)
How the mat was made

For historical interest: This background is arranged to tile in both dimensions by using the coordinates to trace loops in four-dimensional space as an input to a Perlin noise function (with different scales in different dimensions to represent the way a mat is squashed when it is rolled up). The plane was shaded by rendering it on custom ray tracing hardware in the 1990s (possibly the noise function actually perturbed a normal and some lighting was applied, I've forgotten), and then "hairs" were drawn on manually and the result heavily compressed. It's also been tweaked a couple of times to better represent the colour of an actual felt winks mat. Needless to say, it is heavily over-engineered even by the standards of this site.


📎 You seem to be looking for a logo for Cambridge University Tiddlywinks Club.
Did you mean to look for a logo for the English Tiddlywinks Association?

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. Users of Firefox have the option to turn off antialiasing in this conversion (causing jagged edges but avoiding intermediate pixel colours).