<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: codereder</title>
    <description>The latest articles on DEV Community by codereder (@ywbcoder).</description>
    <link>https://dev.to/ywbcoder</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4077420%2Fe64186f6-32be-4a6f-85b1-ca4716863279.jpg</url>
      <title>DEV Community: codereder</title>
      <link>https://dev.to/ywbcoder</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ywbcoder"/>
    <language>en</language>
    <item>
      <title>How I built a free Minecraft circle generator with 3,100 pre-rendered pages</title>
      <dc:creator>codereder</dc:creator>
      <pubDate>Fri, 14 Aug 2026 09:35:40 +0000</pubDate>
      <link>https://dev.to/ywbcoder/how-i-built-a-free-minecraft-circle-generator-with-3100-pre-rendered-pages-2cai</link>
      <guid>https://dev.to/ywbcoder/how-i-built-a-free-minecraft-circle-generator-with-3100-pre-rendered-pages-2cai</guid>
      <description>&lt;p&gt;If you've ever tried to build a circle in Minecraft, you know the problem: the game is a grid of cubes, so there are no curves — only pixelated approximations. Get one block wrong and the whole ring looks lopsided.&lt;/p&gt;

&lt;p&gt;I built a free tool that solves this: &lt;a href="https://pixelcircle.online" rel="noopener noreferrer"&gt;CircleGen&lt;/a&gt; — a static site that turns any diameter into a block-by-block blueprint you can copy straight into the game.&lt;/p&gt;

&lt;h2&gt;
  
  
  The math: midpoint circle algorithm
&lt;/h2&gt;

&lt;p&gt;A Minecraft circle is just a discrete circle rendered on a square grid. The classic way to compute it is the &lt;a href="https://en.wikipedia.org/wiki/Midpoint_circle_algorithm" rel="noopener noreferrer"&gt;midpoint circle algorithm&lt;/a&gt;: instead of evaluating every point of the circle equation, you walk the arc in one octant and mirror it to the other seven, using an error term to decide whether the next block steps horizontally, vertically, or diagonally.&lt;/p&gt;

&lt;p&gt;Two properties matter for building:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Odd diameters give a true center block.&lt;/strong&gt; With an even diameter the "center" falls between four blocks, so the pattern looks off. That's why all my sizes are odd — 5, 7, 9 ... up to 256.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The outline vs. filled difference is big.&lt;/strong&gt; A filled 25-block circle needs 477 blocks; its outline needs only 68. Blueprints that don't tell you which one you're looking at are useless in survival mode, where you might be mining every single block.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Turning math into pages: pre-rendered SEO at zero backend cost
&lt;/h2&gt;

&lt;p&gt;The interesting engineering choice: every size and shape is a &lt;strong&gt;real static page&lt;/strong&gt;, generated at build time with Next.js static export. &lt;code&gt;/circle/101/&lt;/code&gt; isn't a dynamic route that computes on request — it's a pre-rendered HTML file that already contains the full blueprint grid, the exact block count, and a per-size FAQ.&lt;/p&gt;

&lt;p&gt;Why bother? Three reasons:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;It's genuinely useful data.&lt;/strong&gt; Each page answers the question you actually searched for: "how many blocks is a 101-block circle?" (316), "what should I use it for?" (stadiums, large temples). That's the kind of computed fact a copy-paste article can't provide.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The math runs once, at build time.&lt;/strong&gt; Visitors get instant pages with zero server cost — the whole site is static files on a CDN.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Each language gets its own pages.&lt;/strong&gt; The site ships in 11 languages (English, German, Spanish, French, Portuguese, Turkish, Italian, Russian, Polish, Indonesian, Chinese), each with its own pre-rendered shape pages and hreflang alternates — not machine-translated widgets, but proper localized pages.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  What the tool does
&lt;/h2&gt;

&lt;p&gt;Pick a shape (circle, oval, sphere, dome, arc, torus, ellipsoid), a diameter, and a style (outline, chart, filled), and you get:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a pixel-perfect blueprint grid you can copy block by block&lt;/li&gt;
&lt;li&gt;a draggable 3D preview&lt;/li&gt;
&lt;li&gt;build-order animation and layer slicing for spheres and domes&lt;/li&gt;
&lt;li&gt;PNG / SVG / CSV / JSON export&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/setblock&lt;/code&gt; commands with your world coordinates&lt;/li&gt;
&lt;li&gt;a 45-block color palette and "share this exact state" links&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Everything runs in the browser — no downloads, no accounts. It works identically for Java and Bedrock editions, which matters more than you'd think: the same block grid applies to both.&lt;/p&gt;

&lt;h2&gt;
  
  
  The part that took the longest
&lt;/h2&gt;

&lt;p&gt;Not the math — that's 30 lines. The hard part was the content around it: writing the per-size FAQs, the size guide (diameter 15 = fountain base, 101 = stadium), and doing all of it consistently in 11 languages. A generator gets you 90% of the way; the other 10% is explaining, in each language, &lt;em&gt;what the numbers mean for your build&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;The code is open source: &lt;a href="https://github.com/ywb-coder/Minecraft-Circle--Generator" rel="noopener noreferrer"&gt;github.com/ywb-coder/Minecraft-Circle--Generator&lt;/a&gt;. If you've built something similar — a generator, a calculator, anything with pre-rendered data pages — I'd love to hear how you structured it. And if you just want a blueprint for your next build: &lt;a href="https://pixelcircle.online" rel="noopener noreferrer"&gt;pixelcircle.online&lt;/a&gt; — it's free.&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>minecraft</category>
      <category>javascript</category>
      <category>nextjs</category>
    </item>
  </channel>
</rss>
