Pattern.css

Dev tools

css library

SHOW HN2020

Legend

Pattern.css

CSS-only library to fill empty background with patterns

github.com

#css patterns#background patterns#css backgrounds#css only

332points
47comments
#118of 3,028 in 2020
Top 4%of 2020 by points

How HN took it

MixedNo clear lean

7 positive, 11 neutral or asking, 3 mixed, 11 critical, out of 32 comments about the project. Thread score -0.05.

Execution: 1 for, 6 againstIdea: 5 for, 0 againstDesign: 0 for, 4 againstPerformance: 0 for, 1 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

  • Neat, small, useful project; CSS-only with no JavaScript

    From 4 comments
    • Pretty neat project and great presentation, starred! You could reduce the distributed CSS version even more if you used the gradient definition only once, it's always the same.…
      tiborsaas on HN
    • >>Features >Only CSS. No JavaScript! It is indeed a feature, and one that I wish the vast majority of websites adopted.
      Funes- on HN
    • Love it! Site could use some help though. Consider making a repo for the actual website please! Would love to help clean it up a bit.
      queercode on HN
    • I always love seeing small, yet very valuable and informative projects on the front-page-- bravo!
      gorpomon on HN

Objections

  • Demo site renders incorrectly or has overlapping boxes and scrollbar issues

    From 3 comments
    • Example site ( https://bansal.io/pattern-css ) misrendered in Vivaldi, which brings me back PTSD grade memories about the browser war and css bugs, implementation-diferences,…
      extro on HN
    • https://imgur.com/ts3ashk Some of your background boxes overlap with the sidebar.
      onychomys on HN
    • The website https://bansal.io/pattern-css was clearly produced on a platform with overlay scrollbars. There are a number of horizontal scrollbars that shouldn’t be there. ```…
      chrismorgan on HN
  • Diagonal patterns render jagged or inconsistently in Firefox

    From 2 comments
    • Works great in Chrome, but many of them aren't smooth in Firefox. It doesn't seem to like diagonal lines, the display is inconsistent. I'm guessing it's a bug in Firefox with…
      calibas on HN
    • Hm, the diagonal lines are rendering quite badly for me (randomly jagged edges). Anyone else seeing this? (I'm on Linux, FF75)
      detaro on HN
  • Demo site has slow smooth scrolling and hijacks the back button

    From 3 comments
    • Wonderful! The demo site hijacks my back button, and the animations are incredibly slow. Edit: Rereading made me sound very salty. Nice project and I'm sure I'll use it in the…
      Accacin on HN
    • I really like this, but it would be great if the example site didn't use that scrolling. I wanted to click between examples and I browsed away because it took too long.…
      zerkten on HN
    • Not to mention smooth scroll which takes definitely too much time to scroll for no good reason.
      xPaw on HN

Requests

  • Use CSS variables so sizes are not hardcoded

    From 1 comment
    • It'd be nice if this used CSS variables so that you didn't need hardcoded sm, md, lg, and xl sizes, but could set the size to any length. Looks like from the source that this…
      spankalee on HN
  • Add a copy-paste snippet to the landing page

    From 1 comment
    • Pretty neat project and great presentation, starred! You could reduce the distributed CSS version even more if you used the gradient definition only once, it's always the same.…
      tiborsaas on HN
  • Publish the website source as a repo

    From 1 comment
    • Love it! Site could use some help though. Consider making a repo for the actual website please! Would love to help clean it up a bit.
      queercode on HN

Questions

  • Can the whole pattern collection be downloaded?

    From 1 comment
    • This is great! Is it possible to download the whole collection?
      urza on HN

Alternatives named

  • Hero Patterns

    From 1 comment
  • Subtle Patterns

    From 1 comment
    • Subtle Patterns [1] has been fairly popular throughout the years as well. [1] https://www.toptal.com/designers/subtlepatterns/
      Etheryte on HN
  • Transparent Textures

    From 1 comment
    • Also Transparent Textures (https://www.transparenttextures.com/) – disclaimer, I made it — which is basically Subtle Patterns with a colorwheel that allows the backgrounds to be…
      mikehearn on HN
  • css-doodle

    From 1 comment
    • This is pretty cool. It’s reminds me of https://css-doodle.com/, which is a native web component with the same general goal. Iirc, it uses canvas under the hood.
      CSSer 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/22933697)