Handwriting an SVG Heart, With Our Hearts - Related to story, data, time, scroll, svg

Handwriting an SVG Heart, With Our Hearts

, it’s the Valentine’s Day season again, and what more effective way to express our love than with the symbol of love: a heart. A while back on CSS-Tricks, we shared several ways to draw hearts, and the response was dreamy. Check out all these amazing, heart-filled submissions in this collection on CodePen:

Temani Afif’s CSS Shapes site offers a super modern heart using only CSS:

Now, to show my love, I wanted to do something personal, something crafty, something with a mild amount of effort.

Handwriting a love note is a classic romantic gesture, but have you considered handwriting an SVG? We won’t need some fancy vector drawing tool to express our love. Instead, we can open a blank HTML document and add an tag:

We’ll need a way to see what we are doing inside the “SVG realm” (as I like to call it), which is what the viewBox attribute provides. The 2D plane upon which vector graphics render is as infinite as our love, quite literally, complete with an x- and y-axis and all (like from math class).

We’ll set the start coordinates as 0 0 and end coordinates as 10 10 to make a handsome, square viewBox . Oh, and by the way, we don’t concern ourselves over pixels, rem values, or any other unit types; this is vector graphics, and we play by our own rules.

We add in these coordinates to the viewBox as a string of values:

Now we can begin drawing our heart, with our heart. Let’s make a line. To do that, we’ll need to know a lot more about coordinates, and where to stick ’em. We’re able to draw a line with many points using the element, which defines paths using the d attribute. SVG path commands are difficult to memorize, but the effort means you care. The path commands are:

, , , , , Cubic Bézier curve: C , c , S , s.

, , , Quadratic Bézier Curve: Q , q , T , t.

We’re only interested in drawing line segments for now, so together we’ll explore the first two: MoveTo and LineTo . MDN romantically describes MoveTo as picking up a drawing instrument, such as a pen or pencil: we aren’t yet drawing anything, just moving our pen to the point where we want to begin our confession of love.

We’ll MoveTo (M) the coordinates of (2,2) represented in the d attribute as M2,2 :

Not surprising then to find that LineTo is akin to putting pen to paper and drawing from one point to another. Let’s draw the first segment of our heart by drawing a LineTo (L) with coordinates (4,4) , represented as L2,2 next in the d attribute:

We’ll add a final line segment as another LineTo L with coordinates (6,2) , again appended to the d attribute as L6,2 :

If you stop to preview what we’ve accomplished so far, you may be confused as it renders an upside-down triangle; that’s not quite a heart yet, Let’s fix that.

SVG shapes apply a fill by default, which we can remove with fill="none" :

Rather than filling in the shape, instead, let’s display our line path by adding a stroke , adding color to our heart.

Next, add some weight to the stroke by increasing the stroke-width :

Finally, apply a stroke-linecap of round (sorry, no time for butt jokes) to round off the start and end points of our line path, giving us that classic symbol of love:

Perfection. Now all that’s left to do is send it to that special someone.

Withmonthly unique visitors and overauthors we are placed among the top Java related sites around. Constantly being on the lookout for......

Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks” that make it easy for him to demo code. He’s got one for grad......

Look Closer, Inspiration Lies Everywhere (February 2025 Wallpapers Edition).

Time Data Series: The Rest of the Story

It’s been a while since I wrote about PHP Zmanim — the work I’ve done with it and the things I’ve learned while implementing it. But despite the delay, I always intended to continue the conversation. That’s what we’re doing today.

In my first post, I explained how to install and get started with the PHP Zmanim library. Then, in the next post, I dug into calculating more complex times and the real power of the tool — applying the most common Rabbinic opinions for various zmanim. I’m picking up where I left off with minimal overlap, so if you need to take a minute to get back up to speed, I’ve linked to those previous posts.

The goal today is to explore uses of PHP Zmanim that move beyond the relatively straightforward use of the library. That includes:

Taking a standard time and adjusting it for synagogue specific use cases (“Mincha starts 25 minutes before Shkia each day”).

Using PHP Zmanim library functions and methods that provide non-time calculations — such as the weekly Torah Portion, the Hebrew date, and whether a specified date is a holiday (like Rosh Chodesh or Sukkot).

