Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <p>Notes about <a href="https://codepen.io/myf/pen/yqjQdz">Intersected boxes SVG pattern</a>.

<h3>All paths entirely visible (inline SVG in HTML):</h3>

<svg id="a" viewBox="-5 -5 22 17" fill="none" preserveAspectRatio="none" width="220" height="170" >
<path d="M+0+1l-2-1-2-1+0+2+2+1+0+2+2+1zm+6-3l-2-1-2-1+0+2+2+1+0+2+2+1zm+6+3l-2-1-2-1+0+2+2+1+0+2+2+1zm-6+3l-2-1-2-1+0+2+2+1+0+2+2+1zm+6+3l-2-1-2-1+0+2+2+1+0+2+2+1z" fill="#210"></path>
<path d="M+0+1l+2-1+2-1+0+2-2+1+0+2-2+1zm+6-3l+2-1+2-1+0+2-2+1+0+2-2+1zm+6+3l+2-1+2-1+0+2-2+1+0+2-2+1zm-6+3l+2-1+2-1+0+2-2+1+0+2-2+1zm-6+3l+2-1+2-1+0+2-2+1+0+2-2+1z" fill="#432"></path>
<path d="M+0+1l-2-1-2-1+2-1+2+1+2-1+2+1zm+0+6l-2-1-2-1+2-1+2+1+2-1+2+1zm+6-3l-2-1-2-1+2-1+2+1+2-1+2+1zm+6-3l-2-1-2-1+2-1+2+1+2-1+2+1zm+0+6l-2-1-2-1+2-1+2+1+2-1+2+1z" fill="#654"></path>
<path d="M+0+1l-2-1-2-1+0+2+2+1+0+2+2+1zm+6-3l-2-1-2-1+0+2+2+1+0+2+2+1zm+6+3l-2-1-2-1+0+2+2+1+0+2+2+1zm-6+3l-2-1-2-1+0+2+2+1+0+2+2+1zm+6+3l-2-1-2-1+0+2+2+1+0+2+2+1zM+0+1l+2-1+2-1+0+2-2+1+0+2-2+1zm+6-3l+2-1+2-1+0+2-2+1+0+2-2+1zm+6+3l+2-1+2-1+0+2-2+1+0+2-2+1zm-6+3l+2-1+2-1+0+2-2+1+0+2-2+1zm-6+3l+2-1+2-1+0+2-2+1+0+2-2+1zM+0+1l-2-1-2-1+2-1+2+1+2-1+2+1zm+0+6l-2-1-2-1+2-1+2+1+2-1+2+1zm+6-3l-2-1-2-1+2-1+2+1+2-1+2+1zm+6-3l-2-1-2-1+2-1+2+1+2-1+2+1zm+0+6l-2-1-2-1+2-1+2+1+2-1+2+1z" stroke="#876" stroke-width="0.1" stroke-linejoin="miter" stroke-miterlimit="1.5"></path>
</svg>
<xmp id="aa"></xmp>
<script>aa.innerHTML = a.outerHTML</script>

<p>Basically 3 distinct shapes repeated 5 times plus one stroke net over "corners". (Initially I just wanted to make sure no bleeding  would occur between adjacent areas but I liked that net so made it thicker and have it own colour.) That net is made of sum of shapes, so most lines are duplicated, but it helps compression and in single path makes no difference. 
<p>Path data consiscts entirely of linetos, moves and closepaths.


<h3>Same inline svg, just viewBoxed center area to produce tile pattern:</h3>

<svg id="b" width="120" height="60"  viewBox="0 0 120 60">
<use href="#a" x="-50" y="-50"></use><!-- just to not repeat same -->
</svg>
<xmp id="bb"></xmp>
<script>bb.innerHTML=b.outerHTML</script>

<p>Most of drawing is simply cut out. Using entire shapes to get just this tile was most straightforward and slightly bruteforcish but turned out quite OK.  Most probably there are other ways to golf this. SVG-in-HTML(5) has fixed "doctype" that cannot be extended.

<h3>Image with datauri - true XML with repeating chunks converted to entities</h3>

<img id="c" width="120" height="60" src='data:image/svg+xml,<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
  <!ENTITY E "+2-1">
  <!ENTITY e "+2+1">
  <!ENTITY s "+0+2">
  <!ENTITY w "-2+1">
  <!ENTITY W "-2-1">
  <!ENTITY l "l&W;&W;&s;&e;&s;&e;z">
  <!ENTITY L "M+0+1&l;m+6-3&l;m+6+3&l;m-6+3&l;m+6+3&l;">
  <!ENTITY r "l&E;&E;&s;&w;&s;&w;z">
  <!ENTITY R "M+0+1&r;m+6-3&r;m+6+3&r;m-6+3&r;m-6+3&r;">
  <!ENTITY t "l&W;&W;&E;&e;&E;&e;z">
  <!ENTITY T "M+0+1&t;m+0+6&t;m+6-3&t;m+6-3&t;m+0+6&t;">
]>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="none" preserveAspectRatio="none">
  <path d="&L;" fill="%23210" />
  <path d="&R;" fill="%23432" />
  <path d="&T;" fill="%23654" />
  <path d="&L;&R;&T;" stroke="%23876" stroke-width="0.1" stroke-linejoin="miter" stroke-miterlimit="1.5" />
</svg>'>

<xmp id="cc"></xmp>
<script>cc.innerHTML=c.getAttribute('src')</script>

<p>In XML you can extend DTD with custom elements, attributes or entities. Entity could be just character (like you know from HTML, e.g. &amp;nbsp; that is replaced with non breaking space in output), chunk of text (XML / XUL based application have often localisation made this way) or even snippets of code (those snippets alone could be even invalid).
<p>Entitiy declaration must be in DTD or it's ad-hoc extension. It looks like <code>&lt;!ENTITY name "value"&gt;</code> and referencig this intity is done in <code>&amp;name;</code>. Entity declaration can contain references to other (already declared) entities, what could be even <a href="https://en.wikipedia.org/wiki/Billion_laughs_attack">exploited in many amusing or dangerous ways</a>.

<p>In this image I used entities to shrink size  -- although leaving it "uncompressed" and letting GZip do its work would certainly be more effective -- and to centralize repeating patterns. I started with basic "moves" relative coordinates: `E` for "north-east" (+2-1), `e` for south-east (+2+1) etc). Representing each `+2-1` (=4 characters) with `&amp;E;` (=3 characters) saves just one character and its declaration is 18 characters long, so it probaly wasn't worth it, but I liked this as an centralized abstraction.
<p>Then I used basic directions to draw basic shapes ("carons") (`l`eft, `r`ight, `t`op), and then repeat those shapes five times shifted (`L`, `R`, `T`) -- those are used in individual filled paths, and alltogether in final stroked net.
<p>I'm sure it could be done in many different and more effective ways, I was just happy to make it work at least "somehow" :]. Using entities gave me sense of "power" and saved me tedious repetition and walls of hardly comprehensile numbers in process. (But again, those walls of numbers could be most probably best gzipped, compared to this funky opus.)

              
            
!

CSS

              
                body 
{ max-width: 40em
; margin: 0 auto;
}


path[fill]:hover { fill: red; }
path[stroke]:hover { stroke: red; }

              
            
!

JS

              
                
              
            
!
999px

Console