In a recent front-end project, one of the components included an interesting cut-out effect. There are multiple ways to do such an effect in CSS or SVG, but each way has its pros and cons. I thought about exploring the solutions for this challenge and share them with you. By Ahmad Shadeed

Stylemug is a fast css-in-js library that extracts atomic CSS rules to a .css file. It generates atomic CSS from the static stylesheets defined in JS. The compiled rules are extracted to a .css file.The stylesheet code in the Javascript bundle is replaced (no CSS in JS) with a hash map for classnames lookup at runtime.

Editor.js is a block-styled editor for rich media stories. It outputs clean data in JSON instead of heavy HTML-markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.