Forró da Capita Graphics

For our snug dance venue in the Prinzenallee 58, Berlin I've built a website with Astro. With it came a logo and a mascot created using the free and open-source vector editor Inkscape .

I'll shortly walk you through the design process of the logo and mascot which you can also see on the Forró Da Capita website

For some playful letters I stole from the cover design of the wonderful Bob Fosse movie Cabaret and constructed the missing letters from the six available ones.

The final logo has to be exported as a plain SVG. The SVG code is cluttered with metadata, and unnecessary precision that can be removed with a SVG minifier.

I liked the Devina SVG minifier best. Check what you can remove without breaking your SVG. I didn't merge path because I wanted each letter to be seperate. The minifier shows you the bytes saved and the visual difference between the original and the minified SVG.

The final SVG path are equipped with some selected attributes to add color, a css glow, and a stroke. The stroke is transparent and pretty fat, to apply the glow on hover and not miss the mouse.

cabaret 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) --> <svg width="303.98163mm" height="197.50055mm" viewBox="0 0 303.98163 197.50055" version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs1" /> <g id="layer1" transform="translate(65.61667,-17.72708)"> <path id="path2-4" style="fill:#000000" d="m -14.875581,105.23233 c -19.062561,0.11868 ...
<svg viewBox="0 0 304 197.5">
<path d="M50.7 87.5c-19 .2-39.6 ...
<path
id="F"
class="purple_glow fill-[#7f40e5]"
stroke="transparent"
stroke-width="20"
d="M-34 32.9a77 77 0 0 1-26.3 ...

<style>
path {
transition:
  filter 0.5s ease,
  fill 0.5s ease;
}

/* Orange glow effect */
.yellow_glow:hover {
filter: drop-shadow(0 0 2px #ffa500) drop-shadow(0 0 5px #ffa500) drop-shadow(0 0 10px #fdc85f);
fill: #fff6a9;
}

.green_glow:hover {
filter: drop-shadow(0 0 2px #109c15) drop-shadow(0 0 5px #27aa39) drop-shadow(0 0 10px #0ba708);
fill: #aff2bb;
}

.darkorange_glow:hover {
filter: drop-shadow(0 0 2px #ff9f00) drop-shadow(0 0 5px #ff8c00) drop-shadow(0 0 20px #fd5800);
fill: #fff6a9;
}

.blue_glow:hover {
filter: drop-shadow(0 0 2px #5852ff) drop-shadow(0 0 5px #0037ff) drop-shadow(0 0 10px #497cf2);
fill: #d3d9ff;
}

.navy_glow:hover {
filter: drop-shadow(0 0 2px #000080) drop-shadow(0 0 5px #0000cd) drop-shadow(0 0 10px #002395);
fill: #caf3f8;
}

.red_glow:hover {
filter: drop-shadow(0 0 5px #ff5252) drop-shadow(0 0 15px #ff0000) drop-shadow(0 0 20px #c5400b);
fill: #ffc7c7;
}

.pink_glow:hover {
filter: drop-shadow(0 0 2px #ff52f3) drop-shadow(0 0 5px #ff00d4) drop-shadow(0 0 10px #c50baf);
fill: #ffc7fa;
}

.violet_glow:hover {
filter: drop-shadow(0 0 2px #d752ff) drop-shadow(0 0 5px #bb00ff) drop-shadow(0 0 10px #840bc5);
fill: #f3c7ff;
}

.lightblue_glow:hover {
filter: drop-shadow(0 0 2px #52ffeb) drop-shadow(0 0 5px #00fff7) drop-shadow(0 0 10px #08dee6);
fill: #c7fdff;
}

.darkred_glow:hover {
filter: drop-shadow(0 0 2px #cf1020) drop-shadow(0 0 5px #be0032) drop-shadow(0 0 10px #af002a);
fill: #fcbdcf;
}

.gold_glow:hover {
filter: drop-shadow(0 0 2px #ffd700) drop-shadow(0 0 5px #fcc200) drop-shadow(0 0 10px #ffcc00);
fill: #f7ef79;
}

.lime_glow:hover {
filter: drop-shadow(0 0 2px #86c626) drop-shadow(0 0 5px #7fff00) drop-shadow(0 0 10px #7cfc00);
fill: #e4fe20;
}

.purple_glow:hover {
filter: drop-shadow(0 0 2px #966fd6) drop-shadow(0 0 5px #bf00ff) drop-shadow(0 0 10px #b19cd9);
fill: #e6e6fa;
}
</style>
Mascot

I recruted the prince of a well-know cookie brand called Prinzenrolle for our dance. After his conversion he is sporting a traditional hat from the Northeast of Brazil and changed his boots for flip-flops.

Chart detail Chart detail

The prince is a few decades old, but has more character than his successors, he is also one-dimensional which makes him easier to redraw in Inkscape. I was lucky to find a free SVG of the modern Prinzenrolle logo to reconstruct and hang it around the waist of our refreshed prince.

The most important Inkscape skill for this were working with paths and these specific routines:

Path > Trace Bitmap
Path > Object to Path
Path > Simplify (Crtl+L)

Nick's tutorials were of great help as well.

Chart detail