漫画对话框：漫画风格的文本 - 踏得网

Comic Book Dialog: Staggered & Fainting Text

svg, cartoon

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3209
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<section>
    <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 550 200">
        <path d="M131.6,121.2c-13.8-0.2-12.5-25.6-28.9-30.7c-12-3.7-23,7.9-29,18.9
c-4.7,8.5-8.5,17.5-11.6,26.7c-1.1-12.6,2.7-24.7,8.3-36c2.4-4.7,6.2-9.2,10.3-12.6c6.9-5.6,13.9-8.2,22.8-8.7
c6.8-0.4,13.9-0.2,19.8,3.1c5.9,3.3,10.1,10.5,7.9,17c4.2,1.8,8.6-2.5,9.9-6.9c1.4-4.3,2.4-8.5,4.9-12.3c4.1-6.2,11.7-7.4,19.1-7.2
c8.5,0.2,17.1,0.5,25.6,0.7c4.3-8.8,13.7-19.8,22.5-24c17.1-8.2,35.2-7.2,53.6-11.5c15.3-3.5,11.3-5.3,26.6-8.8
c12.9-3,34.2-5.2,48.9-5.4c8.2-0.2,25.5,2.5,33.4,4.7c6.3,1.8,13.9,1,20.3,2.1c7.2,1.2,13.1,4.3,20.5,4.6c11.2,0.6,23.4,0,33.7,4.3
c10.4,4.3,21.5,17.2,21.4,16.6c4.2,6.6,6.3,13.4,11.1,20.5c5.4,8,7.9,30,5.3,40.3c-3.8,14.6-15.2,14.4-29.5,19.1
c-18.3,6.1-20.3,6.1-39.4,9.2c-11.3,1.8-25.6,8.3-40,9.1c-24.1,1.2-49.4,3.6-68.8,3.6c-16.7,0-30.9-0.4-50.8-1.8
c-16-2.6-27.1-4.8-41.4-10.8c-4.1-1.7-8.2-3.5-11.2-6.8c-2.9-3.2-15.6-24.2-17.8-28c-4.7-8-6.5-7.9-20.6-12.6
c-2.6-0.9-5.4-1.5-8.1-1c-2,0.4-3.6,2-5.6,2.7C140.4,104.6,142.4,117.5,131.6,121.2z" />
        <text x="220" y="80" dy="0 0 -5 5 5 0 0 -5 5 0 0 0 -3 5 0 3 -3 -3 3 3 -2">
            <tspan>…TALKING… LIKE</tspan>
            <tspan x="250" y="120" class="shatner">SHATNER…</tspan>
        </text>
    </svg>
</section>
<section>
    <svg version="1.1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 216 175">
        <path d="M61.5,172.6c0,0,18-11,20-19s-4.3-12.2-0.8-18.7s32.6-17.2,35.6-18.2
s8.7-9.6,7.7-13.1s-3-7-3-7s5.5-0.9,7.6-0.6s16.9,1.8,20.8,0.9s7.6-2.5,11.2-3.1s8.8,0.1,13.1-0.6s11.5-2.2,19.4-7.4
s9-6.2,10.2-7.2s8.4-8.2,9.5-19.1s-6.4-16.1-8.2-18.2s-2.6-7.6-7.2-12.1s-12.6-6.2-21.9-11.1s-7.2-9.6-17.2-13S146,6,138.5,6.1
s-9-1.4-14.5-1.5s-13.5,0.5-16.5,1.1s-6.8,1.8-14.2,1.9s-8.5-2.2-17.8-1.1s-8.8,2.9-14,4S44,13.6,41.8,14s-10.1,3.2-12.5,6.6
s-3.5,5.8-6.1,8.2S8.7,38.8,6.2,45.1S3,61.5,4,65.9s3.5,6.5,5.6,7.8s4.1,1.8,6.2,4c2.1,2.2,3.8,9,7.3,11.4c3.5,2.4,5.8,4,10.2,4.3
c4.3,0.3,14.3-0.7,18,0.3c3.7,1,8.1,3.9,15.4,4.5c7.3,0.6,13.7-2.9,22.1-2.6c8.3,0.2,11.4,4.2,14,4.5c2.5,0.2,4.5,0,6.2,0
c1.3,3.2,2,8-1.9,9.9c-3.9,1.9-24.8,9.6-27.6,11.3s-8,6.3-8.8,10.1c-0.8,3.8,1.1,8.9,3.1,12.2c1.9,3.3,4.1,8.9,2.6,12.1
C74.8,158.9,71.7,164.6,61.5,172.6z" />
        <text font-size="20" y="45" x="30">FROM HELL’s HEART</text>
        <text font-size="18" y="65" x="80">I STAB</text>
        <text font-size="14" y="80" x="80">AT THEE…</text>
        <line x1="137" y1="72" x2="140" y2="74" />
        <line x1="144" y1="74" x2="147" y2="72" />
        <line x1="146" y1="76" x2="150" y2="76" />
        <line x1="146" y1="78" x2="150" y2="80" />
        <line x1="137" y1="80" x2="140" y2="78" />
        <line x1="135" y1="76" x2="140" y2="76" />
    </svg>
</section>