Once again, I need to begin by stating my gratitude to the folks who made all of this possible. Foremost among a long list of names is Zachary Weixelbaum, the maintainer of the PHP Zmanim library itself, and Eliyahu Hershfeld, creator of the Kosher Java library upon which PHP Zmanim is based.

When we left off, we had a solid basic PHP script that:

Sets variables for the location (in latitude/longitude), along with the time zone and elevation.

Creates a php zmanim object from those variables.

Uses the built-in methods to calculate the time for anything from sunrise to mincha to tzeit hakochavim.

But the sunrise is just the beginning. Using any of the built-in calculations (which are described on the GitHub ReadMe page), you can pull a wide variety of times. For example, to get Mincha Gedola using a specific Rabbinic opinion, I could include:

PHP $gedolah = $zmanim->minchaGedola16Point1Degrees.

In the last blog, I also covered ways to use PHP Zmanim’s format method to make the output more readable:

PHP $gedolah = $gedolah->format('g:i a');

For those who don’t spend a lot of time in synagogue (no blame, no shame, you’re still welcome here) it may not be obvious, but — despite the name of the zman — very few organizations pray Mincha (afternoon prayers) at Mincha Ketana, Mincha Gedola, or Plag haMincha.

In fact, a lot of the work with regard to calculating times has less to do with the straight “what time is Mincha Gedola?” and more with “how late in the day can we reasonably schedule Mincha so that everyone has time to get here after work; but not so late that nobody comes because they’ll miss dinner?”.

If that’s too theoretical, allow me to share the logical jenga puzzle my synagogue considers when setting up the weekly schedule:

Friday night candle lighting : Shkia (sunset) minus 18 minutes.

: Shkia (sunset) minus 18 minutes Summer Friday Mincha : Plag haMincha (using “plagHaminchaAteretTorah”) minus 20 minutes.

: Plag haMincha (using “plagHaminchaAteretTorah”) minus 20 minutes Winter Friday Mincha : Shkia (sunset) minus 22 minutes.

: Shkia (sunset) minus 22 minutes Saturday Mincha : Shkia minus 40 minutes.

: Shkia minus 40 minutes Saturday Ma’ariv : Shkia plus 50 minutes.

: Shkia plus 50 minutes Saturday end of Shabbat : Shkia plus 45 minutes.

: Shkia plus 45 minutes Weekday Mincha: find the earliest shkia for the week, then subtract 17 minutes.

While all the other times I covered in earlier blogs still matter, hopefully, you are starting to realize that they matter less often than one might expect.

So, how do you take a time (like shkia/sunset) and then add or subtract minutes? We’ll start off with the same script we had before:

