Posts tagged svg

Create rotating SVG icons using CSS

I'm working on a project for a client that includes some pretty gnarly canvas animation. On one slide, the animation (a bunch of dots) converges to the center and a set of icons rotate around...

first test on codepen

test for a friend - blur background with menu

blur background with menu test

Quick Tip: SVG <use> Style Two Colors

Using SVGs as a icon sprite is gaining traction right now. Chris Coyier wrote about it many times. And even here on codepen this technique is used (just look in the devtools)

I wrote a grunt...

animate タグを使って目をキョロキョロさせてみた

circle id="Oval-5" fill="#000000" cx="29" cy="25" r="17" animate attributeName="cx" values="30;15;30;15;30" //「values」...

saga of 70px logo continues

The best demo you’ll see all day: http://t.co/ompYeOjlkw OMFG

— David Walsh (@davidwalshblog) December 10, 2014

@davidwalshblog Enh. Better if it had two more wolves. And a moon. ...

svg, background, animated, css3,


instead of

Look Ma, no CSS nor JS!!!

have svg frames

picture description


[[[pen slug-hash='dPpWyX'...

fuk da popo

this is an experiment combining several diferent aproaches to animation (Dec 2014) used on the web and in media production. i really hope to only scratch the surface while focusing on:



Komori's SVG loop animation is made with a free editor "9va-pi".

SVG loop animation "01sharks"

Experimenting with SVGs

Experimenting with SVGs

Komori's SVG Animation "02ice"

Komori's SVG loop animation is made with a free editor "9va-pi".

Komori's SVG Animation "02ice"

Komori's SVG Animation "03octopus"

Komori's SVG loop animation is made with a free editor "9va-pi".

Komori's SVG Animation "03octopus"

100 Codepens

The top 100 Codepens of 2014 is pretty inspiring right?. I'm going to try to build something inspired by all of them in an attempt to be less dumb. Here we go!

1. SVG Loading Icons


Komori's SVG Animation "04torpede"

Komori's SVG loop animation is made with a free editor "9va-pi".

If animation is broken, hit RERUN. Firefox is nice. Only IE can't show SMIL animation.


Komori's SVG Animation "05crab"

Komori's SVG loop animation is made with a free editor "9va-pi". If animation is broken, hit RERUN. Firefox is nice. Only IE can't show SMIL animation. [[[pen...

Komori's SVG Animation "06birds"

Komori's SVG loop animation is made with a free editor "9va-pi". If animation is broken, hit RERUN. Firefox is nice. Only IE can't show SVG SMIL animation. [[[pen...

Komori's SVG Animation "07airplane"

Komori's SVG loop animation is made with a free editor "9va-pi". If animation is broken, hit RERUN. Firefox is nice. IE can't show SVG SMIL animation.


Komori's SVG Animation "08fishing"

Komori's animated SVG is made with a free editor "9va-pi". If animation is broken, hit RERUN. Firefox is nice. IE can't show SVG SMIL animation.

[[[pen slug-hash='xbjRXN'...

SVG Sprites and Icon Systems Are Super

I received an email recently asking for assistance with an SVG icon issue. The individual explained that he was working with a lot of icons (about 300, which I would say qualifies as a...

Responsive Placeholder Image


Transparent Pixels

I became interested in image replacement techniques to keep page size down, AJAXing in full images later as needed, and I stumbled across The Smallest Transparent Pixel....

SVG Tessellations

SVGs are amazing. Simply amazing. They're the most bandwidth conscious way to take advantage of huge displays and get your images into native resolution.

The other fantastic thing about SVG, no...

Scaling inline SVG: CSS & other sadnesses

UPDATE: Turns out SVG has an attribute for exactly this use-case. It’s called preserveAspectRatio, and all I needed was <svg preserveAspectRatio="xMidYMid">. In fact, that’s the default if...

How do you mark up a comic?

Say I want to provide transcriptions of a comic to my site visitors, or maybe I'm making a comic with SVG. How best should I mark things up to make the meaning clear to assistive technology,...

Optimizing SVGs in data URIs

Awhile back, CSS-Tricks posted “Probably Don't Base64 SVG”, which concluded that SVGs in data: URIs are smaller used as-is instead of base64-encoded.

It’s got the right idea, but there are a...

Inline SVG fallback; no JavaScript required

UPDATE: I made a improved version that you should probably use instead.

The key is SVG has the interesting element <switch>:

The switch element evaluates the requiredFeatures, ...

Grokking quadratic bézier curves in SVG

Hey CodePen party people, today I want to talk to you about quadratic curves in the SVG path element.

There comes a time in every young (or old) person's life when you actually have to stop and...

SVG Logo Loading Animation

I challenge you!

I Challenge You

After reading the very good article from cssanimation.rocks about the loading animation for buffer, one of my colleages (a very talented ux designer) challenged me...

Rethinking Information Presentation: Animated Responsive Infographics

Do you remember the infographic? Infographics became very popular because of their impact on conversion. On the user side, they were full of quick, easy to digest information. They were colorful...

Six steps to make SVG Animation from Openclipart


This article shows six steps to make SVG animation from Openclipart by the use of a free vector animation editor.

The article "Make animation from Openclipart's SVG with...

The Seven Stages of SVG

I'm writing this because I've been asked quite a lot recently about how to get into SVG, where to start and what's the best way to learn. I've finished the post now and I'm...

SVG is nice in many ways

SVG is nice in many ways

I have never doubted that SVG will become the way to render vector graphics on the web. Ever since I first discovered the predecessor of SVG called VML - Vector Markup...

How to make SVG Loop Animation?

How to make SVG Loop Animation?

Loop Animation is useful to make a bird flying or a man walking etc.

In this article I will explane how to make SVG Loop Animation without using Java Script.


How to make Animated GIF from Openclipart?


This article shows how to make GIF animation from Openclipart by using a free vector animation editor 9VAe.

What is 9VAe ?

Unique free 2D animation software which can export...

Vector Pixels: SVG, Optimization, Animation and Understanding Path Data

This article is intended to introduce SVG concepts by showing how to create vector "pixels" and show interesting ways to optimize your SVG code. If you're familiar with SVG and want...

Animowane svg

Animacje SVG były czymś, o czym długo myślałem, ale nigdy nie robiłem na poważnie. Do wczoraj.

Kończąc ikonkę w Sketchu i eksportując ja do SVG uświadomiłem sobie, że to przecież nic innego, jak...

SnapFoo - An SVG Animation Library

I have spent a lot of time this past year working with SVG animation primarily with SnapSVG. I have grown to really enjoy the library and have relied on it heavily in some projects. However,...

More Robust SVG Text with `lengthAdjust` and `font-size-adjust`

Here’s why you should care:

More robust SVG text demo

You may have heard about Chrome implementing font-size-adjust (or you know that...

SVG icon systems and their compromises

For good reason, icon fonts and drawing with CSS pseudo-elements are out, and SVGs are in! But unfortunately, SVGs also have their fair share of (different) issues to contend with.

SVGs have been...

How To Make An SVG Lava Lamp

Every now and then I am lucky enough to create a pen that people really like. SVG Lava Lamp is one of them - in fact I've had so many people asking about it that I decided to write this blog...

Создание SVG из Photoshop (Form / Object):

В фотошопе выделяем необходимый слой

Alt + Глазок видимости необходимого слоя

Изображение -> Тримминг (Прозрачных пикселов, все галочки)

   3.1. Если это object: 3.1.1. клацаем 2 раза на иконку...

Bosma.org Pattern Library

*Note: Because of the number of iframes on the page, sometimes images don't load correctly. Simply hover over the frame and click "rerun."*

Basic Elements




A few days ago I came across this creative studio called This Also. They just launched a new site. It not only showcases some of their amazing work but, also has this fun little loading...

Export Animated GIF in 9VAe


What is 9VAe ?

Unique 2D animation free software which can export SVG and GIF animation.

Based on 2D keyframe animation such as Synfig Studio.

Lightweight and stable....

Avoiding the javascript cross domain loading error

Sometimes you want to load content from an external site using javascript. You may well run into the "cross domain loading wall". Javascript cannot load any contents from an external...

Animated SVG with Vivus

animate' class="post-image

Viva la Vivus

I’ve been meaning to work on my portfolio site for a while and I’ve finally found some time to put together some assets and elements I’d like to use. I...

Simmons.com Pattern Library

Basic Elements


Simmons.com - Colors


Typography Kits

[[[pen slug-hash='2a4255ef59491e7b06fd40bb33746dc3'...

Generative Backgrounds with SVG Paths

It seems that any solo game designer will eventually realize that they can't do everything well. An army of one is still just one, and one usually can't produce a game that matches a team...

9VAe Free SVG/GIF/APNG Animation editor: Introduction

What's 9VAe ?

9VAe is a powerful free software which can create 2D animation using vector graphics.

Use of shape tweening eliminates the need to create animation frame-by frame. Export SVG /...

9VAe Free SVG/GIF Animation editor: Download and Install

This article shows how to download and install 9VAe : Free SVG/GIF Animation editor.


Download (Click


in the following links)
Download from Vector how to
9va-win (Windows)...

9VAe Beginner Tutorial 0 - Overview

This tutorial shows how to use 9VAe : Free SVG/GIF Animation editor for beginners.


User Interface

Here is an overview of the 9VAe interface.


Tool Box

Editing Tool


9VAe Beginner Tutorial 1 - Input, Select, Move, Resize...

Previous tutorial described an overview of the 9VAe interface. This tutorial shows how to create a quick example animation.


First Step


Let's make a simple animation shown above....

9VAe Beginner Tutorial 2 - AnimeCast, Time

This tutorial is a continuation of the tutorial " 9VAe Beginner Tutorial 1". This tutorial shows how to create an ' AnimeCast'.


Make AnimeCast and Rotate



9VAe Beginner Tutorial 3 - Edit AnimeCast, Loop

This tutorial is a continuation of the tutorial " 9VAe Beginner Tutorial 2". This tutorial shows how to edit the objects inside AnimeCast.


Edit AnimeCast


This tutorial is...

9VAe Beginner Tutorial 4 - Time Curve, Copy Pages, GIF

This tutorial is a continuation of the tutorial " 9VAe Beginner Tutorial 3". This tutorial describes 'Time Curve' and 'Copy Page'.


Time Curve, Copy Pages



9VAe's GIF/SVG Animation examples in Openclipart

What's 9VAe ?

9VAe is a powerful free software which can create 2D animation using vector graphics. Use of shape tweening eliminates the need to create animation frame-by frame. You can produce...

#1. BEMIT, Purify and how to add SVG's to a Web Page

It's 2016, and we're setting it off with something we call Front-End Frulle here at Comeon! Every Wednesday we'll eat breakfast and talk about front-end this and that. So without no further ado,...

SVG animation research & GSAP

Hi guys, this is my very first post and I would like to explain the process I followed to create this little SVG animation and what I learned on the way.

The goal of all this experiment was to...

Fix for SVG textPath when using a base tag

ID references when using a base tag

In SVG, you often have to reference an element in defs by id like so:

  <defs> <clipPath id="myClipPath"> ... </clipPath> </defs>...

Firefox SVG url-s mistake

I waited for YEARS and now I feel, it is time to mention it. Have seen many pens but not a single one with correct SVG url from stylesheet for Firefox. The problem is, that from external stylesheet...

Анимация SVG Bodymovin

Попробовал давеча еще одну библиотеку для анимации SVG под названием BODYMOVIN. Данная библиотека идет вместе с экстеншеном для AE и предназначена для того, чтобы конвертить сделанную в АЕ анимацию...

SVG z-index

I just created a quick animation and had an minor issue with the z-index of my SVG group elements and after CSS did not fix the issue I had to turn to good old Stack Overflow and found the answer...

Hunter Fan Industrial Microsite Pattern Library

Basic Elements


Industrial.Hunterfan.com - Colors


Typography Kits

[[[pen slug-hash='3f4ae004ffdf2a7caad8e67c458fee49'...

Simple SVG Animation

The simplest way to animate SVG with just CSS!

SVG File

First off, prepare the SVG file you would like to use. In this case I'm going to use SAYS logo. You can get the SVG code from opening the...

Fixing the white glow in the CSS blur() filter

Have you used filter: blur(), and were disappointed with the soft halo around the filtered element? Would you like to fix that?

[[[pen slug-hash='yOxMab' height='500'...

Switching Color Modes in SVG

Common practice with showing a serie of logos in an attractive way in a webpage, is to present gray scaled – or monochrome versions, to neutralize the (potentially clashing) distracting colors from...

How to make APNG from SVG for LINE animated Stickers?

LINE animated Stickers

This article shows how to make APNG from SVG for LINE animated Stickers with a free 2D vector animation editor '9VAe'.

What is 9VAe ?

9VAe is a free 2D animation...

SVG circle trail animation

So it started with a video of a small dot that leads you on this journey as it travels through different scenes. It was important that the user always has sight of the dot to make sure the focus is...

Make Barrel Fish animation from Openclipart SVG


This is an article which describes the process of making an animation from Openclipart's SVG.


Openclipart library is a collection of 100% license-free art that...

Animating SVG Charts built with React and D3

React, D3, SVG and Animation

One possible approach to creating data visualization charts is to use React and D3, where React handles building all of the SVG and D3 does the calculations required....

stroke-dashArray and stroke-linecap

Quick post about svgs stroke-dasharray property.

I am currently using chrome v 50. I wanted to create an animation of a moving line composed of round dots. I applied my stroke-linecap:round; and...

How to make a long animation with 9VAe


What is 9VAe ?

9VAe is a free 2D animation editor which can export Animated GIF , APNG, Animated SVG or QuickTime (9va-mac).

9VAe can import SVG vector illustrations.

9VAe can create...

Creating an SVG Icon System in React Native

One of React Native's benefits is allowing web front-end developers to use their existing skillset to build native apps. However, just because the base technology is similar, the manner in...

A Better Accessible Contrast Checker (HELP WANTED)

Readable text contrast is a foundation of web accessibility.

But boy does it suck to double-check. You have to find all the text/background combinations in your site, then paste them into a tool....

How to create a game using SVG animations (Coloron example)

The idea of the game

I've used SVG animations for a while and had a pretty good understanding of how to use it for making animated sprites or website layouts. The combination of platforms like...

Christmas SVG

Christmas SVG Animation

Move your mouse into the blue circle.

Have a happy holiday!


My SVG Animation Workflow

If you've ever worked with SVG you probably noticed the fact that the tools you have to use in the process are relatively unstable and can give you unpredictable results. There are a lot of...

Animating SVG polygons


I got a lot of questions about how I created my pen "animating svg polygon points", so I decided to write a little tutorial. I made the pen trying to reverse engineer the...

Art and Code

As a kid, I always loved art. I drew in my freetime and explored various art forms that included, but were not limited to: cross-hatching, acrylic painting, digital.

But equally at a young age, I...

SVG Vector graphics with Snap.svg



Snap.svg "The JavaScript SVG library for the modern web" is an all in one javascript library for working with vector based graphics, the documentation is a bit sparse,...

A Geometric Representation of the Square Root of Three.

Place one equilateral triangle on top of an inverted equilateral triangle so as to form a diamond.

If we call the length of side of the equilateral triangles:

1 unit

, then the height of the...

Make it Rain: a fun SVG Animation Project for Beginners

In this exercise, we will use CSS and jQuery to animate an SVG scene according to the storyboards provided for us by the designer. Feel free to fork the starter SVG file and get started:


Code Valentines

I made a bunch of goofy code joke Valentines for 2017, and figured I might as well post them here.


  You’re such &acute; that I can’t escape you 
  <link rel="canonical attachment...

I Rather Not Build It. Not Even For Funsies!

Once upon a time, I came across a web animation that was so massively cool, I wanted to recreate it. At the time, I was only coding for fun and had no knowledge of any front end tools to build such...

svgPatternEditor v0.1


With patterns inside of svg and circles. so Fast!


svgMosaic Editor v0.1

SVG waves with feDisplacementMap

First thing first: my English may not be as good as required for writing a post on Codepen. Please feel free to correct my spelling and my grammar in the comments below.

About ...

How to clean up SVG code generated by Sketch app

Assume we are always using an artboard, equal to SVG viewbox

Assume we are exporting the Artboard itself, rather than individual elements

Single shape

Sketch does an excellent job in all the...

SVG labs using Primitive

There's this really cool software called Primitive. It takes a bitmap for input and outputs a vector version using primitive shapes.

You can download the command line software for free or buy a...

SVG Sprites

Last updated: 2/13/18


An image sprite, defined loosely, is just a single image that contains other images.

Sprites even in a bitmap format (e.g., .jpg, .png), can save a huge amount of...

How I construct a pen on CodePen

Why I love coding out my ideas

Many of the pens I construct here on CodePen comes out of an idea where I want to see the effect of playing around with known methods. I kind of like science, and...

animated arc svg

Animated arc, filling a circle with the effect of animation

svg + jquery

Making of "Logo Synth"


The Story

When the redesign of the Drexler site began in late 2016 the goal was to create a system that could be evolved through temporary concepts. As soon as the dust settled we began...

Animate your own signature!

Signatures animated

Hi and welcome to my second post !
This time I want to share with you how to have a...

write your name with #cr7juve

write your name with #cr7juve with

CR7 - Juventus #cr7juve

Squiggle Links

Squiggle Link

Inspired by Post link styles on theoutline.com.

Squiggle Link

  <a href="#" class="squiggle">Squiggle Link</a> 
  a.squiggle { color: inherit;...

SVG Logo Minification Trick: Use <text> for trademarks

I don’t mean the actual logo, just the part where you indicate they’re a trademark. These things:

There's a solid argument to be had that a machine-readable, semantic indicator of...

My notes on SVG Animation (for beginners)

SVG Editor:

Affinity designer - one time payment

Adobe Illustrator


anime.js - open source and free

GreenSock - Super powerful animation library for all libraries ...

Using Inkscape SVGs in HTML5

1 - Create an SVG file in Inkscape

Express all your artistic abilites.

2 - Open the SVG with a text editor

Or IDE. In my case, I always use Visual Studio Code, once you open the SVG file we can...

Mask on rotated or scaled svg path

Problem solved: Mask on SVG path doesnt work

In some cases it can happen that a mask or clipPath is displayed incorrectly in the browser. This occurs if the element to be masked is rotated or...

Download 9VAe for Android

9VAe is a powerful free software which can create 2D animation using vector graphics. Use of shape tweening eliminates the need to create animation frame-by frame. You can produce SVG / GIF / APNG...

Writing CSS for High-Contrast Mode

I work on a component library at my job. I sweat over making it accessible, so of course I want the components to be legible in Windows’s High-Contrast Mode. For more information on what that is...

SVG Head

<!DOCTYPE html>

  <meta charset="UTF-8"> <title>Welcome to SVG</title> 

 <g class="beard-group"> <path class="beard"...

Animate text on an SVG closed path

This is an answer to a Stack Overflow question: Animate marquee on SVG curve

So I want to animate text on an elliptic path and the path should scale depending on window size.

Drawing the path


Day027: Scaling SVGs

Tonight I played around with adding in some SVG social media icons into the footer. I was having some trouble scaling the SVGs, but I found this YouTube video really helpful in explaining how SVG...

Conflict in masks in exported SVG icons

SVG has proved a very powerful, useful and popular fileformat for vector graphics. It is only natural that small problems occurs - I discovered one the other day: conflict of masks.

All the most...

SVG with animation

<!DOCTYPE html>

Mayank SVG

<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit--> Layer 1