OLED Animation Maker OLED Maker

Draw OLED Shapes and Get Arduino Code: drawCircle, drawRect, drawLine

By Ashish · June 27, 2026 · 6 min read · Code generation

Drawing circles, rectangles and lines on a 128x64 SSD1306 OLED and exporting Arduino GFX primitive code

Most OLED tools turn everything you draw into a giant bitmap byte array plus a single drawBitmap() call. That is great for animations and photos, but for a screen built from shapes and text it is wasteful and impossible to tweak by hand. The free OLED animation maker now has a Vector code mode that exports clean Adafruit GFX / U8g2 primitives — drawLine, drawRect, drawCircle, and real text — exactly like hand-written Arduino code.

Bitmap code vs vector (GFX primitive) code

  • Bitmap — every pixel is packed into a PROGMEM array and drawn with drawBitmap(). Best for animations, imported GIF/PNG, dithered photos, and freehand pixel art.
  • Vector / primitives — each shape becomes a readable GFX call. Best for static UI screens made of circles, rectangles, lines, and text. Smaller code, and easy to edit the coordinates or colors directly in your sketch.

How to draw shapes and export GFX code

  1. Open the tool and click ✏️ Draw.
  2. Use the Line, Rect, Filled Rect, Circle, and Text tools to compose your screen.
  3. Grab the ✋ Move tool to drag, and pull the corner/edge handles to resize any shape, icon, or text.
  4. Click ⚡ Get the Code, then flip the header toggle from Bitmap to Vector.
  5. Copy or download the Arduino .ino (Adafruit SSD1306 or U8g2) or MicroPython output.

Example: generated Adafruit GFX code

A circle, a rectangle and a line drawn on a 128×64 SSD1306 export like this:

void renderFrame0() {
  display.clearDisplay();
  display.drawRect(40, 20, 30, 15, SSD1306_WHITE);
  display.drawLine(10, 50, 60, 50, SSD1306_WHITE);
  display.drawCircle(90, 30, 10, SSD1306_WHITE);
  display.display();
}

Switch the library to U8g2 and the same drawing becomes u8g2.drawFrame(), u8g2.drawLine(), and u8g2.drawCircle(); choose MicroPython for display.rect(), display.line(), and display.ellipse() via framebuf.

Icons and images stay as efficient bitmaps

Vector mode is a hybrid: hand-drawn shapes and text become primitives, while anything that has no clean geometry — imported images, GIF frames, freehand strokes, and icons from the built-in icon library — is packed into a compact drawBitmap(). So a screen with a battery outline, a label, and a detailed logo gives you crisp drawRect/println calls plus one small bitmap for the logo. You always get pixel-faithful output.

200,000+ icons on the canvas

Click the 🔣 icon button in the Draw toolbar to search a library of 200k+ open-source monochrome icons (Material, Tabler, Lucide, Bootstrap, pixel-art sets and more). Drop one onto the canvas, then move and resize it like any other layer — perfect for status bars, weather glyphs, and UI mockups.

When should I use bitmap mode instead?

  • Animations — multi-frame playback is far cleaner and faster as bitmaps.
  • Photos / dithered images — no shapes to recover, so bitmap is exact.
  • Detailed pixel art — keep it as a bitmap for perfect fidelity.

That is why Bitmap stays the default; Vector is a one-click toggle when you want it.

Popular searches: draw oled shapes arduino · drawcircle arduino oled · drawrect ssd1306 · oled gfx code generator · adafruit gfx primitives · u8g2 draw shapes · oled icon library · arduino oled code generator

Draw shapes → get Arduino code, free

Vector or bitmap export, a 200k+ icon library, move & resize on canvas — no install.

Open Tool →

Related