ชื่อฟอนต์ : มณีSVG

ลิงก์ : https://forum.f0nt.com/index.php/topic,24790.0.html

ข้อมูลการติดต่อ : https://www.facebook.com/worawut.thanawatanawanich

ภาพตัวอย่าง :



ภาพไอคอน :


ภาพโปสเตอร์ :


รายละเอียด :
ฟอนต์ทดลอง ทำสีแบบโปร่งใส และซ้อนทับกัน ไม่เหมาะทั้ง display type และ text type อ่านยาก
color font ตัวนี้ ใช้เทคนิค OpenType SVG ดังนั้นจะแสดงผลได้แต่ s/w บางตัว เช่น adobe, firefox ส่วน Microsoft, chrome ไม่ work  ที่เหลือไม่ทราบ ฝากทดสอบและบอกผลด้วยเด้อ!!

uvSOV

download font :     https://drive.google.com/file/d/1_Exn_d75e-y8njIWsLGfrSCtQfdSpQUz/view?usp=sharing

วันนี้ลอง เอาฟอนต์สี CORL/CPAL มารวมกับ SVG animate .. ได้แฮะ
คือโปรแกรมไหน ไม่รองรับ มันก็เป็นสีเฉยๆ แต่ถ้ารองรับ SVG มันก็ขยับ ยุกยิกๆได้

ผมคิดได้แต่พวก เด้งดึ๋งๆ แต่จะวนเด้งๆไป ก็น่าเบื่อในที่สุด หรือไม่ก็ทำพวกอักษรพิเศษ เช่น logo แล้วมีแสงแว๊บผ่าน เทือกๆนั้น 55
ลองไปค้นๆดู เท่าที่หาๆดู แนวนี้น่าสนใจ น่าจะมาครับ --> animography ใช้สำหรับงาน after effect  (ราคาก็สูงดีนะ) ใช้ jsx หรือไม่ก็ aescript
https://animography.net/collections/typefaces
https://aescripts.com/after-effects/animation-libraries/animated-typefaces/jsx-typeface/
มีตัวฟรีให้ทดลอง download มาศึกษาก่อน  ถ้ามี after effect ใช้ ลองดูครับ (ผมไม่มี 55)

จริง..  นี่ก็ไปแกะ code CSS มาจากที่นี่แหละ แล้วเอากลับมาเขียนใน SVG
แต่ส่วนตัว.. ก็คิดกว่า interactive ผ่าน CSS, javascript น่าจะเหมาะกว่า SVG เอาไว้เป็นส่วน vector แสดงรูป ลูกเล่นเอาไปไว้ที่ web interface

่ไปลองอันนั้นก่อนเลยครับ  ..ลองเอา code มาใช้แล้ว เอาเข้า browser ตรงๆใช้งานได้ แต่เอามาทำ font ไม่ขยับเลย .. ก็เลยไปดูตัวอย่าง พบว่าต้องเขียน code ใน svg ตรงๆ  ส่วน svgator..เน้น animate โดย CSS เป็นหลัก  ซึ่งก็ถูกของเขา แต่ใช้คนละวัตถุประสงค์กัน

เหยยย

ในทางเทคนิคแล้ว SVG + CSS สามารถสร้าง Interactive กับผู้ใช้ได้นอกจากการทำ Animation
เช่นตัวอย่างโค้ดอันนี้ https://codepen.io/chriscoyier/pen/NRwANp
ต่อไปในอนาคตถ้าโปรแกรมในตลาดลองรับได้มากพอสมควรจะเปิดมิติใหม่
ในการสร้างฟอนต์กันเลยทีเดียวจะเป็น Interactive Animation Font (IAF : คิดเอาเอง )  
ความสามารถต่างๆจะรวมอยู่ในไฟล์เดียว OTF, TTF

ในเชิงฟังก์ชันนี่ถือว่าล้ำอนาคตมาก
แต่อยากรู้ฟอนต์แอนิเมชันนี่ จะสามารถใช้งานในโอกาสไหนได้บ้างหนอ

เท่าที่พอนึกออกเร็วๆ (ถ้าโปรแกรมรองรับ)
ก็เช่น เอาไปใส่วิดีโอหนุกๆ / ทำพรีเซนเทชันว้าวๆ

คิดดูก็น่าสนุกมากเลยนะครับ ที่ต่อไปการแอนิเมตงานจะมากับฟอนต์ตั้งแต่แรกเลย โหดมาก

สำหรับคนไม่อยาก coding สำหรับทำ animation www.svgator.com (ไม่ฟรี) เป็นเครื่องมือให้เราสามารถสร้าง animation ได้คล้ายๆกับโปรแกรม Ae, An พร้อม export เป็น .svg signle file. ยังไม่ได้ลองใช้ไม่รู้ว่าจะทำ animation font ได้หรือป่าว ดูโค้ดที่มัน export ออกมาจะกำกับ aniamte ด้วย css แทนกำกับด้วย pure xml  

เบื้องหลัง coding อย่างเมามัน สำหรับ animate font

เนื่องด้วย SVG file เป็นรูปก็จริง แต่มันเป็น XML text file ด้วย ดังนั้น ก็ใช้ editor ปรกติ เขียน code ลงไปเลยตรงๆ สะดวกสุดๆ




reference site https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL  สำหรับพื้นฐาน
ส่วนลูกเล่น ยากๆ ให้ไปดูตัวอย่าง พวกที่เขียนด้วย java script  แล้วแกะ parameter มาใช้งานได้  เพราะส่วนใหญ่ไม่มีใครเขียนลงไปใน SVG ตรงๆแบบนี้