cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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 tasked...

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,

simple

instead of

Look Ma, no CSS nor JS!!!


have svg frames

picture description


animated

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

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:

establishing...

KOMORI'S SVG ANIMATION "01sharks"

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

Original[[[pen...

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.

[[[pen...

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.

[[[pen...

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

tl;dr

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 few...

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 to...

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

openclip-svg.jpeg

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.

SVG SMIL...

How to make Animated GIF from Openclipart?

9va-openunicon.gif

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 SVG ...

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 Firefox...

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

Colors

[[[pen...

Chillwave

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 animation.

I...

Export Animated GIF in 9VAe

AnimatedGIFsample320-10.gif

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. It can...

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 guess...

Simmons.com Pattern Library

Basic Elements

Colors

Simmons.com - Colors

Typography

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.You can produce...

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

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

Download

Download (Click

Untitled.png

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

9VAe Beginner Tutorial 0 - Overview

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

9vae128.gif

User Interface

Here is an overview of the 9VAe interface.

9vae3Screen.png

Tool Box

Editing Tool

Play / Stop...

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.

001

First Step

anime07.gif

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

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'.

002

Make AnimeCast and Rotate

anime11.gif

This tutorial...

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.

00b

Edit AnimeCast

anime20.gif

This tutorial is a...

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'.

00c

Time Curve, Copy Pages

anime29.gif

This...

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 play...

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

Colors

Industrial.Hunterfan.com - Colors

Typography

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 editor...

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

barrelFish00.png

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

barrelFish.gif

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

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. D3...

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

anime3b.gif

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!

eJZjPQ

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

Introduction

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

Preface

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:

[[[pen...

Code Valentines

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

HTML

  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

ExPeRiMenTS

With patterns inside of svg and circles. so Fast!

play

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 following...

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...

canvas - drawing : [ Cubic Bezier ]

canvas - drawing : [ Cubic Bezier ]

test????(:3冫 ノ)ノ

黒板 : canvas 要素 描画テスト (m)

[ select ] : SVG の path 要素の d 属性値 (add | set) ボタンクリックで登録

[ textbox ] : SVG の path 要素の d 属性値

[...

SVG : easing [ Cubic Bezier ]

js : easing [ Cubic Bezier ]


get で取得した applyData の値を読み込ませると、制御点座標を復元します。

パス上 click 制御点追加

[ 制御点 ] drag 制御点 移動

[ 制御点上 ] ctrl + drag 制御点 円 移動

[ 制御点 : 四角上 ] ctrl + click ...

canvas - drawing : [ Cubic Bezier 2 ]

canvas - drawing : [ Cubic Bezier 2]

test????(:3冫 ノ)ノ

黒板 : canvas 要素 描画テスト (m)

[ select ] : SVG の path 要素の d 属性値 (add | set) ボタンクリックで登録

[ textbox ] : SVG の path 要素の d 属性値

[...

svg - drawing : [ Cubic Bezier ]

svg- drawing : [ Cubic Bezier ]

Cubic Bezier
svg, drawing, cubic bezier,test

svg-drawing-(b) : [Cubic Bezier]

svg-drawing-(b) : [Cubic Bezier]

A curve passing through three points is called a Bezier curve
test...
svg-drawing : [Cubic Bezier]
svg,Cubic Bezier,bezier...

SVG Sprites

Updated 2/13/18

Introduction

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 time,...

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 love...