PHP To that, we’ll add the code to get sunset:PHP $sunset = $zmanim->sunset;And then, we’ll subtract 18 minutes to get candle lighting time:PHP $candles = date('g:i a', strtotime($sunset . " -18 minutes"));That’s right. You just use PHP's own string to time function. I’m sorry if I kept you in suspense. But it’s really just that [website]’s the Torah Portion? What’s the Hebrew Date? When Is Rosh Chodesh?(…and other essential but vexing questions often asked in and around your [website] with date calculations, the KosherJava library (and therefore the PHP Zmanim library) has methods and functions to quickly provide information like the ones asked [website] first thing to understand is that the PHP Zmanim object we’ve been working with so far has been a Zmanim object — an object that has a set of specific times for a particular date. For things involving the dates themselves, we instantiate a jewishCalendar object. The good news is that it’s much easier to create. All you need is the year, month, and [website] We now have a jewishCalendar object to work with and can use methods similar to the ones we found for times. For example, presuming the date we selected was a Saturday, we can get the Torah portion:PHP $format = Zmanim::format(); $parshaeng = json_decode('"' . $format->formatParsha($jewishCalendar) . '"');(Ignore the $format setting for now. We’ll dig into it in just a bit).If you ran that code, $parshaeng would give you:PHP Parshas Ki SavoYou’ll notice we didn’t need to provide latitude, longitude, time zone, etc. I cannot stress enough that this capability alone – the ability to get dates, Torah portions, and more — makes the PHP Zmanim library useful all on its own, even without the time [website] I Get That in Hebrew?The Torah Portion? Of course! This is where the $format line comes [website], an explanation of what it is: It’s a method that modifies objects like Zmanim and jewishCalendar , setting the display and output options. Setting Zmanim::format() without any other information defaults to English. But then you can tell the system you want Hebrew with this additional line:PHP $format->setHebrewFormat(true)Now, if you run the same json_decode(‘”‘ . $format->formatParsha($jewishCalendar) . ‘”‘) line, you’d get:Plain Text כי תבואPutting it all together:PHP formatParsha($jewishCalendar) . '"'); $format->setHebrewFormat(true); $parshaheb = json_decode('"' . $format->formatParsha($jewishCalendar) . '"'); echo "$parshaheb - $parshaeng";This would display: כי תבוא – Ki [website] Day Is It?More specifically, what HEBREW day is it?Like the previous example, we start out with a jewishCalendar and a format [website] $jewishCalendar = Zmanim::jewishCalendar(Carbon::createFromDate($theyear, $themonth, $theday)); $format = Zmanim::format();Then, we add the same line to set the format to [website] $format->setHebrewFormat(true);And finally (and fairly simply), we ask for a straight calendar object output:PHP $zmandate = json_decode('"' . $format->format($jewishCalendar) . '"');That’s literally all you need. The result is something like this:Plain Text 17 Elul, 5784Yes, even though we specified setHebrewFormat , it came out in [website] I Get That in Actual Hebrew?In order to get the Hebrew date to show up fully in Hebrew — both words and letters — we invoke a slightly different method called, appropriately enough, HebrewDateFormatter .Presuming (once again) you set up your initial variables and created a jewishCalendar object, the code to output a Hebrew language date would be:PHP $hebformat = HebrewDateFormatter::create(); $hebformat->setHebrewFormat(true); $hebdate = json_decode('"' . $hebformat->format($jewishCalendar) . '"'); print("Hebrew date: $hebdate");Which would give you:Plain Text Hebrew date: י״ח אלול תשפ״דIs Today the Day?Sometimes you need to check if a specific date is… well, a specific day like Rosh Chodesh (the new month) or part of a multi-day holiday (like Sukkot).It turns out that the PHP Zmanim method makes this very simple. Presuming you’ve started off in the same way as the other examples, once you’ve set up the jewishCalendar object, it’s as simple as:PHP $jewishCalendar->isRoshHashana(); $jewishCalendar->isSuccos();If the date matches the holiday, it will return “true,” and you can proceed with whatever logic or process you want, such as displaying the date (or not).So What’s Next?Believe it or not, there’s still more to cover. In the coming weeks Whenever I get to it, I’d like to cover ways to leverage the built-in astronomy functions for time calculations. Believe it or not, it can really matter in terms of having truly accurate times for things like the start and end of Shabbat and holidays, along with other [website] the meantime, if there’s something else you’d like to see me cover or if you have questions, corrections, or kudos, feel free to leave them in the comments below.

To that, we’ll add the code to get sunset:

And then, we’ll subtract 18 minutes to get candle lighting time:

PHP $candles = date('g:i a', strtotime($sunset . " -18 minutes"));

That’s right. You just use PHP's own string to time function. I’m sorry if I kept you in suspense. But it’s really just that easy.

What’s the Torah Portion? What’s the Hebrew Date? When Is Rosh Chodesh?

(…and other essential but vexing questions often asked in and around your synagogue.).

Along with date calculations, the KosherJava library (and therefore the PHP Zmanim library) has methods and functions to quickly provide information like the ones asked above.

The first thing to understand is that the PHP Zmanim object we’ve been working with so far has been a Zmanim object — an object that has a set of specific times for a particular date. For things involving the dates themselves, we instantiate a jewishCalendar object. The good news is that it’s much easier to create. All you need is the year, month, and day.

