<?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: alhassan</title>
    <description>The latest articles on DEV Community by alhassan (@alhassankhalil).</description>
    <link>https://dev.to/alhassankhalil</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%2F4207104%2F6a42b0fe-57e9-4bf9-a502-eaf24c1cba80.png</url>
      <title>DEV Community: alhassan</title>
      <link>https://dev.to/alhassankhalil</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/alhassankhalil"/>
    <language>en</language>
    <item>
      <title>I built a custom graphics language (HVSL) and SDF renderer where AI agents write 4K vector scenes</title>
      <dc:creator>alhassan</dc:creator>
      <pubDate>Sun, 25 Oct 2026 18:16:24 +0000</pubDate>
      <link>https://dev.to/alhassankhalil/i-built-a-custom-graphics-language-hvsl-and-sdf-renderer-where-ai-agents-write-4k-vector-scenes-11g5</link>
      <guid>https://dev.to/alhassankhalil/i-built-a-custom-graphics-language-hvsl-and-sdf-renderer-where-ai-agents-write-4k-vector-scenes-11g5</guid>
      <description>&lt;p&gt;I've been building nine, an experimental graphics engine centered around a language I created called HVSL (Hierarchical Vector Shading Language).&lt;/p&gt;

&lt;p&gt;The idea is different from the usual AI image-generation pipeline.&lt;/p&gt;

&lt;p&gt;Instead of generating an image directly as a grid of pixels, I use an LLM to construct a symbolic scene description. My own compiler and renderer then turn that description into an image using geometric operations and signed distance functions (SDFs).&lt;/p&gt;

&lt;p&gt;The result is an image generated from editable, human-readable scene code rather than a single flattened bitmap.&lt;/p&gt;

&lt;p&gt;HOW THE PIPELINE WORKS&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Natural language to symbolic geometry&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The first AI model takes a text prompt and generates an .hvsl scene script.&lt;/p&gt;

&lt;p&gt;The language uses a palette declaration (@PAL) and an ordered scene definition (@SCENE) containing geometric primitives and their parameters.&lt;/p&gt;

&lt;p&gt;The model's job is to describe the scene. It doesn't directly draw the pixels.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;A custom mathematical rasterizer&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I implemented a Python and NumPy rendering engine based on signed distance functions and geometric calculations.&lt;/p&gt;

&lt;p&gt;The renderer evaluates shapes in pixel space, calculates coverage around their boundaries, and blends them into the output image.&lt;/p&gt;

&lt;p&gt;Because the scene is represented symbolically, it can be rendered at different resolutions, including 4K, without enlarging a low-resolution source image.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;A second AI model checks the result&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;One challenge with LLM-generated geometry is that syntactically valid coordinates don't necessarily produce a visually correct image.&lt;/p&gt;

&lt;p&gt;To address this, nine uses a second multimodal model as a visual critic. It examines a preview render, evaluates the result, and identifies defects.&lt;/p&gt;

&lt;p&gt;The system then attempts targeted corrections to the existing scene instead of regenerating the entire image.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The output remains editable&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;An HVSL scene is text, not just pixels. I can adjust a coordinate, change a palette color, or modify a shape in the symbolic editor and rerender the result without another LLM call.&lt;/p&gt;

&lt;p&gt;That makes the representation inspectable and gives the developer direct control over the generated geometry.&lt;/p&gt;

&lt;p&gt;WHY BUILD THIS INSTEAD OF USING A DIFFUSION MODEL?&lt;/p&gt;

&lt;p&gt;I'm not claiming that symbolic rendering is better for every kind of image.&lt;/p&gt;

&lt;p&gt;Diffusion models are powerful for photorealism and complex visual textures. My experiment explores a different trade-off: generating graphics through explicit geometry and a deterministic rendering engine.&lt;/p&gt;

&lt;p&gt;This approach is particularly interesting for editable illustrations, geometric artwork, icons, and other visuals where control over the underlying representation matters.&lt;/p&gt;

&lt;p&gt;It also creates a different set of engineering problems:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Designing a formal scene language that an LLM can reliably generate.&lt;/li&gt;
&lt;li&gt;Converting geometric descriptions into clean raster output.&lt;/li&gt;
&lt;li&gt;Handling malformed or degenerate geometry.&lt;/li&gt;
&lt;li&gt;Detecting visual defects and correcting them without damaging working parts of the scene.&lt;/li&gt;
&lt;li&gt;Keeping rendering performance practical as resolution and scene complexity increase.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These are the areas I'm continuing to explore.&lt;/p&gt;

&lt;p&gt;WHAT ABOUT THE ANIMATION AT THE END?&lt;/p&gt;

&lt;p&gt;The animation tests shown near the end of the video use procedural motion applied to pre-rendered HVSL assets.&lt;/p&gt;

&lt;p&gt;Native video generation directly from the symbolic language is a future direction I'm investigating, not a feature I'm claiming is already complete.&lt;/p&gt;

&lt;p&gt;CURRENT STATUS&lt;/p&gt;

&lt;p&gt;nine and HVSL are still experimental projects. I'm continuing to develop the language, renderer, and AI-assisted refinement pipeline.&lt;/p&gt;

&lt;p&gt;I'd appreciate technical feedback, especially from people working on graphics engines, computational geometry, programming languages, rendering systems, or AI-assisted development tools.&lt;/p&gt;

&lt;p&gt;If you were developing this, what would you improve first: the language and compiler, the rasterizer, or the visual correction loop?&lt;/p&gt;

</description>
      <category>python</category>
      <category>ai</category>
      <category>algorithms</category>
      <category>graphics</category>
    </item>
  </channel>
</rss>
