Love to Hear From You! ×
Have any questions, feedback, bug to report? Is there something you'd want to see? Don't hesitate to reach out.
esc
Please type atleast two characters for search.

How to Create Marker Highlight Effect with SVGBox?

posted 10 months ago

Highlighting text in the copy is a great way to draw attention to certain phrases in a relatively longer text. And there's even better way to make it more effective: make the highlight look like it's marked. An example can be seen on Hotjar's landing page.

Now you can create the same effect with pen burshes iconset on SVGBox by using them as background images and customizing the fill color. Let's see how:

Creating the Marker Effect

I'll use the brush-9 to create the simplest effect possible.

<style>
    .highlight {
        background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-9&color=ff0000)
    }
</style>

<div>
    This is a <span class="highlight">highlighted part</span> of the text
</div>
Output:
This is a highlighted part of the text

This looks decent but the highlighted background could be positioned and sized better. It should stretch on both sides, and a little bit on the Y-Axis as well.

<style>
    .highlight {
        background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-9&color=ffff43);
        margin: -2px -6px;
        padding:  2px  6px;
    }
</style>

<div>
    This is a <span class="highlight">highlighted part</span> of the text
</div>
Output:
This is a highlighted part of the text

This looks much better and is already pretty usable. Now, I can also experiment with different colors. I really like using hsl color format here, since I can adjust lightness much more easily. SVGBox supports most common color formats, making this process easier.

hsl(349,100%,87%)
This is a highlighted part of the text
hsl(74,54%,84%)
This is a highlighted part of the text

And also different brushes:

brush-2
This is a highlighted part of the text
brush-3
This is a highlighted part of the text

And that's it, a really easy way to add this effect to your web page.