< home


] manual marquee

for this I'll use my existent marquee code from my website:

![](data:image/svg+xml,
  <svg xmlns='http://www.w3.org/2000/svg'>
    <style>
      /*<![CDATA[*/
      text {
        font-family: Georgia, serif;
        font-size: 18px;
        font-weight: 400;
        font-style: italic;
        fill: %23ffffff;
        animation: marquee 6s linear infinite
      }
      @keyframes marquee {
        0%25 { transform: translateX%28100%25%29 }
        100%25 { transform: translateX%28-118.8px%29 }}
      /*]]>*/
    </style>
    <text x='0' y='18' text-anchor='start'>
      Hello World
    </text>
  </svg>
){100%:29}        

i'll explain how to manually change each component and to increase some customisation features I haven't touched in the website.

⨳ text

adding text is easy.

1
2
3
<text x='0' y='18' text-anchor='start'>
Hello World
</text>

put your text between brackets as much as you want. the more text, the more it takes the animation to scroll through


⨳ color

look for the fill option in the code, shall look something like that:

fill: %23ffffff;

in URI encoding, %23 stands before a color code, meaning #! so basically if you want to use a custom color code, just add %23. colors with names like red or blue don't require the %23 before, so simply you would do:

fill: blue;

Don't forget the ; after it so the code could work!


⨳ speed

search for this section

animation: marquee 6s linear infinite

the number 6 preceeded by s means 6 seconds. the smaller the number, the faster the text goes. decimals work here.
example of 10 seconds speed

example of 0.5 seconds speed


⨳ font size

search for this section:

font-size: 18px;

like in rentry, it's self explanatory how font size works. you can use rem and vh too.
i do recommend pixels due to the position of the marquee:
don't forget to change the position why here equal to the changed font-size:

1
2
3
<text x='0' y='18' text-anchor='start'> <- change the y here with the font-size without adding the **px** part
Hello World
</text>

similarly, the text boldness is determined by:

font-weight: 400;

the normal value is 400, higher is bolder. you can also just use font-weight: bold;


⨳ font family

natively, google fonts use an import or out-sourced, and for performance and security reason and cannot be used on rentry. you can still use a plethora of in-built fonts, namely called "safe fonts" that are widely used by any OS. you can find a list of safe fonts here and how they looked rendered on rentry.

changing font is like in css, find the font section:

font-family: Georgia, serif;

now, instead of Georgia we might wanna use Century Gothic. you can pretty much safely put the font without any extra symbols:

font-family: Century Gothic, serif;

it's a good pratice to leave a fallback font here in case the first font fails to be shown by website, especially on older browsers. the priority font is the font that's first listed.

if someone claims rentry is broken or they know a way, it's either they don't understand why this limitation exist or they simply would exploit vulnerabilities in the website's code, which is fundamentally wrong.
you can also just use a family:

font-family: Century Gothic;

⨳ font styles

you can do a lot with some easy features and properties. let's focus on the text class for now:

the blue container is the only one we need to edit.


  1. italic
    add the following property to the container make your text italic
    font-style: italic;
    
  • like this:

  1. small caps
    font-variant: small-caps;
    

makes the text look like this:


  1. shadows
    text-shadow: xpx ypx (blur)px %23XXXXXX;
    

the x represents how far away in horizontal is the shadow away, y is on vertical axis and the XXXXXX is your color code.
Blur is optional but represents the degree of blur for the shadow.
Here is different versions!
Examples


  1. underline and overline
    add the following property to the blue container or text style:
  • same-color underline
    text-decoration: underline;
    
  • same color overline:
    text-decoration: overline;
    
  • combine both:
    text-decoration: underline overline;
    
  • different color and style:
    text-decoration: underline dotted red;
    

There are 5 styles: solid, double, underline, wavy and dashed.
Check examples here


⨳ squishy text

do you want this?
the box is squished <3

this is more easily but since the marquee behaves like an image (mostly), using parameters {30%:29}, whereas first place is the width which is 30% of the container's size and 29, it's height, you can elegantly squish the damned text how you want.
example of {100%:10}

example of {50px:18}


⨳ faded ends

if you got the gist of basic editing, here are is a fun way to make your marque prettier with faded ends:

the code below is used which adds the effect of faded ends:

![](data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'>
    <defs>
      <mask id='m'>
        <rect width='100%25' height='100%25' fill='white'/>
        <rect width='15%25' height='100%25' fill='url%28%23fadeL%29'/>
        <rect x='85%25' width='15%25' height='100%25' fill='url%28%23fadeR%29'/>
      </mask>
      <linearGradient id='fadeL' x1='0' x2='1'>
        <stop offset='0' stop-color='black'/>
        <stop offset='1' stop-color='white'/>
      </linearGradient>
      <linearGradient id='fadeR' x1='0' x2='1'>
        <stop offset='0' stop-color='white'/>
        <stop offset='1' stop-color='black'/>
      </linearGradient>
    </defs>
    <style>
      /*<![CDATA[*/
      g {
        mask: url%28%23m%29
      }
      text {
        font-family: Segoe Script, serif;
        font-size: 18px; 
        font-weight: 400; 
        fill: black;
        animation: scroll 2s linear infinite
      }
      @keyframes scroll {
        0%25 { transform: translateX%28100%25%29 }
        100%25 { transform: translateX%28-118.8px%29 }
      /*]]>*/
    </style>
    <g>
      <text x='0' y='18'>
        Hello World
      </text>
    </g>
  </svg>
){100%:29}

using previous information, only edit the blue box for color. the other mentions of color in the code are masks, not the actual color of the code. the pink box is where your text goes:

Edit

Pub: 17 Feb 2026 19:17 UTC

Edit: 18 Feb 2026 01:32 UTC

Views: 11

Auto Theme: Light