PUBLIC MARKS from decembre with tags css & svg

Do you like colouring books? Are you getting a little bored and running out of things to do at home? Well, I have created some digital colouring pages that you can colour with code. There is a lot going on in the world right now so I wanted to share something lighthearted and fun. Something everyone can take part in and share with their friends and family online.

I love using SVG in CSS background images but it sucks that you can't alter the fill color easily within your CSS. Here are a few ways around that. # SVG in CSS backgrounds: Using SVG in CSS backgrounds allows you to use CSS's powerful background sizing and position properties. This makes sizing SVGs much simpler because the image easily scales to the size of your element. Plus you don't have SVG cluttering up your markup. There are also some nice performance benefits over inline SVG. An SVG in a background image can be cached. Using image sprites and embedding SVG as a data URI can also improve performance.

Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. Main features Keyframes: Chain multiple animation properties. Timeline: Synchronize multiple instances together. Playback controls: Play, pause, restart, seek animations or timelines. CSS transforms: Animate CSS transforms individually. Function based values: Multiple animated targets can have individual value. SVG Animations: Motion path, line drawing and morphing animations. Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that are already loaded on a user's computer, which vary depending on the system being used. Here's a nice breakdown of existing system fonts.

SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results. Here the 20 tools that you can use to work with SVG quickly and efficiently. We have mostly online tools, that can help in optimization, conversion, making patterns, and more.

You can perform a wide variety of designs, art as the icon of DRAW-SVG, mapping, technical, presentation slides, etc. ..

SVG at a data URI for background images.... just because you can, doesn't mean you should.

You should have a look at http://iconmonstr.com Iconmonstr.com has a growing collection of SVG icons which you can download and use for free

Another Use Case: The fill property is one of many reasons SVG is a much more flexible option than typical image files. Let's take icons, as an example. We might have the same set of icons but in two different color schemes. Typical image files (such as JPG, PNG and GIF) would require us to make two versions of each icon — one for each color scheme. SVG, on the other hand, allows us to paint the icons in using the CSS fill property: .icon { fill: black; } .icon-secondary { fill: orange; }

a free and open project called Iconmelon which aims to collect free SVG icon sets and provide a filter and CSS boilerplate.