uncleflo
Registered since September 28th, 2017
Has a total of 4246 bookmarks.
Showing top Tags within 20 bookmarks
howto information development guide reference administration design website software solution service product online business uk tool company linux code server system application web list video marine create data experience description tutorial explanation technology build blog article learn world project boat download windows security lookup free performance javascript technical network control beautiful support london tools course file research purchase library programming image youtube example php construction html opensource quality install community computer profile feature power browser music platform mobile user process work database share manage hardware professional buy industry internet dance advice installation developer 3d search access customer material camera travel test standard review documentation css money engineering develop webdesign engine device photography digital api speed source program management phone discussion question event client story simple water marketing yacht app content setup package fast idea interface account communication cheap compare script study market live easy google resource operation startup monitor training
Tag selected: svg.
Looking up svg tag. Showing 20 results. Clear
Three.js – JavaScript 3D Library
Saved by uncleflo on January 16th, 2022.
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples. The recommended format for importing and exporting assets is glTF (GL Transmission Format). Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. three.js provides loaders for many other popular formats like FBX, Collada or OBJ as well. Nevertheless, you should always try to establish a glTF based workflow in your projects first. For more information, see loading 3D models.
three project cross-browser general library build webgl opengl gpu svg css3d renderer html javascript transmit workflow example beautiful impressive browser develop web development administration import howto information developer game
How to Approach SVG Animations: A CSS Tutorial | Toptal
Saved by uncleflo on January 14th, 2022.
Animations make websites look more polished and exciting, and help improve user experience. Explore how the combined potential of SVG and CSS can be leveraged to create animations without relying on external libraries. Animations are a ubiquitous part of the web. Unlike the flashing GIF images that plagued websites in the internet's earlier days, today's animations are more subtle and tasteful. Designers and front-end specialists use them to make websites look more polished, enhance the user experience, call attention to important elements, and convey information. Web developers can benefit from combining the power of SVG and CSS to create animations without using external libraries. This SVG animation tutorial shows how to build custom animations for real-world projects. Before animating SVGs with CSS, developers need to understand how SVGs work internally. Fortunately, it's similar to HTML: We define SVG elements with XML syntax and style them with CSS, just as if they were HTML.
svg css animation library improve user experience polish excite beautiful interact animate image website internet technology modern tutorial explanation story howto html element xml syntax enhance designer frontend user talent profile experience
Gear Generator
Saved by uncleflo on December 20th, 2019.
Gear Generator is a tool for creating involute spur gears and download them in DXF or SVG format. In addition it let you compose full gear layouts with connetcted gears to design multiple gears system with control of the input/output ratio and rotation speed. Gears can be animated with various speed to demonstrate working mechanism. Why this tool was created? Just for fun. I'm working on a hobby project, a scale construction machine, which needed some spur gears, and I quickly made a simple spur gear creator script in Javascript with SVG output. As it was done, I couldn't stop, and I added more and more features, and finally I got this tool. It was a pleasure to code the whole thing, I'm a bit sad it is already done.
gearset gear generator render spur compatibility tool pitch vector demonstrate rotation creator teeth prototype measured scale machine script svg output useful engineering toolbox creativity
SVG on the Web - A Practical Guide
Saved by uncleflo on May 5th, 2018.
We live in the age of pixels. As designers & developers of the web, pixels can be both our friends and our enemies. We want everything to look nice and sharp for anyone who uses any of the websites we work on, but we need to keep file sizes down for performance. There is pretty much only one way to go with icons, logos and illustrations on the web — SVG. Scalable Vector Graphics can look crisp at all screen resolutions, can have super small file sizes, and can be easily edited and modified. This guide aims to give a practical overview of how you can use SVGs on your websites — with some tips and tricks along the way to get the most out of them.
svg howto use web website animate tip trick overview sharp performance vector graphic practical development administration design technical article description
SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
Saved by uncleflo on May 5th, 2018.
SVG files, especially those exported from various editors, usually contain a lot of redundant and useless information. This can include editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting the SVG rendering result.
svg optimize editor reduce minify clean element meta render convert image graphic used tool github development administration
SVG Gradient Background Maker
Saved by uncleflo on April 7th, 2018.
Use this demo to create SVG-based CSS background-image gradients. The CSS markup works in browsers which support SVG as a background-image including Internet Explorer 9, Chrome, Safari, and Opera.
demo svg css background image gradient markup browser support make create creativity test tool development
SVG Animation A PEN BY jjperezaguinaga
Saved by uncleflo on June 23rd, 2017.
This SVG demonstration shows an example image created in SVG, colors, and other patterns to create a very nice and smooth animated SVG image, rendereable in the browser. By Jose Aguinaga, http://jjperezaguinaga.com Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)
svg animation illustrator graphic computer design browser theme color line vector development howto demonstration example create adobe plugin generate
Circle of icons that illustrate Global Warming Solutions
Saved by uncleflo on June 23rd, 2017.
Demonstrate the power of SVG in animated format. This design focuses on the theme of Global Warming Solutions, using vector icons, javascript and other methods, into the browser.
demonstration demo html beautiful design graphic svg technology vector code embed theme create illustrate illustrator image animation
The ultimate SVG guide | PSDtoWP.net
Saved by uncleflo on June 13th, 2015.
Scalable vector graphics, abbreviated as SVG, are web-based image formats which are used for vector-based-graphics whereby animations and interactivity are supported. SVG defines the graphics in XML format and when SVG's are zoomed, enlarged or scaled down the quality won’t be affected. SVG's have quite some benefits compared to normal images and canvas-based displays. SVG's aren’t often used by developers because they simply don’t know about SVG's or because they seem to be too complicated. Find below a clear overview of the various SVG benefits:
svg tutorial logo design guide graphics complicated xml format zoom quality development administration overview benefit why explanation edit howto
Gallery · mbostock/d3 Wiki · GitHub
Saved by uncleflo on June 13th, 2015.
Welcome to the D3 gallery! More examples are available on bl.ocks.org/mbostock. If you want to share an example and don't have your own hosting, consider using Gist and bl.ocks.org. If you want to share or view live examples try runnable.com or vida.io.
visualization javascript d3 data open source development visual graph index reference lookup share example host gallery svg scale vector graphics
D3 Tree
Saved by uncleflo on June 13th, 2015.
A tree implemented using D3. Structually this is a binary tree and each branch is generated algorithmically. Some randomness is incorporated making it look more like a real tree. This piece blurs the distinction between generative art and data visualisation. Arguably this isn't a data visualisation because no external data is used. However, the code does generate data for each branch (start point, angle, length and parent) and binds this data to SVG line elements using D3. Be sure to click regenerate to see how well the awesome D3 handles the transition! Another nice feature is that when hovering over a branch the route back to the root is highlighted.
tree d3 svg structure nice beautiful javascript select hover binary visualisation code branch example guide howto
svg.js - A lightweight JavaScript library for manipulating and animating svg
Saved by uncleflo on June 13th, 2015.
The code above is the the exact same code used to create the masked header at the top of this page. With svg.js you have all the power of vector graphics at pocket size. Are you intrigued? See it in action!
library animation javascript svg framework js lightweight browser development manipulation header
Understanding SVG Coordinate Systems & Transformations (Part 1) – The viewport, viewBox, & preserveAspectRatio
Saved by uncleflo on June 13th, 2015.
SVG elements aren't governed by a CSS box model like HTML elements are. This makes positioning and transforming these elements trickier and may seem—at first glance—less intuitive. However, once you understand how SVG coordinate systems and transformations work, manipulating SVGs becomes a lot easier and makes a lot more sense. In this article we're going to go over three of the most important SVG attributes that control SVG coordinate systems: viewport, viewBox, and preserveAspectRatio.
svg tutorial tips graphics design viewport viewbox transformation coordination system manipulation scale development designing canvas introduction explanation guide easy
SVG Basics Tutorials - Scalable Vector Graphics by Hand
Saved by uncleflo on June 13th, 2015.
Welcome to the SVGBasics tutorials. Scalable Vector Graphics (SVG) is a standard from the W3C which is built on top of XML. The SVG standard describes ways that graphics can be drawn for use on the web. I've assembled here some examples that you can freely modify and reuse. The idea is to cover the basics with numerous examples that people can experiment with to get an idea of what SVG can do. The Scalable Vector Graphics (SVG) recommendation comes from the W3C. The recommendation describes how to create vector graphics using a mark up language. Because SVG is based on XML, tools that already know how to interpret XML will be able to interpret SVG. Having this well-established standard as a foundation saves a lot of the work in defining the language. It also means that there are numerous tools around which can check the structure of an SVG document or read it to pull out interesting information.
svg graphics browser vector scale hand tutorial xml howto development step-by-step description structure document language tool information font curve line transformation shape basic text light image source
SVG Fallbacks | CSS-Tricks
Saved by uncleflo on June 13th, 2015.
There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting stuff including a bit of unexpected behavior that is a bit of a bummer.
svg fallback image technical trick css html5 png article information development html technique method behavior support android include download display
All Standards and Drafts - W3C
Saved by uncleflo on July 16th, 2014.
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential. Contact W3C for more information.
webdesign development draft standard w3c list reference lookup information core application device digital xml svg css csv tool administration membership
Raphaël—JavaScript Library
Saved by uncleflo on May 29th, 2014.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
javascript svg library vector framework graphics js graph raphael browser widget interactive user live update dynamic object graphical
FXG 1.0 Specification - Flex SDK - Adobe Open Source
Saved by uncleflo on September 6th, 2011.
FXG 1.0 describes an XML-based graphics interchange format for the Flash Platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform and visually modify basic vector and bitmap shapes. The FXG rendering model follows very closely the Flash Player 10 rendering model and exposes all graphics capabilities of the Flash platform as well as offering expandable support to accommodate future capabilities of the Flash Player. The specification below dives into the technical details governing every element of FXG 1.0.
fxg svg specification adobe format information reference shape circle vector bitmap graphic flash platform text primitive technical
Paths – SVG 1.1 (Second Edition)
Saved by uncleflo on September 6th, 2011.
Paths represent the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three. (See Filling, Stroking and Paint Servers and Clipping, Masking and Compositing.) A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. The position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves. Paths represent the geometry of the outline of an object, defined in terms of moveto (set a new current point), lineto (draw a straight line), curveto (draw a curve using a cubic Bézier), arc (elliptical or circular arc) and closepath (close the current shape by drawing a line to the last moveto) elements. Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects.
svg paths shape fill clip mask stroke pen position graphics reference standards
Paths – SVG 1.1 (Second Edition)
Saved by uncleflo on August 17th, 2011.
Paths represent the outline of a shape which can be filled, stroked, used as a clipping path, or any combination of the three. (See Filling, Stroking and Paint Servers and Clipping, Masking and Compositing.) A path is described using the concept of a current point. In an analogy with drawing on paper, the current point can be thought of as the location of the pen. The position of the pen can be changed, and the outline of a shape (open or closed) can be traced by dragging the pen in either straight lines or curves.
fill path svg format specification element vector development
No further bookmarks found.