PHP We now have a jewishCalendar object to work with and can use methods similar to the ones we found for times. For example, presuming the date we selected was a Saturday, we can get the Torah portion:PHP $format = Zmanim::format(); $parshaeng = json_decode('"' . $format->formatParsha($jewishCalendar) . '"');(Ignore the $format setting for now. We’ll dig into it in just a bit).If you ran that code, $parshaeng would give you:PHP Parshas Ki SavoYou’ll notice we didn’t need to provide latitude, longitude, time zone, etc. I cannot stress enough that this capability alone – the ability to get dates, Torah portions, and more — makes the PHP Zmanim library useful all on its own, even without the time [website] I Get That in Hebrew?The Torah Portion? Of course! This is where the $format line comes [website], an explanation of what it is: It’s a method that modifies objects like Zmanim and jewishCalendar , setting the display and output options. Setting Zmanim::format() without any other information defaults to English. But then you can tell the system you want Hebrew with this additional line:PHP $format->setHebrewFormat(true)Now, if you run the same json_decode(‘”‘ . $format->formatParsha($jewishCalendar) . ‘”‘) line, you’d get:Plain Text כי תבואPutting it all together:PHP formatParsha($jewishCalendar) . '"'); $format->setHebrewFormat(true); $parshaheb = json_decode('"' . $format->formatParsha($jewishCalendar) . '"'); echo "$parshaheb - $parshaeng";This would display: כי תבוא – Ki [website] Day Is It?More specifically, what HEBREW day is it?Like the previous example, we start out with a jewishCalendar and a format [website] $jewishCalendar = Zmanim::jewishCalendar(Carbon::createFromDate($theyear, $themonth, $theday)); $format = Zmanim::format();Then, we add the same line to set the format to [website] $format->setHebrewFormat(true);And finally (and fairly simply), we ask for a straight calendar object output:PHP $zmandate = json_decode('"' . $format->format($jewishCalendar) . '"');That’s literally all you need. The result is something like this:Plain Text 17 Elul, 5784Yes, even though we specified setHebrewFormat , it came out in [website] I Get That in Actual Hebrew?In order to get the Hebrew date to show up fully in Hebrew — both words and letters — we invoke a slightly different method called, appropriately enough, HebrewDateFormatter .Presuming (once again) you set up your initial variables and created a jewishCalendar object, the code to output a Hebrew language date would be:PHP $hebformat = HebrewDateFormatter::create(); $hebformat->setHebrewFormat(true); $hebdate = json_decode('"' . $hebformat->format($jewishCalendar) . '"'); print("Hebrew date: $hebdate");Which would give you:Plain Text Hebrew date: י״ח אלול תשפ״דIs Today the Day?Sometimes you need to check if a specific date is… well, a specific day like Rosh Chodesh (the new month) or part of a multi-day holiday (like Sukkot).It turns out that the PHP Zmanim method makes this very simple. Presuming you’ve started off in the same way as the other examples, once you’ve set up the jewishCalendar object, it’s as simple as:PHP $jewishCalendar->isRoshHashana(); $jewishCalendar->isSuccos();If the date matches the holiday, it will return “true,” and you can proceed with whatever logic or process you want, such as displaying the date (or not).So What’s Next?Believe it or not, there’s still more to cover. In the coming weeks Whenever I get to it, I’d like to cover ways to leverage the built-in astronomy functions for time calculations. Believe it or not, it can really matter in terms of having truly accurate times for things like the start and end of Shabbat and holidays, along with other [website] the meantime, if there’s something else you’d like to see me cover or if you have questions, corrections, or kudos, feel free to leave them in the comments below.

We now have a jewishCalendar object to work with and can use methods similar to the ones we found for times. For example, presuming the date we selected was a Saturday, we can get the Torah portion:

PHP $format = Zmanim::format(); $parshaeng = json_decode('"' . $format->formatParsha($jewishCalendar) . '"');

(Ignore the $format setting for now. We’ll dig into it in just a bit).

If you ran that code, $parshaeng would give you:

You’ll notice we didn’t need to provide latitude, longitude, time zone, etc. I cannot stress enough that this capability alone – the ability to get dates, Torah portions, and more — makes the PHP Zmanim library useful all on its own, even without the time calculations.

The Torah Portion? Of course! This is where the $format line comes in.

First, an explanation of what it is: It’s a method that modifies objects like Zmanim and jewishCalendar , setting the display and output options. Setting Zmanim::format() without any other information defaults to English. But then you can tell the system you want Hebrew with this additional line:

Now, if you run the same json_decode(‘”‘ . $format->formatParsha($jewishCalendar) . ‘”‘) line, you’d get:

