[B! SVG] turusuke_0のブックマーク

How to use SVG as a Placeholder, and Other Image Loading Techniques

How to use SVG as a Placeholder, and Other Image Loading Techniques I'm passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn't loaded yet. During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post. G

turusuke_0 2017/11/20

リンク

Metaballs

Metaballs, not to be confused with meatballs, are organic looking squishy gooey bl obs. From a mathematical perspective they are an iso-surface. They are rendered using equations such as f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2). Jamie Wong has a fantastic tutorial on rendering metaballs with canvas. We can replicate the metaball effect using CSS & SVG by applying both blur and contrast fi

turusuke_0 2017/10/18

effect
SVG

リンク

Adobe Exchange

turusuke_0 2017/07/13

SVG

リンク

GitHub - Angelmmiguel/svgi: 🔎 The SVG inspection tool

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

turusuke_0 2017/06/07

SVG

リンク

GeoPattern

Save Pattern...

turusuke_0 2015/12/09

SVG
pattern

リンク

幾何学的で美しいSVGパターン画像を生成する『GeoPattern』の紹介 - syonx

GeoPatternとは GeoPatternとは、文字列を与えてSVG画像を生成するライブラリです。与えた文字列はハッシュに変換され、それをもとに幾何学パターン（全16種）や色相、彩度が決定されます。事前に指定することも可能です。本家RubyGem版の他に、有志による各言語での実装が揃っています（後述）。生成した画像はCSSのbackground-imageでの利用が想定されています。タイル型の画像を出力するので、それを縦方向・横方向にリピートして表示します。base64 に変換することもできるので便利ですよ。 GeoPattern が使われているWebサイト GeoPatternの制作者はGitHubのスタッフの方です。それもそのはず、GeoPatternはGitHubのWebサイトで利用されているのです。カッコいいですね〜。 GitHub Explore GitHub Show

turusuke_0 2015/12/08

SVG

リンク

Tumblr

Tumblr is a place to express yourself, discover yourself, and bond over the stuff you love. It's where your interests connect you with your people.

turusuke_0 2015/12/03

SVG

リンク

Rendering SVG Paths in WebGL | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following is a guest post by Matt DesLauriers. Matt combined a bunch of techniques and open source modules to build an incredible demo where simple recognizable icons explode into vector triangles only to reform into a completely new icon. Here he talks about some of the

turusuke_0 2015/10/26

SVG
WebGL

リンク

Animate Elements on a Path with CSS

turusuke_0 2015/10/22

SVG
CSS

リンク

SVGと戯れる　第3話「大量のSVGイラストに個別でアニメーションをつける with Snap.svg 後編」DevJam

こんにちは、ヤムチャーtsukasaです。前回はSVGのマウス移動による視差効果まで作成しました。後編はパーツのアニメーションを作成します！アニメーションのクラスを確認する前回でsvg要素の準備は全て終了しましたが、アニメーションのためにつけたクラスの再確認をしましょう。サンプルでつけたクラスは以下の4つです。 moveX…X軸移動を往復 moveY…X軸移動を往復 shake…一定間隔でガタッと揺れる wink…まばたきをするように一瞬でscaleYを縮め、ゆっくり戻す DOMを指定中編でIDの重複を防ぐためにIDは全てクラスに置き換えましたね。 DOMの指定では複数同じアニメーションをつけるパーツが存在する可能性を想定してselectAllを使用します。アニメーションの開始中編と同じようにnode.setAttributeを使用して要素を変形させます。アニメーションに

turusuke_0 2015/09/10

SVG

リンク

VexFlow - HTML5 Music Engraving

VexFlow is an open-source online music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG. VexFlow has been in development for over 10 years, and used by apps, startups, universities, in all kinds of amazing ways. If you find VexFlow useful, please consider sponsoring me on GitHub.

turusuke_0 2015/07/27

楽譜
SVG

リンク

Paths

Web app for building and editing SVG path elements

turusuke_0 2015/07/15

"Build and edit SVGs in the browser"

SVG

リンク

SVG Porn

SVG logos for developers, designers, bloggers, geeks and more

turusuke_0 2015/07/03

“A collection of svg logos for developers.”

SVG

リンク

Card Expansion Effect with SVG clipPath | Codrops

A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify. Today we are going to create a experimental grid layout with “cards” where we’ll animate the card expansion with a morphing effect on the cover image and follow its motion with a delightful animation of a low-poly pattern used as the background of the page. We are using Trianglify by Qu

turusuke_0 2015/06/19

リンク

Adobe Illustrator’s SVG Interactivity Panel Explained | Envato Tuts+

turusuke_0 2015/04/04

リンク

LazyLine: Best VPN Services

VPN What is VPN and why do you need it?VPN, or Virtual Private Network, is a techno logy that allows you to create a secure and private connection to the internet. With VPN, you can protect your online activities from prying eyes and access the internet with greater freedom and privacy. Learn more about VPN and why it’s essential in today’s digital world. Get Secure Now: The Honest VPN Rating Site

turusuke_0 2015/04/03

SVG

リンク

Textures.js

SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines

turusuke_0 2015/03/26

SVG

リンク

Dtail Studio - Carefully Crafted Digital Experiences

We’re an experienced team that helps clients to articulate their vision and connect with people. Learn what we do and how we do it. We’re an experienced team that helps clients to articulate their vision and connect with people. Learn what we do and how we do it. We’re an experienced team that helps clients to articulate their vision and connect with people. Learn what we do and how we do it.