Skip to main content
SimilarExport ZIP
100%

Indenter

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jun 8, 2016
Created on Jun 8, 2016

This example demonstrates an algorithm for indenting HTML or XML fragment strings. It displays a minified SVG string within a `<pre>` tag, and the indentation width is animated over time using `Math.sin(Date.now() / 1000)` to cycle through different space counts. The core `indent` function parses characters, tracks indentation levels via a stack, and rebuilds the output with newlines and spaces. The rendered output is SVG, and the source string is a generated visualization markup.

AI-generated description

I was searching for a way to indent a generated HTML fragment string, and was frustrated that all the packages I could find for doing this seem overly complex for the task at hand:

So I thought to myself, how hard could it be to write a function that indents HTML? It should be about a page of code, and would be a fun little puzzle. This is the result from the experiment, a small function that indents an HTML or XML fragment string.

If you find this useful and would like it released as a proper package, please let me know.

Built with blockbuilder.org

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2115161&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->
mit Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal web page demonstrating inline SVG rendering alongside styled HTML text. The page displays a “Hello HTML!” message and an SVG element containing a single black path curve, which is transformed with translation and scaling. The code relies on raw SVG path data, CSS styling (including an orange stroke overrides), and JavaScript console logging via `console.log`, with the SVG rendered directly in the markup. The visualization highlights basic SVG path drawing and CSS customization within a simple HTML structure, without any external libraries.

NNita
65% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses inline SVG elements to render basic shapes. The visualization shows a set of simple geometric figures—a blue circle, a yellow rectangle, and a smaller lightblue circle—positioned on a blank canvas. The rendering relies on the SVG API within the HTML document, with styling applied directly through attributes like `fill` and `cx`. No external libraries or JavaScript are used; the page is a static demonstration of CSS and SVG markup.

Aalexander.anton-boicuk@study.hs-duesseldorf.de
64% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the visual and conceptual difference between HTML and SVG by rendering a large “Hello HTML!” message using basic CSS styling in an HTML document. It serves as a foundation for building more complex visualizations, showing how to structure an HTML page with inline styles and JavaScript-ready markup. The code uses standard HTML elements, a `<style>` block for typography, and a `div` with a `font-size` property. It does not yet incorporate any data or charting libraries, acting purely as a starting point for SVG-based work in frameworks like React.

Rrose3d@gmail.com
64% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple animated rectangle that expands and contracts within an SVG canvas. The chart uses basic SVG shapes, with the rectangle's width transitioning from 100 to 200 pixels through the SVG `<animate>` element. It relies on native SVG animation capabilities rather than external libraries, with the visual state defined directly in the `index.html` file. The example serves as a minimal starter template showcasing how to combine HTML structure with SVG and JavaScript for dynamic graphics.

NNita
64% match
Loading thumbnail…

HTML Starter

A standalone HTML page demonstrates SVG line dash patterns as a visual reference. Ten horizontal lines render distinct stroke-dasharray sequences, from simple dashed and dotted patterns to complex, multi-value combinations. The example uses inline SVG elements with CSS-defined stroke properties, requiring no JavaScript or external libraries. It serves as a minimal template for exploring SVG attributes and a foundation for integrating React-based visualizations.

Fforeverworld1879
64% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that combines CSS and JavaScript to render basic SVG shapes, including a green circle, a navy line, and a black polyline path. The page uses static inline SVG elements within the HTML markup, without any external libraries or dynamic data. CSS is applied via a style tag, and the SVG canvas is set to a fixed 500 by 500 pixel size. The visualization serves as a bare-bones template for exploring how SVG primitives compose a simple graphical scene.

Mmasonb33@protonmail.com
64% match
Loading thumbnail…

Fork of HTML Starter

This example is a fork of the HTML starter, presenting a static SVG composition of overlapping rectangles, circles, lines, and text. It demonstrates the raw use of SVG elements alongside inline CSS and JavaScript within a single HTML file. The visualization is rendered entirely through SVG, with shapes defined by fixed coordinates and attributes, and the text element displays a message about the author's affinity for the format. It serves as a minimal, hand-coded illustration of SVG’s vector graphics capabilities without any external libraries or data.

Aamp1enator@gmail.com
64% match
Loading thumbnail…

HTML Starter

This example demonstrates basic SVG graphics rendered directly in an HTML page, featuring primitive shapes like circles, rectangles, lines, and a path. The visualization uses the `svg` element and its attributes such as `transform` and `fill` to group and style shapes, with cascading stylesheets (`styles.css`) applying stroke colors and line-join properties to specific classed elements. The code relies on React as the framework but executes without external charting libraries, showcasing raw SVG markup for simple, static compositions.

Uuttam-vish
64% match