/*! * Scrawl CSS v0.2.0 * Hand drawn annotation strokes with no JavaScript at all. * MIT licence. * * The stroke is a background image, so it repaints per line box for free and * wrapped text needs no measuring. Pick a shape class, then an ink class: * * like this * * Ink has to be baked into the SVG because a data URI cannot read a CSS * variable, hence the ink classes. To add your own, see the note at the * bottom of this file. If you want per-element wobble, a draw-on animation * or arbitrary runtime colours, use scrawl.js instead. */ .scrawl { --scrawl-tile: 5.5em; /* how often the wobble repeats */ --scrawl-height: 0.34em; /* how tall the stroke band is */ --scrawl-drop: 0em; /* lifts the stroke towards the baseline; go negative to push it lower */ background-repeat: repeat-x; background-size: var(--scrawl-tile) var(--scrawl-height); background-position: 0 calc(100% - var(--scrawl-drop)); padding-bottom: 0.16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* A single wavering rule, the workhorse. */ .scrawl--underline { --scrawl-tile: 5.5em; --scrawl-height: 0.34em; } /* Two rules, the proofreader's mark for setting something in italics. */ .scrawl--double { --scrawl-tile: 5.5em; --scrawl-height: 0.42em; } /* Zigzag. Drop --scrawl-tile for a tighter, more frantic scribble. */ .scrawl--scribble { --scrawl-tile: 4em; --scrawl-height: 0.38em; } /* Struck through the middle rather than underlined. */ .scrawl--strike { padding-bottom: 0; /* Reads --scrawl-drop like the base rule does, or .scrawl--low would be a no-op here. At the 0em default this computes to a plain 54%. */ background-position: 0 calc(54% - var(--scrawl-drop)); } /* One long sweep that stretches to fit rather than tiling, so keep it on runs that will not wrap. Stretching is also why --scrawl-tile does nothing here. */ .scrawl--curve { --scrawl-height: 0.5em; background-repeat: no-repeat; background-size: 100% var(--scrawl-height); } /* Highlighter, baked at 42% opacity so it does not bury the text. The band is the full height of the line box, so --scrawl-height and --scrawl-drop do not apply. */ .scrawl--marker { --scrawl-tile: 7em; padding: 0.08em 0.26em; margin: 0 -0.26em; background-size: var(--scrawl-tile) 100%; background-position: 0 0; } /* Uses border-image, so the corners hold their shape while the edges stretch. Nothing here is a background, so none of the three variables reach it. */ .scrawl--box { background: none; padding: 0.2em 0.45em; margin: 0 -0.45em; border: 0.26em solid transparent; border-image-slice: 20; border-image-width: 0.4em; border-image-outset: 0.2em; border-image-repeat: stretch; } /* ---------------------------------------------------------------- inks */ .scrawl--underline { background-image: url("data:image/svg+xml,"); } .scrawl--underline.scrawl--blue { background-image: url("data:image/svg+xml,"); } .scrawl--underline.scrawl--red { background-image: url("data:image/svg+xml,"); } .scrawl--underline.scrawl--yellow { background-image: url("data:image/svg+xml,"); } .scrawl--underline.scrawl--green { background-image: url("data:image/svg+xml,"); } .scrawl--underline.scrawl--lead { background-image: url("data:image/svg+xml,"); } .scrawl--underline.scrawl--paper { background-image: url("data:image/svg+xml,"); } .scrawl--double { background-image: url("data:image/svg+xml,"); } .scrawl--double.scrawl--blue { background-image: url("data:image/svg+xml,"); } .scrawl--double.scrawl--red { background-image: url("data:image/svg+xml,"); } .scrawl--double.scrawl--yellow { background-image: url("data:image/svg+xml,"); } .scrawl--double.scrawl--green { background-image: url("data:image/svg+xml,"); } .scrawl--double.scrawl--lead { background-image: url("data:image/svg+xml,"); } .scrawl--double.scrawl--paper { background-image: url("data:image/svg+xml,"); } .scrawl--scribble { background-image: url("data:image/svg+xml,"); } .scrawl--scribble.scrawl--blue { background-image: url("data:image/svg+xml,"); } .scrawl--scribble.scrawl--red { background-image: url("data:image/svg+xml,"); } .scrawl--scribble.scrawl--yellow { background-image: url("data:image/svg+xml,"); } .scrawl--scribble.scrawl--green { background-image: url("data:image/svg+xml,"); } .scrawl--scribble.scrawl--lead { background-image: url("data:image/svg+xml,"); } .scrawl--scribble.scrawl--paper { background-image: url("data:image/svg+xml,"); } .scrawl--strike { background-image: url("data:image/svg+xml,"); } .scrawl--strike.scrawl--blue { background-image: url("data:image/svg+xml,"); } .scrawl--strike.scrawl--red { background-image: url("data:image/svg+xml,"); } .scrawl--strike.scrawl--yellow { background-image: url("data:image/svg+xml,"); } .scrawl--strike.scrawl--green { background-image: url("data:image/svg+xml,"); } .scrawl--strike.scrawl--lead { background-image: url("data:image/svg+xml,"); } .scrawl--strike.scrawl--paper { background-image: url("data:image/svg+xml,"); } .scrawl--curve { background-image: url("data:image/svg+xml,"); } .scrawl--curve.scrawl--blue { background-image: url("data:image/svg+xml,"); } .scrawl--curve.scrawl--red { background-image: url("data:image/svg+xml,"); } .scrawl--curve.scrawl--yellow { background-image: url("data:image/svg+xml,"); } .scrawl--curve.scrawl--green { background-image: url("data:image/svg+xml,"); } .scrawl--curve.scrawl--lead { background-image: url("data:image/svg+xml,"); } .scrawl--curve.scrawl--paper { background-image: url("data:image/svg+xml,"); } .scrawl--marker { background-image: url("data:image/svg+xml,"); } .scrawl--marker.scrawl--blue { background-image: url("data:image/svg+xml,"); } .scrawl--marker.scrawl--red { background-image: url("data:image/svg+xml,"); } .scrawl--marker.scrawl--yellow { background-image: url("data:image/svg+xml,"); } .scrawl--marker.scrawl--green { background-image: url("data:image/svg+xml,"); } .scrawl--marker.scrawl--lead { background-image: url("data:image/svg+xml,"); } .scrawl--marker.scrawl--paper { background-image: url("data:image/svg+xml,"); } .scrawl--box { border-image-source: url("data:image/svg+xml,"); } .scrawl--box.scrawl--blue { border-image-source: url("data:image/svg+xml,"); } .scrawl--box.scrawl--red { border-image-source: url("data:image/svg+xml,"); } .scrawl--box.scrawl--yellow { border-image-source: url("data:image/svg+xml,"); } .scrawl--box.scrawl--green { border-image-source: url("data:image/svg+xml,"); } .scrawl--box.scrawl--lead { border-image-source: url("data:image/svg+xml,"); } .scrawl--box.scrawl--paper { border-image-source: url("data:image/svg+xml,"); } /* ------------------------------------------------------------- utilities */ .scrawl--thin { --scrawl-height: 0.24em; } .scrawl--thick { --scrawl-height: 0.5em; } .scrawl--tight { --scrawl-tile: 3em; } .scrawl--loose { --scrawl-tile: 9em; } .scrawl--low { --scrawl-drop: -0.08em; } /* These only reach a shape that reads the variable behind them, so not every pairing does something: thin and thick are inert on marker and box, tight and loose are inert on curve and box, and box ignores all three. */ /* --------------------------------------------------------- your own ink */ /* Copy any rule from the ink block above and swap its hex colour. Most shapes carry one, in the stroke attribute. The marker has no stroke, so swap its fill instead. The double rules carry two strokes, one per line, so change both or you will get a two-tone rule. Remember that # is written %23 inside a data URI: .scrawl--underline.scrawl--hot { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C13 5 27 9.6 40 7.4 S67 5 80 8 S107 10.2 120 8' fill='none' stroke='%23ff5722' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); } */