Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Cool Staff of SVG
Search
huozhi
November 23, 2016
Technology
250
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Cool Staff of SVG
Interesting ideas of SVG. Cook with React.
huozhi
November 23, 2016
Transcript
10 slides
Cool Staff of SVG We LOVE ❤ SVG
Fundamental SVG reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths Shape A + Shape B =>
Awesome Graphics line path circle rect polyline polygon ellipse
Why SVG? What’s special? Easily controlled by PROPS fill, stroke-width,
stroke-linecap Good Compatibility DOM structured <svg><path d=“…”></svg> Positioning easily x, y, r, cx, cy, x1, y1…
Control Your SVG with React Original Way Now we have
React ! =>
RESPINNER was born ! https://huozhi.github.io/respinner/
Improve present situation we wanna control more details only single
path icons?
REICONS was born ! https://huozhi.github.io/reicons/
Complex Application Scenarios d3 force layout graph multi-layer dependency complex
relationship d3 geographic map fancy background image meaning data visualization
Interesting Extension ISOMORPHIC JS Service serve static icons generate graphics
request specific query, response dynamic visual display
– huozhi Q & A
More Decks by huozhi
See All by huozhi
About Compilation
huozhi
0
140
Other Decks in Technology
See All in Technology
これからのデータエンジニアの役割について考える / Rethinking the Role of Data Engineers in the AI Era
okiyuki99
0
490
市販IoT機器や自作IoT機器とHomeAssistantを駆使して家の電気代をできる限り見える化する方法の考案
harutiro
0
240
人間+AIを「チーム」としてプロセスを再設計する
littlehands
4
3k
アラートを見直していたら営業組織への理解にちょっとだけ繋がった話
z63d
1
200
JAWS_FESTA2026_オンプレ-AWS間プロキシサーバの移行_性能_障害対応で得た実践ノウハウ_高島一晃.pdf
tkazuaki0820
1
130
Linuxネットワークスタック進化の軌跡: 過去10年の歩みと最新トレンド
orimanabu
4
710
Kiro を使うコツ (頼み方、覚えさせ方、任せ方) | 目指せ Kiro マスター 09
inariku
PRO
3
170
Kiro アップデート 2026 年 11 月号 (11 月 8 日時点) | 目指せ Kiro マスター アップデート編
inariku
PRO
2
130
Agent Harnessはどう作る?事例から学ぶAI Agentの設計思想
sergicalsix
0
320
目を覚ませ!僕らの認証情報が何者かに侵略されてるぞ
tkito
1
250
Quick Automate | 目指せ Quick マスター 12
inariku
PRO
1
110
セキュリティ専任チームなしで攻撃を先回りするSREが実践したSIEM on Amazon OpenSearch Service
cscengineer
PRO
1
900
Featured
See All Featured
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
610
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.3k
Unsuck your backbone
ammeep
672
58k
Chasing Engaging Ingredients in Design
codingconduct
0
400
StorybookのUI Testing Handbookを読んだ
zakiyama
31
7.1k
Designing for humans not robots
tammielis
254
26k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
830
Deep Space Network (abreviated)
tonyrice
0
420
Building Better People: How to give real-time feedback that sticks.
wjessup
371
20k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
6
1.3k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Product Roadmaps are Hard
iamctodd
55
13k