Submit Search
Upload
Raphael
•
5 likes
•
1,393 views
Dmitry Baranovskiy
Follow
Web Standards Group talk about Raphaël — JavaScript Vector Library http://raphaeljs.com
Read less
Read more
Technology
Art & Photos
Report
Share
Report
Share
1 of 44
Download now
Download to read offline
Recommended
Loom & Functional Graphs in Clojure @ LambdaConf 2015
Loom & Functional Graphs in Clojure @ LambdaConf 2015
Aysylu Greenberg
Loom at Clojure/West
Loom at Clojure/West
Aysylu Greenberg
Loom and Graphs in Clojure
Loom and Graphs in Clojure
Aysylu Greenberg
DrawingML Subject: Shape Properties & Effects
DrawingML Subject: Shape Properties & Effects
Shawn Villaron
Raphaël JS Conf
Raphaël JS Conf
Dmitry Baranovskiy
RaphaëlJS magic
RaphaëlJS magic
Kseniya Redunova
Raphaël
Raphaël
Dmitry Baranovskiy
JavaScript: enter the dragon
JavaScript: enter the dragon
Dmitry Baranovskiy
Recommended
Loom & Functional Graphs in Clojure @ LambdaConf 2015
Loom & Functional Graphs in Clojure @ LambdaConf 2015
Aysylu Greenberg
Loom at Clojure/West
Loom at Clojure/West
Aysylu Greenberg
Loom and Graphs in Clojure
Loom and Graphs in Clojure
Aysylu Greenberg
DrawingML Subject: Shape Properties & Effects
DrawingML Subject: Shape Properties & Effects
Shawn Villaron
Raphaël JS Conf
Raphaël JS Conf
Dmitry Baranovskiy
RaphaëlJS magic
RaphaëlJS magic
Kseniya Redunova
Raphaël
Raphaël
Dmitry Baranovskiy
JavaScript: enter the dragon
JavaScript: enter the dragon
Dmitry Baranovskiy
Rembrandt, portraits and details (v.m.)
Rembrandt, portraits and details (v.m.)
Valeriu Margescu
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
guimera
What the Hell is the Internet Anyway? - A History of the Web
What the Hell is the Internet Anyway? - A History of the Web
Vimi.co Ltd - Bangkok Web Agency
H ren through michelangelo
H ren through michelangelo
NCS
Barroco III
Barroco III
Arquivos-arte
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
guimera
VERMEER, Johannes, Featured Paintings in Detail (1)
VERMEER, Johannes, Featured Paintings in Detail (1)
guimera
Egyptian Paintingteam 10
Egyptian Paintingteam 10
xmeowxmixx
Modern World History: Chapter 1
Modern World History: Chapter 1
ldaill
Michelangelo
Michelangelo
Arquivos-arte
ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1
Edeliza Macalandag
Jan van Eyck
Jan van Eyck
Jerry Daperro
Renoir
Renoir
SvetlanaMasenko
Ancient Egyptian Civilization
Ancient Egyptian Civilization
Jesuit Tertianship in Dublin, Ireland
Raphael Art and Life
Raphael Art and Life
Denver School of the Arts, Denver Public Schools
Michelangelo - Cappella Sistina
Michelangelo - Cappella Sistina
Sotirios Raptis
History of painting
History of painting
SFYC
History of Internet Searching
History of Internet Searching
Scott Lee
History of the_internet
History of the_internet
Apostolos Syropoulos
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
guimera
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
David Isbitski
More Related Content
Viewers also liked
Rembrandt, portraits and details (v.m.)
Rembrandt, portraits and details (v.m.)
Valeriu Margescu
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
guimera
What the Hell is the Internet Anyway? - A History of the Web
What the Hell is the Internet Anyway? - A History of the Web
Vimi.co Ltd - Bangkok Web Agency
H ren through michelangelo
H ren through michelangelo
NCS
Barroco III
Barroco III
Arquivos-arte
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
guimera
VERMEER, Johannes, Featured Paintings in Detail (1)
VERMEER, Johannes, Featured Paintings in Detail (1)
guimera
Egyptian Paintingteam 10
Egyptian Paintingteam 10
xmeowxmixx
Modern World History: Chapter 1
Modern World History: Chapter 1
ldaill
Michelangelo
Michelangelo
Arquivos-arte
ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1
Edeliza Macalandag
Jan van Eyck
Jan van Eyck
Jerry Daperro
Renoir
Renoir
SvetlanaMasenko
Ancient Egyptian Civilization
Ancient Egyptian Civilization
Jesuit Tertianship in Dublin, Ireland
Raphael Art and Life
Raphael Art and Life
Denver School of the Arts, Denver Public Schools
Michelangelo - Cappella Sistina
Michelangelo - Cappella Sistina
Sotirios Raptis
History of painting
History of painting
SFYC
History of Internet Searching
History of Internet Searching
Scott Lee
History of the_internet
History of the_internet
Apostolos Syropoulos
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
guimera
Viewers also liked
(20)
Rembrandt, portraits and details (v.m.)
Rembrandt, portraits and details (v.m.)
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
REMBRANDT Harmenszoon Van Rijn, Featured Paintings in Detail
What the Hell is the Internet Anyway? - A History of the Web
What the Hell is the Internet Anyway? - A History of the Web
H ren through michelangelo
H ren through michelangelo
Barroco III
Barroco III
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
Vienna, Kunsthistorisches Museum: Picture Gallery, The Masterpieces
VERMEER, Johannes, Featured Paintings in Detail (1)
VERMEER, Johannes, Featured Paintings in Detail (1)
Egyptian Paintingteam 10
Egyptian Paintingteam 10
Modern World History: Chapter 1
Modern World History: Chapter 1
Michelangelo
Michelangelo
ARTID111 Ancient Egyptian Art - Part 1
ARTID111 Ancient Egyptian Art - Part 1
Jan van Eyck
Jan van Eyck
Renoir
Renoir
Ancient Egyptian Civilization
Ancient Egyptian Civilization
Raphael Art and Life
Raphael Art and Life
Michelangelo - Cappella Sistina
Michelangelo - Cappella Sistina
History of painting
History of painting
History of Internet Searching
History of Internet Searching
History of the_internet
History of the_internet
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
DAVID, Jacques-Louis,Featured Paintings in Detail (1)
Similar to Raphael
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
David Isbitski
SVG
SVG
Dmitry Baranovskiy
SVGo workshop
SVGo workshop
Anthony Starks
Intro to HTML5 Canvas
Intro to HTML5 Canvas
Juho Vepsäläinen
Raphaël and You
Raphaël and You
Trotter Cashion
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
Mindfire Solutions
An Introduction to NV_path_rendering
An Introduction to NV_path_rendering
Mark Kilgard
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
DouO
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
DouO
Html5 Canvas and Media
Html5 Canvas and Media
Suresh Balla
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
David Isbitski
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
Justin Dorfman
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Robin Hawkes
楽々Scalaプログラミング
楽々Scalaプログラミング
Tomoharu ASAMI
Specs2, go functional
Specs2, go functional
specs2
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
Spiffy
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Codemotion
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
Similar to Raphael
(20)
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
SVG
SVG
SVGo workshop
SVGo workshop
Intro to HTML5 Canvas
Intro to HTML5 Canvas
Raphaël and You
Raphaël and You
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
An Introduction to NV_path_rendering
An Introduction to NV_path_rendering
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
Html5 Canvas and Media
Html5 Canvas and Media
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
楽々Scalaプログラミング
楽々Scalaプログラミング
Specs2, go functional
Specs2, go functional
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
More from Dmitry Baranovskiy
The Origins of Magic
The Origins of Magic
Dmitry Baranovskiy
Demystifying Prototypes
Demystifying Prototypes
Dmitry Baranovskiy
Type Recognition
Type Recognition
Dmitry Baranovskiy
Obvious Secrets of JavaScript
Obvious Secrets of JavaScript
Dmitry Baranovskiy
Your JavaScript Library
Your JavaScript Library
Dmitry Baranovskiy
Canvas
Canvas
Dmitry Baranovskiy
Java Script Workshop
Java Script Workshop
Dmitry Baranovskiy
Web Vector Graphics
Web Vector Graphics
Dmitry Baranovskiy
Typography on the Web
Typography on the Web
Dmitry Baranovskiy
Microformats—the hidden treasure
Microformats—the hidden treasure
Dmitry Baranovskiy
Advanced JavaScript Techniques
Advanced JavaScript Techniques
Dmitry Baranovskiy
More from Dmitry Baranovskiy
(11)
The Origins of Magic
The Origins of Magic
Demystifying Prototypes
Demystifying Prototypes
Type Recognition
Type Recognition
Obvious Secrets of JavaScript
Obvious Secrets of JavaScript
Your JavaScript Library
Your JavaScript Library
Canvas
Canvas
Java Script Workshop
Java Script Workshop
Web Vector Graphics
Web Vector Graphics
Typography on the Web
Typography on the Web
Microformats—the hidden treasure
Microformats—the hidden treasure
Advanced JavaScript Techniques
Advanced JavaScript Techniques
Recently uploaded
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Khem
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Recently uploaded
(20)
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Raphael
1.
Raphaël JavaScript Library for
Vector Graphics Dmitry Baranovskiy WSG meeting 11 March 2009
2.
Cool
3.
4.
Cool Cool Cool
WTF
5.
6.
Raphaël
7.
8.
What is it
for?
9.
Demo
10.
What is it?
11.
JavaScript
12.
window.onload = function
() { var hldr = document.getElementById(quot;holderquot;); var text = hldr.getElementsByTagName(quot;pquot;)[0].innerHTML; hldr.innerHTML = quot;quot;; var R = Raphael(quot;holderquot;, 640, 480), txt = R.set(), attr = {quot;fontquot;: '50px quot;Georgiaquot;', opacity: 0.5}; txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#0f0quot;)); txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#f00quot;)); txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#00fquot;)); txt.attr(attr); var mouse = null, rot = 0; document.onmousemove = function (e) { if (mouse === null) { mouse = e.pageX; return; } rot += e.pageX - mouse; txt[0].rotate(e.pageX - mouse); txt[1].rotate((e.pageX - mouse) /1.5); txt[2].rotate((e.pageX - mouse) /2); mouse = e.pageX; }; };
13.
window.onload = function
() { var hldr = document.getElementById(quot;holderquot;); var text = hldr.getElementsByTagName(quot;pquot;)[0].innerHTML; hldr.innerHTML = quot;quot;; var R = Raphael(quot;holderquot;, 640, 480) 480), txt = R.set(), attr = {quot;fontquot;: '50px quot;Georgiaquot;', opacity: 0.5}; txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#0f0quot;)); txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#f00quot;)); txt.push(R.text(320, 240, text).attr(quot;fillquot;, quot;#00fquot;)); txt.attr(attr); var mouse = null, rot = 0; document.onmousemove = function (e) { if (mouse === null) { mouse = e.pageX; return; } rot += e.pageX - mouse; txt[0].rotate(e.pageX - mouse); txt[1].rotate((e.pageX - mouse) /1.5); txt[2].rotate((e.pageX - mouse) /2); mouse = e.pageX; }; };
14.
How does it
work?
15.
Canvas
SVG VML
16.
Canvas
SVG VML pixels DOM DOM
17.
SVG
VML
18.
DOM?
19.
SVG
VML
20.
API
21.
circle ellipse image path rect text
22.
animate
attr getBBox hide circle insertAfter ellipse insertBefore image remove path rotate scale rect text show stop toBack toFront translate
23.
animate
attr getBBox hide circle insertAfter ellipse insertBefore image remove path rotate scale rect text show stop toBack toFront translate
24.
fill
animate fill-opacity attr font getBBox font-family hide font-size gradient circle insertAfter opacity ellipse insertBefore rotation image remove scale path rotate stroke scale rect stroke-dasharray text show stroke-linecap stroke-linejoin stop stroke-miterlimit toBack stroke-opacity toFront stroke-width translate translation
25.
fill
animate fill-opacity attr font cx getBBox font-family cy hide font-size height gradient circle insertAfter path opacity ellipse insertBefore r rotation image remove rx scale path rotate stroke ry scale rect stroke-dasharray src text show stroke-linecap width stroke-linejoin stop x stroke-miterlimit toBack y stroke-opacity toFront stroke-width translate translation
26.
27.
28.
29.
Element.node
30.
Circle.node.onclick =
function () {…};
31.
$(Circle.node).click(…);
32.
16 Kb
33.
34.
35.
36.
37.
0.6.4
38.
0.7
39.
gRaphaël
40.
Yet Another Demo
41.
Raphaël could make
you stand out of the crowd.
42.
Using Raphaël could
amaze your colleagues
43.
http://RaphaelJS.com/
44.
Thank You
Download now