SVG backgrounds

Creative

svg background patterns

SHOW HN2026

403points
67comments
#83of 4,366 in 2026
Top 2%of 2026 by points

How HN took it

MixedNo clear lean

15 positive, 13 neutral or asking, 3 mixed, 5 critical, out of 36 comments about the project. Thread score +0.27.

Idea: 4 for, 1 againstDesign: 2 for, 2 againstExecution: 1 for, 2 againstDocs: 1 for, 0 against

The thread, comment by comment

Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.

positive neutral or mixed critical about another commenter or something else the maker

What HN said

What people liked

  • Beautiful, well-made backgrounds

    From 3 comments
    • These are beautiful, thank you for sharing. I really like the one with the triangles, was it inspired by Rule 30? https://en.wikipedia.org/wiki/Rule_30
      throwaway2046 on HN
    • I'm a sucker for this kind of stuff, but I'm usually disappointed after clicking the link. These on the other hand are excellent, and that they have configurable options like…
      pseudosavant on HN
    • This is top notch, great work!
      thekevan on HN
  • Clean SVG code

    From 1 comment
    • What is your authoring tool for SVG? The SVG code is well written. It is neither Adobe bloat-spam-slop and neither is it overly SVGOMG'd. For picky SVG people you could have some…
      Theodores on HN
  • Configurable options like stroke and color

    From 1 comment
    • I'm a sucker for this kind of stuff, but I'm usually disappointed after clicking the link. These on the other hand are excellent, and that they have configurable options like…
      pseudosavant on HN

Objections

  • Some patterns break in Firefox until sliders are moved

    From 3 comments
    • Those are excellent! The orange shingles are my favorite. Though I think some of them are not working on Firefox; the blue and green vortices are rendered as a single blue…
      BoppreH on HN
    • Hmm, the parabolic ones seem to be broken? Both on FF and Chromium, they just display as an outline of a single shape on a black background.
      ksymph on HN
    • > Hmm, the parabolic ones seem to be broken? Both on FF and Chromium, they just display as an outline of a single shape on a black background. Move the sliders.
      lelanthran on HN
  • Preview does not work with Dark Reader enabled

    From 1 comment
    • FYI - the previews do not work if you have the Dark Reader plugin enabled in your browser.
      shellerik on HN
  • Sticky access notice takes up much of mobile screen

    From 1 comment
    • The notice about having "access" to the backgrounds is sticky, and takes up one third of the screen on mobile with no way to remove it . . . Why?
      hju22_-3 on HN
  • Hover blurs the preview

    From 1 comment
    • I find it odd that there's a custom of blurring or obscuring exactly the thing I'm interested in when I show interest in it by mousing over it.
      jjwiseman on HN

Requests

  • Add visible textarea with the CSS instead of only click-to-copy

    From 1 comment
    • These are great. Please consider adding a visible <textarea> with the CSS instead of relying on "click to copy" buttons. For security reasons, some users/browsers disable access…
      wackget on HN
  • Show pattern names on mobile

    From 1 comment
    • These are awesome! I’d love to use some of these for my solitaire game. Weird thing when I preview one of the backgrounds then scroll down the page on mobile the images…
      yesthisiswes on HN

Questions

  • What license applies?

    From 1 comment
  • What SVG authoring tool is used?

    From 1 comment
    • What is your authoring tool for SVG? The SVG code is well written. It is neither Adobe bloat-spam-slop and neither is it overly SVGOMG'd. For picky SVG people you could have some…
      Theodores on HN
  • Is the project new or old?

    From 1 comment
    • This is very cool but hasn’t it been around for like a decade?
      aerhardt on HN

Category, keywords, summaries and labels on this page were made by AI (Thread Reader v2) and not checked by hand. Each point links to the comments it came from.

Add a badge to your READMEShown on HackerShow
[![Shown on HackerShow](https://hackershow.org/badge.svg)](https://hackershow.org/show/47427299)