PHP formatParsha($jewishCalendar) . '"'); $format->setHebrewFormat(true); $parshaheb = json_decode('"' . $format->formatParsha($jewishCalendar) . '"'); echo "$parshaheb - $parshaeng.

More specifically, what HEBREW day is it?

Like the previous example, we start out with a jewishCalendar and a format object.

PHP $jewishCalendar = Zmanim::jewishCalendar(Carbon::createFromDate($theyear, $themonth, $theday)); $format = Zmanim::format();

Then, we add the same line to set the format to Hebrew.

And finally (and fairly simply), we ask for a straight calendar object output:

PHP $zmandate = json_decode('"' . $format->format($jewishCalendar) . '"');

That’s literally all you need. The result is something like this:

Yes, even though we specified setHebrewFormat , it came out in English.

In order to get the Hebrew date to show up fully in Hebrew — both words and letters — we invoke a slightly different method called, appropriately enough, HebrewDateFormatter .

Presuming (once again) you set up your initial variables and created a jewishCalendar object, the code to output a Hebrew language date would be:

PHP $hebformat = HebrewDateFormatter::create(); $hebformat->setHebrewFormat(true); $hebdate = json_decode('"' . $hebformat->format($jewishCalendar) . '"'); print("Hebrew date: $hebdate.

Sometimes you need to check if a specific date is… well, a specific day like Rosh Chodesh (the new month) or part of a multi-day holiday (like Sukkot).

It turns out that the PHP Zmanim method makes this very simple. Presuming you’ve started off in the same way as the other examples, once you’ve set up the jewishCalendar object, it’s as simple as:

PHP $jewishCalendar->isRoshHashana(); $jewishCalendar->isSuccos();

If the date matches the holiday, it will return “true,” and you can proceed with whatever logic or process you want, such as displaying the date (or not).

Believe it or not, there’s still more to cover. In the coming weeks Whenever I get to it, I’d like to cover ways to leverage the built-in astronomy functions for time calculations. Believe it or not, it can really matter in terms of having truly accurate times for things like the start and end of Shabbat and holidays, along with other observances.

In the meantime, if there’s something else you’d like to see me cover or if you have questions, corrections, or kudos, feel free to leave them in the comments below.

Kubernetes has emerged as the go-to orchestration tool for managing containerized applications. ’s 2024 Voice of Kubernetes Exper......

Interacting with date pickers in web applications can be challenging due to their different implementations. Some date pickers allow direct text input......

A data culture is the collective behaviors and beliefs of people who value, practice, and encourage the use of data and AI to propel organizational tr......

Scroll Driven Animations Notebook

Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks” that make it easy for him to demo code. He’s got one for gradient text, one for a comparison slider, another for accordions, and the list goes on.

One of his latest is a notebook of scroll-driven animations. They’re all impressive as heck, as you’d expect from Adam. But it’s the simplicity of the first few examples that I love most. Here I am recreating two of the effects in a CodePen, which you’ll want to view in the latest version of Chrome for support.

This is a perfect example of how a scroll-driven animation is simply a normal CSS animation, just tied to scrolling instead of the document’s default timeline, which starts on render. We’re talking about the same set of keyframes:

@keyframes slide-in-from-left { from { transform: translateX(-100%); } }.

All we have to do to trigger scrolling is call the animation and assign it to the timeline:

li { animation: var(--animation) linear both; animation-timeline: view(); }.

Notice how there’s no duration set on the animation. There’s no need to since we’re dealing with a scroll-based timeline instead of the document’s timeline. We’re using the view() function instead of the scroll() function, which acts sort of like JavsScript’s Intersection Observer where scrolling is based on where the element comes into view and intersects the scrollable area.

It’s easy to drop your jaw and ooo and ahh all over Adam’s demos, especially as they get more advanced. But just remember that we’re still working with plain ol’ CSS animations. The difference is the timeline they’re on.

I’m trying to come up with ways to make components more customizable, more efficient, and easier to use and understand, and I want to describe a patte......

In this article, we will explore building a highly scale distributed[1] messaging system like whatsapp.

In this article, I will discuss the practical application of large language models (LLMs) in combination with traditional automation tools like Python......